Top

mFilter2 для самых маленьких

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

  • установлен 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.

Post a Comment