Наверх

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

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

Isotope

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

Для тегов есть очень удобное дополнение от Павла Гвоздя — 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 стандартным образом, и наша фильтрация заработает.


3 комментария

  1. Игорь Сидлярук 28 июня 2017, 10:04 # 0
    Илья, спасибо тебе за твои советы и подборки. Нужные и полезные вещи! НО!
    Не думал ли ты сделать возможность «Добавить в избранное».
    Было бы отлично. А то многое теряется и «сползает» со временем…
    Если реализуешь — ваще прям супер было бы. ;-)
    1. Илья Уткин 28 июня 2017, 11:20 # 0
      Ты не первый с такой просьбой, видимо, действительно, нужная штука)

      Реализовал возможность добавлять статьи в избранное (звёздочка рядом с количеством комментариев на странице статьи).
      1. Игорь Сидлярук 28 июня 2017, 12:16(Комментарий был изменён) # 0
        Отлично. Спасибо ;-)

    Авторизация

    через сервис Loginza:

    Подписка или RSS

    Буду присылать новые статьи — никакого спама



    Шаблоны MODX

    1 2 Дальше »

    Объектная
    модель
    MODX