Начальные требования

• установлен minishop
• установлен mfilter2
• в категории есть хотя бы пара товаров с ценой
• ???
• PROFIT!

а также:

• установлена JQuery
• затем должен быть скрипт /assets/components/msearch2/js/web/default.js
• стили по желанию

Поехали

Рассмотрим пример сниппета из документации

Есть уже готовая демка с админкой (test:testtest). Скажем спасибо Артему. И его видео в частности. Там, конечно, несколько частный случай рассматривается. Мы же попробуем описать собственный экспириенс.

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

В этом смысле modx, конечно, чудо. Но хитрость в нюансах. Хотя разобраться можно за несколько часов.

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

В сниппете выше опущено несколько важных параметров. Как обычно, самое важно скрыто.

• &parents тут ручками нужно указать id ресурса категории, у которой будут фильтроваться товары. Вообще по умолчанию нам предлагают в каждой категории вызывать сниппет со своими фильтрами. Если id можно поставить динамически типа {$id}([[+id]]). То с &filters сложнее.
• &filters — список фильтров. Фильтры в разных категорий могут пересекаться. Например, вес может быть у десятка категорий. Но где-то нужды в этом фильтре нет.

  Рассмотрим варианты, кроме текущего ms|price:number:

  • msoption|ip
  • msoption|pwr

  До черты — название таблицы. Идем в документацию, Ctrl+F вставляем кодовое_имя_таблицы/поле:фильтр и читаем какие бывают таблицы. Какие данные можно из какой таблицы получать и фильтровать.

  В нашем случае это опции товара. Их можно добавить в админке — Приложения — Minishop2 — Настройки. Там 2 важных поля и 1 неважное:

  • ключ. Заполняем латинкой человекопонятно
  • название. Заполняем кириллицей
  • тип свойства. Выбираем что душе угодно. Для чисел можно выбрать «числовое поле». Потом при редактировании товара и добавлении этой опции станет понятно насколько вы угадали

  Итак, после черты — это название опции товара, определяемое нами самими.

  Как же упростить задачу вывода для каждой категории своих специфических фильтров?

  1. Можно не париться. Если категорий не 200, то по силам зайти в каждую и настроить для нее фильтры
  2. Если категорий много, то, как советует товарищ для категории создается текстовое поле tv, и туда через запятую пишутся фильтры типа price,weight,vendor. Потом в шаблоне мы это поле читаем, бьем по запятой на части и передаем имя фильтра в качестве параметра в вызов [[!mFilter2?….]] и там уже используем

     Тогда задача упрощается до заполнения этого tv
     Если хочется еще и управлять внешним видом фильтра, то можно изменить тип поля, где перечисляются фильтры на migx, и заполнять его типа так:

     Имя фильтра | Тип
     ————|———
     price | slider
     weight | slider
     vendor | checkbox

      

     И уже при вызове [[!mFilter2?….]] вызывать соотвествующий шаблон row &tplFilter.row.ms|price=`tpl.mFilter2.filter.number`, где после «=» название нашего чанка, где мы довольно свободно можем управлять внешним видом. Забегая вперед внешний вид фильтров — он как бы в 99% типовой. То есть внешний вид чекбокса может подходить для множества опций для фильтрации: веса, мощности, производителя и так далее.

      

     Можно исхитриться и даже возвращать json. Просто отредактировать соотвествующие шаблоны внешнего вида фильтров. Это удобно, если вы хотите рисовать фильтры javascript-ом на фронте. Тогда ajax-ом вы запрашиваете конфигурацию фильтров для данной страницы, сами их рисуете, вешаете события и т.д.

     Такое есть смысл делать, если вы по каким-то причинаем не хотите тянуть jquery, дефолтный скрипт и вы против стилизовать под себя внешний вид фильтров, то есть код их шаблонов

• &aliases — не только нужно типа для seo и красивого урла, но и их наличие напрямую влияет на синтаксис указания фильтров. Примеры:
  &aliases=`msoption|ip==ip`
  &tplFilter.row.ip=`tpl.mFilter2.filter.ip`
  а без $aliases шаблон указывался бы так:
  &tplFilter.row.msoption|ip=`tpl.mFilter2.filter.ip`
• &tplOuter — общая обертка фильтра. По умолчанию использует чанк tpl.mFilter2.outer. Его следует открыть и обрать внимание в частности на 2 id-ка. mse2_mfilter — оборачивает весь фильтр. Встроенный дефолтный скрипт на него ориентируется, чтобы вешать события и отправлять запросы.
  mse2_results — тот же скрипт будет врисовывать в контейнер с этим идентификатором ответ сервера, то бишь html, который придет к нему в объекте. Вообще советую открыть демку и посмотреть как ходят запросы на сервер через Chrome Dev Tools. Div с id=mse2_results можно вынести куда угодно из этого чанка. Js его найдет везде и вставит результаты фильтрации.
• &tpls— список через запятую названий чанков-шаблонов, которые будут рисовать html результатов фильтрации. Если вместе с POST-запросом с фронт-энда отправить параметр tpl:1, то будет использовать второй шаблон, если 0 — то первый чанк. Например в демке сделали вид сеткой и списком. В документации это тоже описано, может кому-то покажется более понятным.

  А если вы определяете на бэкенде зашел ли пользователь с мобильного устройства и у вас есть под это дело отдельная верстка, то при вызове сниппета !mFilter2 вы сами можете подставлять шаблон.

  Также можно хотеть получать json в результатах фильтрации. Все это можно намутить в шаблоне для этого параметра, особенно, если решить проблему с trailing comma.