docs.modx.pro
mFilter
mFilter
Фасетная фильтрация для MODX 3 с поддержкой SEO URL
  • MODX 3
  • PHP 8.1
  • Vue 3
  1. Компоненты
  2. mFilter
  3. Быстрый старт

Быстрый старт ​

Четыре шага до работающих фильтров в каталоге MiniShop3: установить, собрать набор фильтров, подключить шаблон каталога, проверить на сайте.

Нужны MODX 3 и PHP 8.0 или новее. Зависимости pdoTools и VueTools установщик докачает сам.

Шаг 1. Установить компонент ​

Поставьте mFilter через Установщик → Загрузить дополнения.

Scheduler

С установленным Scheduler индекс дополнительно догоняет правки каждые пять минут, а кэш каталога прогревается в фоне. Для старта это не обязательно.

Шаг 2. Создать набор фильтров ​

Набор отвечает на два вопроса: какие фильтры показывать и на каких страницах.

  1. Откройте Приложения → mFilter → Наборы фильтров и нажмите Добавить набор.

  2. Введите название — например, «Каталог».

  3. В секции Фильтры нажмите + Добавить фильтр трижды и заполните строки:

    КлючТипЗаголовок
    vendor_idПроизводителиПроизводитель
    colorЦветаЦвет
    priceЧисловой (диапазон)Цена

  4. Справа, в дереве Страницы каталога, отметьте корневой раздел каталога.

  5. Сохраните набор.

Флажок Наследование на дочерние страницы включён по умолчанию: набор сработает и во вложенных категориях, отмечать каждую не нужно.

Тип выбирается вручную

Источник подставляется по ключу сам, а тип — нет: у vendor_id и color он останется «Стандартный». Производители тогда выведутся числовыми идентификаторами вместо названий, а цвета — списком вместо плашек. Выберите тип из списка, как в таблице выше.

Типы Производители и Цвета доступны только с установленным MiniShop3.

Индекс строится сам ​

При сохранении набора mFilter индексирует его ключи — на крупном каталоге это занимает несколько секунд.

Проверить можно в Приложения → mFilter → Обслуживание: у «Индекса фасетов» появится метка «Активен».

Дальше индекс поддерживает себя сам — при сохранении товара в админке. Кнопка Построить индекс нужна после массовых импортов и правок в базе мимо MODX.

Шаг 3. Вывести фильтры в шаблоне каталога ​

Готовый шаблон ресурса едет в комплекте — с разметкой, стилями и всеми вызовами: core/components/mfilter/elements/templates/catalog.tpl. Создайте шаблон ресурса в MODX, скопируйте в него содержимое файла и назначьте разделам каталога.

Чанки карточек и блоков фильтров устанавливаются сами — отдельно их заводить не нужно.

Если шаблон каталога у вас уже свой, добавьте в него два вызова:

fenom
{set $catalog = '!mFilter' | snippet : ['element' => 'msProducts']}

<aside>{'!mFilterForm' | snippet}</aside>
<main>{$catalog}</main>

Разделы, размер страницы, чанки карточек, пагинация и подключение CSS с JS уже имеют рабочие значения по умолчанию.

Порядок вызовов важен

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

Вызовите форму раньше — подборки ещё нет, и она соберёт свою: все товары раздела, без учёта того, что отбирает msProducts. Числа рядом со значениями тогда не сойдутся со списком.

Шаг 4. Проверить на сайте ​

Откройте категорию каталога и выберите значение в фильтре.

Список обновится без перезагрузки страницы, а адрес примет вид /catalog/vendor_id--acme/color--black/.

Значения в адресе — алиасы, mFilter составляет их сам. Переименовать любой можно на вкладке Алиасы.

Если что-то пошло не так ​

Что видноПричина
Форма фильтров пустаяК странице не привязан набор. Наследование действует только вниз от отмеченного раздела — проверьте дерево на шаге 2
Вместо названий производителей — числаУ фильтра vendor_id остался тип «Стандартный»
Числа рядом со значениями не сходятся со спискомmFilterForm вызван раньше mFilter
Фильтрация заметно медленнаяИндекс не построен: mFilter → Обслуживание → Индекс фасетов должен показывать статус «Активен»

Что дальше ​