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

Те, кто работал с mFilter2, знают его ограничения: фильтры намертво привязаны к вызову сниппета, для разных категорий — костыли с обёртками, SEO только через сторонний SeoFilter, а настройка — копипаст параметров в шаблоне.

mFilter для MODX3 — это не порт старого кода, а переосмысление с нуля. Наборы фильтров через админку, встроенные ЧПУ и SEO-шаблоны, визуальный интерфейс вместо портянок в сниппете.


Напомню: mSearch2 разделён на два самостоятельных компонента. mSearch (индексация и поиск) вышел пару недель назад. Сегодня — mFilter (фильтрация и каталог). Оба работают в связке с MiniShop3.

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

Раньше фильтры задавались прямо в вызове сниппета:

[[!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`
]]

Нужны разные фильтры для разных категорий в одном шаблоне? Пишите обёртки, плодите условия, дублируйте код.

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





В интерфейсе:

• Указываете ключ поля, выбираете таблицу и тип фильтра (все типы из mFilter2 на месте)
• Меняете порядок фильтров перетаскиванием строк
• Назначаете набор нужным страницам через дерево ресурсов

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

Многие использовали SeoFilter от @Евгений Шеронов для ЧПУ-адресов фильтрации. Рабочее решение, но с нюансами: отдельный компонент, своя логика настройки, дополнительные таблицы.

В mFilter SEO-роутинг встроен. Идея та же — превращаем GET-параметры в человекопонятные сегменты URL — но реализация своя, с более эффективным кешированием.

Алиасы

Компонент собирает все значения из полей фильтров, транслитерирует и сохраняет в таблицу алиасов.



Генерация работает в нескольких режимах:

• Разово из админки — для первичного наполнения
• При сохранении ресурса — подхватываются новые значения
• На лету при загрузке страницы — если что-то пропустили

Любой алиас можно отредактировать вручную.

Паттерны

Сегмент URL формируется из ключа и значения. По умолчанию «Цвет: Красный» превращается в /color-krasnyj/. Но формат можно настроить:

• /krasnyj-color/ — значение перед ключом
• /cvet-krasnyj/ — свой ключ на русском
• /krasnyj/ — без ключа вообще

Кто работал с SeoFilter — концепция знакомая.

SEO-шаблоны

Индивидуальные title, description и H1 для комбинаций фильтров. Задаёте шаблон с плейсхолдерами — получаете уникальные метатеги для каждой страницы фильтрации.





Настройка проще, чем в SeoFilter, а роутинг эффективнее за счёт многоуровневого кеширования.

Сниппеты

Сниппет разделён на два:

• 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>

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

Фронтенд

Чистый JS без зависимостей (кроме noUISlider для слайдера). Архитектура по примеру MiniShop3 — модульная, в два слоя:

1. Headless API — ядро без привязки к DOM. Можно использовать с Vue, React или классическим MODX-шаблоном.

2. UI Layer — DOM-привязки для готовой HTML-разметки: форма, результаты, пагинация, слайдеры.

Подробнее — в документации.

Скрипты подключаются через системную настройку:

[
    "[[+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"
]

Набор скриптов можно менять под себя.

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

Подробная документация с примерами и рецептами для типовых задач.

Итого

Что получили по сравнению с mFilter2 + SeoFilter:

• Наборы фильтров в админке вместо параметров в сниппете
• Визуальный интерфейс настройки
• SEO-роутинг из коробки: ЧПУ, алиасы, метатеги
• Один компонент вместо двух
• Модульный JS с Headless API

Компонент доступен в modstore.pro. Стартовая цена действует ограниченное время.

Если mFilter2 был для вас рабочим инструментом — попробуйте новую версию. Буду рад обратной связи и постараюсь оперативно реагировать на баги и предложения.