Skip to content
mFilter
mFilter
Фасетная фильтрация для MODX 3 с поддержкой SEO URL
  • MODX 3
  • PHP 8.1
  • Vue 3
  1. Компоненты
  2. mFilter
  3. Рецепты
  4. Посадочная страница под комбинацию фильтров

Посадочная страница под комбинацию фильтров ​

Свой адрес для подборки по двум условиям — скажем, /catalog/nemeckie-chernye/ для немецких чёрных товаров вместо /catalog/made_in--germaniya/color--black/ — делается отдельной страницей, которая сама задаёт себе фильтры.

Настройками такой адрес не получить. Адрес собирается по сегменту на каждый выбранный фильтр, а паттерн URL принадлежит одному ключу: он меняет вид сегмента, но не склеивает два фильтра в один.

Если нужен не свой адрес, а свои заголовок и текст для комбинации, посадочная страница не нужна: заведите на адрес с сегментами индивидуальную SEO-запись.

Страница с заданными фильтрами ​

1. Создайте ресурс с нужным адресом — nemeckie-chernye внутри каталога. Заголовок, описание и SEO-текст пишутся прямо в нём; как вывести их в шаблоне ресурса — в разделе SEO посадочной.

Набор фильтров страница получит от каталога по наследованию или привязкой в админке mFilter. После создания нажмите «Пересобрать кэш» на вкладке Наборы фильтров — иначе форма на странице останется пустой, а адреса с сегментами могут отдать 404.

2. Заведите сниппет mFilterPreset:

php
<?php
// Фильтры, которых нет в адресе
$preset = [
    'made_in' => ['Германия'],
    'color'   => ['black'],
];

// Дополняем, а не перезаписываем: посетитель может выбрать что-то ещё,
// и плагин уже положил сюда то, что разобрал из адреса
$current = $modx->getPlaceholder('mfilter.filters');
if (!is_array($current)) {
    $current = [];
}

$modx->setPlaceholder('mfilter.filters', array_merge($preset, $current));

return '';

Значения пишутся так, как их хранит фильтр, — то же, что лежит в индексе и уходит в адрес до превращения в алиас.

3. Вызовите его в шаблоне ресурса до mFilter:

fenom
{'!mFilterPreset' | snippet}

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

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

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

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

Посадочная страница: в форме отмечены «Германия» и «Чёрный», найдено 629 товаров

Адрес на снимке — /bytovaya-tehnika/nemeckie-chernye/, без сегментов фильтров.

Что станет с адресом после клика ​

Форма видит заданные фильтры как выбранные, поэтому при первом же клике они уйдут в адрес сегментами:

/catalog/nemeckie-chernye/made_in--germaniya/color--black/size--xl/

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

Заданное условие снимается до перезагрузки

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

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

SEO посадочной ​

В шаблоне ресурса посадочной выводите поля самого ресурса и canonical на её адрес:

fenom
<title>{$_modx->resource.longtitle ?: $_modx->resource.pagetitle}</title>
<link rel="canonical" href="{$_modx->resource.id | url : ['scheme' => 'full']}">

SEO-плейсхолдеры mFilter из раздела SEO-теги в <head> здесь не подходят: для mFilter посадочная — страница с выбранными фильтрами. Они дадут:

  • canonical на адрес с сегментами — /catalog/nemeckie-chernye/made_in--germaniya/color--black/;
  • заголовок с хвостом из значений — «Немецкие чёрные - Германия, black», если для набора нет SEO-шаблона;
  • noindex, если включена настройка mfilter.seo_noindex_filtered.

После первого клика скрипт сам ставит заголовок и canonical страницы с фильтрами — это уже обычная навигация.

Если условие должно быть жёстким ​

Когда подборка обязана остаться в своих границах — например, страница только немецких товаров, — условие задаётся не фильтром, а ограничением выборки:

fenom
{set $catalog = '!mFilter' | snippet : [
    'element' => 'msProducts',
    'parents' => 5,
    'where' => ['Data.made_in' => 'Германия']
]}
Заданные фильтрыОграничение выборки
Адрес после кликаУсловия уезжают в сегментыОстаётся чистым
Видно в формеЗначения отмеченыНе видно
Посетитель сниметДо перезагрузки страницыНет
Откуда берёт данныеЛюбой фильтрПоля товара через Data., поля ресурса, опции через optionFilters

Ограничение переживает AJAX-фильтрацию: оно входит в параметры вызова, а они восстанавливаются при каждом запросе. Опции MiniShop3 ограничивает параметр msProducts optionFilters: 'optionFilters' => ['color' => 'black'].

Проверка ​

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