MODX и Isotope - фильтрация блоков на странице

Isotope — это jQuery плагин, который позволяет фильтровать группу блоков, сортировать блоки и располагать их, например, плиткой.



Для того, чтобы фильтрация заработала, у блоков нужно проставить соответствующие классы. Если мы хотим сделать фильтрацию, например, проектов в портфолио, то сами проекты могут быть отдельными ресурсами, а вот категории могут быть тегами.

Для тегов есть очень удобное дополнение от Павла Гвоздя — tvSuperSelect. Будем использовать его для распределения проектов по категориям.

Решение будет состоять условно из двух частей: первая — вывод всех тегов в виде кнопок для фильтрации, а вторая — добавление блокам соответствующих классов.

Как вывести все теги в tvSuperSelect

Сниппет tvssTags выводит теги для какого-то конкретного ресурса. Чтобы вывести вообще все теги, которые есть на сайте, нужно сделать выборку из базы данных (из таблицы tvss_options). Тут нам поможет pdoResources:

{'pdoResources' | snippet : [
    'loadModels' => 'tvsuperselect',
    'class' => 'tvssOption',
    'sortby' => '{ "value":"ASC" }'
    'groupby' => 'value',
    'tpl' => '@INLINE <li>
        <a href="{$_modx->resource.uri}#{$value}"
         data-filter=".{$value | md5}"
         class="filter">{$value}</a>
        </li>',
    'tplWrapper' => '@INLINE <ul class="nav nav-tabs">{$output}</ul>'
]}

В параметре data-filter не получится подставить просто значение тега, так как оно может содержать символы, которые не разрешается использовать в наименовании CSS-классов (например, пробел). Поэтому для получения уникального класса для каждого из тегов мы будем использовать MD5-хеш от значения тега.

Вывод ресурсов с классами для фильтрации

Чтобы фильтрация заработала, у самих блоков должны быть проставлены такие же классы, как и в параметре data-filter:

<!-- GRID ITEM -->
<div class="grid-item {'tvssTags' | snippet : [
        'id' => $id,
        'tv' => 1,
        'pageId' => $id,
        'tpl' => '@INLINE {$tag | md5}',
        'outputSeparator' => ' '
    ]}">
    <!-- GRID DETAILS -->
    <div class="grid-details">
        <a href="{$uri}">
            <h4 class="grid-title">{$pagetitle}</h4>
        </a>
    </div>
</div>
<!-- /. GRID ITEM -->

Здесь важно указать параметр outputSeparator, так как CSS-классы разделяются пробелами, ну и привести значения классов к тому же виду, что и в параметре data-filter (MD5-хеш от значения тега).

Теперь осталось только подключить плагин Isotope стандартным образом, и наша фильтрация заработает.