mFilter для MODX 3 - новое поколение.

Представляю вашему вниманию новый компонент фильтрации для MODX3 и MiniShop3. Несмотря, на старое название, это не перенос старого функционала на новую платформу. Компонент mFilter — это придуманная заново история, микс из mFilter2 и SeoFilter с современным интерфейсом и решением большинства известных мне проблем. Весь SEO функционал теперь доступен сразу из коробки.


Давайте же разберемся что у меня получилось.

Во-первых, напомню, что я принял решение разделить компонент mSearch2 на две логические части при адаптации их под MODX3. mSearch вышел пару недель назад, а сегодня наступила очередь mFilter, который реализует весь знакомый нам функционал в новом прочтении. Компонент конечно же тесно связан с MiniShop3 и mSearch.

Наборы фильтров

Одно из крупных нововведений и переосмыслений компонента — это работа с определением фильтров для страницы.

Как это работало раньше: мы задавали набор фильтров для конкретного шаблона

[[!mFilter2?
  &parents=`0`
  &element=`msProducts`
  &aliases=`
    ms|price==price,
    resource|parent==parent,
  `
  &filters=`
    ms|price:number,
    parent:parents,
    parent:categories,
  `
  &class=`msProduct`
  &tplFilter.outer.price=`tpl.mFilter2.filter.slider`
  &tplFilter.row.price=`tpl.mFilter2.filter.number`
]]

Удобно, привычно. но периодически возникала необходимость сделать разные фильтры для разных страниц, при этом оставаясь в рамках одного шаблона. Что мы только не придумывали: писали сниппеты-обертки, модифицировали сам сниппет mFilter, формировали параметр filter заранее отдельным сниппетом и т.п.

Было решено сделать наборы фильтров, не привязанные к шаблону. Один набор можно назначить всем страницам, или части страниц. Захотели для отдельной страницы другой набор фильтров — просто создайте новый и назначьте его нужной странице.

Я пошел дальше и решил сделать удобное визуально управление наборами фильтров из админки. У меня уже был готов мой инструмент визуала для админки VueTools — поэтому получилось не только удобно, но и достаточно красиво.





Все что вам нужно — это вписать ключ, имя нужного поля. Остальное предусмотрено в интерфейсе. Выбор таблицы, выбор типа фильтра (они все привычные из mFilter2).

Также в таблице можно обычным перетаскиванием строк самостоятельно регулировать порядок отображения фильтров на странице, что тоже был достаточно распространенный запрос на моей практике.

Ниже в этом же интерфейсе есть дерево ресурсов, в котором можно задать, на каких страницах будет доступен текущий набор фильтров.

.

ЧПУ из коробки

За примером далеко ходить не нужно, думаю все знают отличный компонент SeoFIlter от @Евгений Шеронов
Он довольно неплохо реализовал SEO функционал, начиная от превращения обычных GET параметров в ЧПУ сегменты. Взяв за основу эту идею и поработав с минусами проекта — был реализован собственный улучшенный механизм работы.

Алиасы

Компонент, зная какие есть в системе наборы фильтров, забирает все доступные значения этих полей, делает умный транслит и готовит значения для будущих SEO URL.



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

Паттерны

Чтобы сформировать сегмент URI мы должны внести в него ключ и значение.
Например для Цвет Красный мы автоматически получим /color-krasnyj/. За подобное сочетание отвечает настройка паттерны, которая позволяет по разному сочетать ключ и значение.


Используя паттерны вы можете составить удобный формат сегмента адреса для каждого поля отдельно.

• Хотите поменяйте местами ключ и значение /krasnyj-color/
• Хотите напишите собственный ключ /cvet-krasnyj/
• Хотите вообще уберите ключ из URL /krasnyj/

В общем если вы пользовались SeoFilter — то наверняка понимаете о чем идет речь и использовали эту возможность на практике.

SEO-шаблоны

Очередная фича из SeoFilter, перекочевавшая под мое крыло. Формируем индивидуальные мета тэги под заданные фильтры.





Таким образом комбинируя несколько вкладок — мы получаем великолепный SEO инструмент для работы, с продуманным и красивым интерфейсом. Настройки существенно проще чем в SeoFilter. Ну а роутинг в бэкенде намного эффективнее с многоуровневой системой кеширования.

Сниппеты

Большой сниппет mFilter был также разделен на две логические части.

• mFilterForm — собственно построение формы с фильтрами. Обычно размещается в сайдбаре каталога.
• mFilter — результаты фильтрации, каталог с карточками страниц или товаров.

Пример размещения в шаблоне

<div class="catalog-wrapper">
        <aside class="catalog-sidebar">
            {'!mFilterForm'|snippet:[
                'resourceId' => $_modx->resource.id
            ]}
        </aside>

     
        <div class="catalog-content">
                {'!mFilter'|snippet:[
                    'element' => 'msProducts',
                    'parents' => $_modx->resource.id,
                    'includeThumbs' => 'small,medium',
                    'includeVendorFields' => 'name,logo',
                    'formatPrices' => 1,
                    'withCurrency' => 1,
                    'limit' => 12,
                    'showLog' => 0,
                    'sortby' => 'menuindex',
                    'sortdir' => 'ASC',
                    'includeTVs' => '',
                    'showZeroPrice' => 0,
                    'tplOuter' => 'mfilter.outer',
                    'tpl' => 'tpl.msProducts.row',
                    'tpls' => ['tpl1' => 'mfilter.grid', 'tpl2' => 'mfilter.row']
                ]}
        </div>
    </div>

Как видно теперь сниппет для формирования формы с фильтрами особо не требует никаких параметров (хотя они есть)
Ну а mFilter по сути просто пробрасывает параметры дальше в msProducts.

Фронтенд

Давайте поговорим о том, как все устроено в клиентской части.

Чистый JS, никаких зависимостей, кроме одной. Для ползункового слайдера используется библиотека noUISlider

Весь JS построен и организован по примеру MiniShop3. Модульная архитектура. Два основных слоя:

1. API Core (Headless) — независимое ядро, без привязки к DOM. Работает как основа. Можно использовать как для привычного MODX HTML, так и для VUE, React.

В составе

• ApiClient.js — HTTP-клиент для запросов к серверу
• FilterAPI.js — методы работы с фильтрами
• hooks.js — система хуков для расширения
• mfilter.headless.js — инициализация и экспорт window.mfilter

2. UI Layer (SSR) — DOM-привязки для работы с готовой разметкой:

• FilterUI.js — управление формой, результатами, пагинацией
• mfilter.slider.js — интеграция с noUiSlider
• mfilter.js — автоинициализация

Более подробно можно прочитать в документации

Для подключения скриптов есть системная настройка с вот таким содержанием

[
    "[[+cssUrl]]web/mfilter.css",
    "[[+jsUrl]]web/core/ApiClient.js",
    "[[+jsUrl]]web/core/FilterAPI.js",
    "[[+jsUrl]]web/modules/hooks.js",
    "[[+jsUrl]]web/mfilter.headless.js",
    "[[+jsUrl]]web/ui/FilterUI.js",
    "[[+jsUrl]]web/mfilter.slider.js",
    "[[+jsUrl]]web/mfilter.js"
]

Заменяйте, добавляйте свое — нет никаких проблем.

Документация

Подготовил для вас достаточно подробную документацию, постарался описать и учесть все известные мне кейсы. Оставил множество примеров и рецептов.

Вот таким получился обзор. Уверен новый компонент не посрамит многолетней славы своего бренда и нам удастся сделать множество интересных проектов. Постараюсь вовремя реализовать на ваши отзывы и оказывать поддержку на высоком уровне. Компонент уже доступен в modstore.pro. Стоимость за богатый функционал на старте несущественна — торопитесь воспользоваться этим преимуществом и оказаться в числе первых.

Если считаете мой труд полезным — Просто купите компонент впрок, даже если прямо сейчас он вам не нужен. Для меня это будет знаком, что спрос есть, и нужно двигаться дальше.