Сегодня полезная статья про фильтры phx и их модификаторы MODX Revo при помощи которых вы сможете прямо внутри шаблонов, манипулировать значением различных тегов.

Зачем они нужны?

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

Где: 1 — id главной страницы,
$carusel — чанк с кодом карусели (баннера).
Только полные чайники создают новый шаблон, ради нескольких строк кода карусели. Я тоже таким был, в общем не отчаиваемся и внедряем phx в разработку.

Разберем вышеприведенную конструкцию по подробнее:

[[*id:is=`1`:then=`[[$carusel]]`]]

*id — выводит id текущей страницы;

:is=`1`:then=

— проверяет равно ли *id == 1 ? и если равно, то выводится содержимое then ;
$carusel — выводит чанк carusel.

Вместо *id, можно использовать и другие поля, например *template — выведет текущий используемый шаблон. Либо можно проверять заполнено или нет TV-поле (пусть будет *keywords) и если оно заполнено, то выводить его. Разберем данный случай поподробнее. Дано стандартная разметка:

Задача: не выводить эту строку, если TV keywords не заполнено.
Решение.

[[*keywords:!empty=``]]

Нагрузки

Нужно следить за обработкой модификаторов, бездумное их использование вызовет лишние нагрузки. Вернемся к карусели, данная запись считывается слева направо и МОДХ выполняет все вложенные условия, в независимости от того, верное условие или нет, будет ли выводится на текущей странице содержимое [[$carusel]] , в любом случае его содержимое обработается. В связи с этим более целесообразно переписать запись:

[[$caru[[*id:is=`1`:then=`sel`]]]]

В этом случае, содержимое чанка $carusel , будет обработано в случае, если выполняется условие

*id:is=`1`

т.к. выполняется

[[*id:is=`1`:then=`sel`]]

и если id текущей страницы равно 1, последнее что обрабатывается — [[$carusel]] , если id не равно 1, тогда — [[$caru]] . А если чанка $caru — нет в элементах, то и нагрузки не будет.

А вообще идеальный вывод будет выглядеть так.

[[$[[*id:is=`1`:then=`carusel`]]]]

О том, как правильно интегрировать верстку в modx revo в рекомендую почитать здесь.

Примечание! Вы можете комбинировать сколько угодно модификаторов под логику работы компонентов сайта, но главное помните, их основная суть — облегчить разработку , а не усложнять без того сложные задачи. Обычно, самый эффективный и действенный способ — это самый простой, так как чем проще и понятней конструкция — тем легче с ней будет работать в дальнейшем. Ниже перечислены основные модификаторы, которые можете использовать для любого тега МОДХ Рево.

Цепочки модификаторов

Хорошим примером построения цепочки будет отформатировать строку даты в другой формат, например, так:

[[+mydate:strtotime:date=`%Y-%m-%d`]]

Прямой доступ к таблице «modx_user_attributes» в базе данных с использованием выходных модификаторов вместо сниппета можно осуществить просто путем использования модификатора userinfo . Выбрать соответствующий столбец из таблицы и указать его в качестве свойства выходного модификатора, например, так:

Внутренний ключ пользователя: [[!+modx.user.id:userinfo=`internalKey`]] Логин: [[!+modx.user.id:userinfo=`username`]] Полное имя: [[!+modx.user.id:userinfo=`fullname`]] Роль: [[!+modx.user.id:userinfo=`role`]] E-mail: [[!+modx.user.id:userinfo=`email`]] Телефон: [[!+modx.user.id:userinfo=`phone`]] Мобильный телефон: [[!+modx.user.id:userinfo=`mobilephone`]] Факс: [[!+modx.user.id:userinfo=`fax`]] День рождения: [[!+modx.user.id:userinfo=`dob`:date=`%Y-%m-%d`]] Пол: [[!+modx.user.id:userinfo=`gender`]] Страна: [[!+modx.user.id:userinfo=`country`]] Штат: [[!+modx.user.id:userinfo=`state`]] Zip код: [[!+modx.user.id:userinfo=`zip`]] Фото: [[!+modx.user.id:userinfo=`photo`]] Комментарий: [[!+modx.user.id:userinfo=`comment`]] Дата последнего входа: [[!+modx.user.id:userinfo=`lastlogin`:date=`%Y-%m-%d`]] Количество входов: [[!+modx.user.id:userinfo=`logincount`]]

Особое внимание обращаем на восклицательный знак [[ ! +modx.user.id]] . Он позволяет НЕ кэшировать содержимое вывода. Почему нужно не кешировать? Представим это так: на сайте 5 пользователей. Первый пользователь зашел на страницу с вызовом:

Добро пожаловать, [[!+modx.user.id:userinfo=`username`]]!

По задумке на этой странице, выводится приветственное сообщение пользователю. Так вот, если результат будет кешироваться, то при первом входе на эту страницу — сохранится имя пользователя который только что зашел — и всем остальным будет показываться не их имя, а имя того пользователя который вошел на эту страницу первым. Чтобы этого избежать — просто не кэшируем этот тэг, с помощью восклицательного знака перед вызовом [[! +modx…

P.s.: Не забываем отключать кэширование тегов, где нужно! Чтобы это сделать — нужно ИЗБАВЛЯТЬСЯ от восклицательных знаков (! ) . Результаты большинства сниппетов вплоне себе могут работать из кэша. В следующем уроке разберем .

И так, фильтр который вы сможете себе сделать на сайт очень универсальный!
Его можно будет применить к любому проекту и при этом сэкономив много времени

Для начала необходимо установить пакет pdoResources, который входит в состав пакета pdoTools. Вы можете установить или весь набор пакетов pdo (pdoTools) или только pdoResources отдельным пакетом для создания фильтра на MODx Revolution.

После установки пакетов, давайте подключим сниппет, который вы скачали с GitHub в ваш проект. Если вы разрабатываете каталог сейчас с нуля, то советую придерживаться использования определенных классов для Ajax фильтрации.

Однако если у вас уже готовый каталог, вы можете определить классы элементов Ajax фиьтра в JS файле (см. ниже).

Обратите внимание, что.ajax-item должен быть непосредственным потомком.ajax-container. Если вы используете сетку Bootstrap для разметки колонок, можете определить класс контейнера как «row ajax-container», а колонки айтема как «col-md-4 ajax-item».

Подключение JS скрипта Ajax фильтра

Подключим скрипт JS к проекту. Вы можете подключить его как отдельным файлом, так и непосредственно в файл кастомных скриптов проекта. Для работы скрипта требуется jQuery.

$(function() { //MODx pdoResources Ajax Filter //Filter Settings var fadeSpeed = 200, // Fade Animation Speed ajaxCountSelector = ".ajax-count", // CSS Selector of Items Counter ajaxContainerSelector = ".ajax-container", // CSS Selector of Ajax Container ajaxItemSelector = ".ajax-item", // CSS Selector of Ajax Item ajaxFormSelector = ".ajax-form", // CSS Selector of Ajax Filter Form ajaxFormButtonStart = ".ajax-start", // CSS Selector of Button Start Filtering ajaxFormButtonReset = ".ajax-reset", // CSS Selector of Button Reset Ajax Form sortDownText = "По убыванию", sortUpText = "По возрастанию"; function ajaxCount() { if($(".ajax-filter-count").length) { var count = $(".ajax-filter-count").data("count"); $(ajaxCountSelector).text(count); } else { $(ajaxCountSelector).text($(ajaxItemSelector).length); } }ajaxCount(); function ajaxMainFunction() { $.ajax({ data: $(ajaxFormSelector).serialize() }).done(function(response) { var $response = $(response); $(ajaxContainerSelector).fadeOut(fadeSpeed); setTimeout(function() { $(ajaxContainerSelector).html($response.find(ajaxContainerSelector).html()).fadeIn(fadeSpeed); ajaxCount(); }, fadeSpeed); }); } $(ajaxContainerSelector).on("click", ".ajax-more", function(e) { e.preventDefault(); var offset = $(ajaxItemSelector).length; $.ajax({ data: $(ajaxFormSelector).serialize()+"&offset="+offset }).done(function(response) { $(".ajax-more").remove(); var $response = $(response); $response.find(ajaxItemSelector).hide(); $(ajaxContainerSelector).append($response.find(ajaxContainerSelector).html()); $(ajaxItemSelector).fadeIn(); }); }) $(ajaxFormButtonStart).click(function(e) { e.preventDefault(); ajaxMainFunction(); }) $(ajaxFormButtonReset).click(function(e) { e.preventDefault(); $(ajaxFormSelector).trigger("reset"); $("input").val("pagetitle"); $("input").val("asc"); setTimeout(function() { $("").data("sort-dir", "asc").toggleClass("button-sort-asc").text(sortUpText); }, fadeSpeed); ajaxMainFunction(); ajaxCount(); }) $(""+ajaxFormSelector+" input").change(function() { ajaxMainFunction(); }) $("").data("sort-dir", "asc").click(function() { var ths = $(this); $("input").val($(this).data("sort-by")); $("input").val($(this).data("sort-dir")); setTimeout(function() { $("").not(this).toggleClass("button-sort-asc").text(sortUpText); ths.data("sort-dir") == "asc" ? ths.data("sort-dir", "desc").text(sortDownText) : ths.data("sort-dir", "asc").text(sortUpText); $(this).toggleClass("button-sort-asc"); }, fadeSpeed); ajaxMainFunction(); }); });

• Строки 5-13: определение переменных для CSS селекторов Ajax фильтра. Не меняем, если используем стандартные значения, как на рисунке выше;
• Строки 15-22: скрипт счетчика ресурсов в результатах фильтрации;
• Строки 24-35: основная функция Ajax фильтрации;
• Строки 37-49: обработчик события по клику на кнопку «Загрузить еще»;
• Строки 51-54: обработчик события по клику на кнопке «фильтровать». Данная кнопка может отсутствовать, так как фильтрация происходит автоматически.
• Автоматическая фильтрация может быть отключена путем удаления строк 68-70;
• Строки 56-66: обработчик события очистки формы и сброса фильтра. Строки 59-63 отвечают за сброс параметров сортировки;
• Строки 68-70: функция автоматической сортировки при изменении полей формы фильтра;
• Строки 72-82: универсальная функция сортировки по tv параметру.

Подключение PHP сниппета в MODx Revolution

Создайте новый сниппет в панели управления MODx catalogFilter и заполните его следующим содержимым:
=".$_GET["area_from"]; } if($_GET["area_to"]) { $filter = "area<=".$_GET["area_to"]; } //Checkbox Type if($_GET["garage"]) { $filter = "garage=1"; } //End Settings //Sort if($_GET["sortby"]) { $sortby = $_GET["sortby"]; } else { $sortby = "pagetitle"; } if($_GET["sortdir"]) { $sortdir = $_GET["sortdir"]; } else { $sortdir = "asc"; } //End Sort //Offset $offset = 0; if($_GET["offset"]){ $offset = $_GET["offset"]; } if($filter) { $where = $modx->toJSON(array($filter)); } else { $where = ""; } $params_count = array("parents" => $parents, "limit" => 0, "tpl" => "@INLINE ,", "select" => "id", "includeTVs" => $fields, "showHidden" => "1", "where" => $where); $count = $modx->runSnippet("pdoResources",$params_count); $count = count(explode(",",$count))-1; $modx->setPlaceholder("count",$count); $params = array("parents" => $parents, "limit" => $limit, "offset" => $offset, "tpl" => $tpl, "select" => "id,pagetitle,introtext,content", "includeTVs" => $fields, "showHidden" => "1", "sortby" => $sortby, "sortdir" => $sortdir, "where" => $where); $more = $count - $offset - $limit; $lim = $more > $limit ? $limit: $more; $button = ""; if($more > 0){ $button = ""; } return $modx->runSnippet("pdoResources",$params).$button;

Между комментариями //Filter Fields Settings и //End Settings находятся параметры, которые вам необходимо отредактировать под свой проект. Тут ни чего сложного, просто прописываете name полей input и проверяете их условием if. Для полей типа Radio, Select и Text используем пример из строк 5-8. Для определения промежуточного значения от и до можно воспользоваться примером из строк 11-16. Для чекбоксов подойдет пример из строк 19-21.

В строке 74 сниппета вы можете задать свои классы, но не удаляйте текущюю разметку, так как она учавствует в скриптах для подгрузки контента.

Пример возможных значений в панели управления MODx для радиокнопок: Первый==1||Второй==2||Третий==3

Пример вывода радиокнопок во фронтенд:

Здесь именование name=«floor» соответствует строкам 6-8 нашего сниппета catalogFilter. Аналогично реализована обработка других полей формы. Я думаю, это понятно и создание своих собственных полей не будет для вас проблемой.

Вывод сниппета осуществляется в шаблоне каталога следующим образом:

[[!catalogFilter? &tpl=`tplCatItem` &limit=`3` &parents=`5` &fields=`image,area,floor,garage,price` ]]

• tpl=`tplCatItem` - чанк айтема в списке каталога;
• limit=`3` - Сколько записей выводить и по сколько записей подгружать при клике на кнопке «Загрузить еще»;
• parents=`5` - указываем id роительского документа для каталога ресурсов;
• fields=`image,area,floor,garage,price` - перечисляем TV"s, которые необходимо показать в чанке tplCatItem и которые необходимо обрабатывать при фильтрации.

Пример чанка tplCatItem

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

В любом месте вашего HTML шаблона сделайте вывод кнопки и в data атрибуте укажите поле, по которому хотите фильтровать выдачу:

Сортировать по цене: По возрастанию

При клике тогглится класс button-sort-asc, который можете использовать для оформления кнопки при смене направления сортировки, добавления стрелочек и т. д. в атрибут data-sort-by можно писать любой TV, учавствующий в фильтрации. С сортировкой все.

Итак, мы рассмотрели создание несложного Ajax фильтра ресурсов в MODx с выводом результатов в сниппет pdoResources.

Фильтры в Revolution позволяют обрабатывать и изменять значения тегов внутри ваших шаблонов, чанков, сниппетов.

Фильтры ввода

В настоящее время фильтры ввода используются при подготовке к обработке фильтров вывода. Обычно они используются только внутри ядра MODX.

Фильтры вывода

В MODX Revolution фильтры вывода используются как один или нескольких модификаторов вывода, они схожи с PHx вызовами в MODx Evolution, но отличаются тем, что уже изначально встроены в ядро.

Синтаксис модификаторов:

[[+element:modifier=`value`]]

Фильтры могут применяться последовательно (пишутся слева направо):

[[+element:modifier=`value`:anothermodifier=`value2`:andanothermodifier:yetanother=`value3`]]

Также фильтры могут применяться для модификации вывода сниппетов . Фильтр нужно прописывать перед всеми параметрами (перед знаком вопроса):

Модификаторы вывода

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

Модификатор	Описание	Пример использования
if, input	if - задает дополнительное условие, input - добавляет в тег обрабатываемые данные	[[+num:is=`10`:and:if=`[[+num]]`:ne=`15`:then=`Да, равно 10 и не 15`]]
or, and	Объединение нескольких модификаторов связью ИЛИ, и связью И	[[+numProducts:is=`10`:or:is=`11`:then=`Здесь 10 или 11 товаров`:else=`Не уверен, сколько товаров`]]
isequalto, isequal, equalto, equals, is, eq	Сравнивает передаваемое значение с установленным. Если значения совпадают, выводится значение "then", если нет - "else"	[[+numProducts:isequalto=`10`:then=`Здесь 10 товаров`:else=`Не уверен, сколько товаров`]]
notequalto, notequals, isnt, isnot, neq, ne	Сравнивает передаваемое значение с установленным. Если значения НЕ совпадают, выводится значение "then", если нет - "else"	[[+numProducts:notequalto=`10`:then=`Не уверен, сколько товаров`:else=`Здесь 10 товаров`]]
greaterthanorequalto, equalorgreaterthen, ge, eg, isgte, gte	То же, только условие "Больше или равно"	[[+numProducts:gte=`10`:then=`Здесь 10 товаров или больше`:else=`Здесь меньше 10 товаров`]]
isgreaterthan, greaterthan, isgt, gt	То же, только условие "Строго больше"	[[+numProducts:gt=`10`:then=`Здесь больше 10 товаров`:else=`Здесь 10 товаров или меньше`]]
equaltoorlessthan, lessthanorequalto, el, le, islte, lte	То же, только условие "Меньше или равно"	[[+numProducts:lte=`10`:then=`Здесь 10 товаров или меньше`:else=`Здесь больше 10 товаров`]]
islowerthan, islessthan, lowerthan, lessthan, islt, lt	То же, только условие "Строго меньше"	[[+numProducts:lte=`10`:then=`Здесь меньше 10 товаров`:else=`Здесь 10 товаров или больше`]]
hide	Скрывает элемент, если условие выполняется	[[+numProducts:lt=`1`:hide]]
show	Отображает элемент, если условие выполняется	[[+numProducts:gt=`0`:show]]
then	Используется для составления условий	[[+numProducts:gt=`0`:then=`Товары в наличии!`]]
else	Используется для составления условий (совместно с "then")	[[+numProducts:gt=`0`:then=`Товары в наличии!`:else=`Простите, но все продано.`]]
memberof, ismember, mo	Проверяет, является ли пользователь членом указанной группы пользователей	[[+modx.user.id:memberof=`Administrator`]]

Модификаторы для работы со строками

Модификатор	Описание	Пример использования
cat	Добавляет значение после тега	[[+numProducts:cat=` товаров`]]
lcase, lowercase, strtolower	Переводит все буквы в нижний регистр	[[+title:lcase]]
ucase, uppercase, strtoupper	Переводит все буквы в верхний регистр	[[+longtitle:ucase]]
ucwords	Делает первую букву в словах заглавной	[[+title:ucwords]]
ucfirst	Делает первую букву в строке заглавной	[[+name:ucfirst]]
htmlent, htmlentities	Преобразует все символы в HTML-сущности	[[+email:htmlent]]
esc, escape	Безопасно экранирует символы, используя регулярные выражения и str_replace . Также экранирует символы [, ] и `	[[+email:escape]]
strip	Заменяет все переносы, табуляции и любое количество пробелов только одним пробелом	[[+textdocument:strip]]
stripString	Вырезает из строки указанную подстроку	[[+name:stripString=`Mr.`]]
replace	Производит замену подстрок	[[+pagetitle:replace=`Mr.==Mrs.`]]
striptags, stripTags, notags, strip_tags	Вырезает все теги (можно указать разрешенные теги).	[[+code:strip_tags=`
len, length, strlen	Выводит длину строки	[[+longstring:strlen]]
reverse, strrev	Переворачивает строку символ за символом	[[+mirrortext:reverse]]
wordwrap	Вставляет перенос строки после каждого n-ого символа (слова не разбиваются)	[[+bodytext:wordwrap=`80`]]
wordwrapcut	Вставляет перенос строки после каждого n-ого символа, даже если этот символ будет внутри слова	[[+bodytext:wordwrapcut=`80`]]
limit	Выводит определенное количество символов с начала строки (значение по умолчанию - 100)	[[+description:limit=`50`]]
ellipsis	Добавляет многоточие и обрезает строку, если она длиннее, чем определенное количество символов (значение по умолчанию - 100)	[[+description:ellipsis=`50`]]
tag	Экранирование. Отображает элемент так как он есть, без:tag. Для использования в документации	[[+showThis:tag]]
math	Возвращает результат продвинутых вычислений (нагружает на процессор. Не рекомендуется)
add, increment, incr	Прибавляет указанное число (значение по умолчанию +1)	[[+downloads:incr]], [[+blackjack:add=`21`]]
subtract, decrement, decr	Вычитает указанное число (значение по умолчанию -1)	[[+countdown:decr]], [[+moneys:subtract=`100`]]
multiply, mpy	Умножает на указанное число (значение по умолчанию *2)	[[+trifecta:mpy=`3`]]
divide, div	Делит на указанное число (значение по умолчанию /2)	[[+rating:div=`4`]]
modulus, mod	Возвращает деление числа по модулю (по-умолчанию: %2, возвращает 0 или 1))	[[+number:mod]]
ifempty, default, empty, isempty	Возвращает значение модификатора, если значение тега пусто	[[+name:default=`anonymous`]]
notempty, !empty, ifnotempty, isnotempty	Возвращает значение модификатора, если значение тега НЕ пусто	[[+name:notempty=`Привет, [[+name]]!`]]
nl2br	Заменяет символы новой строки (\n) на HTML-тег	[[+textfile:nl2br]]
date	Переводит таймстамп в текст, в соответствии с указанным форматом (Формат даты)	[[+birthyear:date=`%Y`]]
strtotime	Переводит дату в виде текста в UNIX таймстамп	[[+thetime:strtotime]]
fuzzydate	Возвращает дату в формате "вчера, сегодня, …". Принимает значение даты.	[[+createdon:fuzzydate]]
ago	Возвращает число секунд, минут, недель или месяцев, прошедших с даты, указанной в теге.	[[+createdon:ago]]
md5	Создает MD5-хеш значения	[[+password:md5]]
cdata	Оборачивает вывод тегами CDATA	[[+content:cdata]]
userinfo	Возвращает запрашиваемое значение из профиля пользователя. Необходимо указывать ID пользователя	[[+modx.user.id:userinfo=`username`]]
isloggedin	Возвращает true, если пользователь аутентифицирован в текущем контексте	[[+modx.user.id:isloggedin]]
isnotloggedin	Возвращает true, если пользователь НЕаутентифицирован в текущем контексте	[[+modx.user.id:isnotloggedin]]
urlencode	Конвертирует значение в URL	[[+mystring:urlencode]]
urldecode	Конвертирует значение из URL	[[+myparam:urldecode]]

Использование модификаторов вывода совместно с параметрами

Если у тега есть параметры, то их необходимо прописывать сразу после модификатора:

Создание пользовательского модификатора

Любой сниппет может использоваться и как модификатор вывода. Для его использования просто укажите имя сниппета вместо модификатора. К примеру, создадим сниппет makeExciting, добавляющий к выводу определенное количество восклицательных знаков:

[[*pagetitle:makeExciting=`4`]]

Такой вызов тега передаст в сниппет makeExciting следующие параметры для обработки:

Модификатор UserInfo

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

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

Значение	Модификатор
Внутренний ключ пользователя	[[!+modx.user.id:userinfo=`internalKey`]]
Логин	[[!+modx.user.id:userinfo=`username`]]
Полное имя	[[!+modx.user.id:userinfo=`fullname`]]
Роль	[[!+modx.user.id:userinfo=`role`]]
E-mail	[[!+modx.user.id:userinfo=`email`]]
Телефон	[[!+modx.user.id:userinfo=`phone`]]
Мобильный телефон	[[!+modx.user.id:userinfo=`mobilephone`]]
Факс	[[!+modx.user.id:userinfo=`fax`]]
Дата рождения	[[!+modx.user.id:userinfo=`dob`:date=`%Y-%m-%d`]]
Пол	[[!+modx.user.id:userinfo=`gender`]]
Страна	[[+modx.user.id:userinfo=`country`]]
Область	[[+modx.user.id:userinfo=`state`]]
Почтовый индекс	[[+modx.user.id:userinfo=`zip`]]
Фото	[[+modx.user.id:userinfo=`photo`]]

Всем доброго здравия. В этой статье я расскажу как сделать фильтр документов по tv-параметрам на сайте под управлением Modx Revolution. Мы будем использовать сниппет tagManager2 от Аndchir . Этот сниппет умеет работать сразу с несколькими tv, а также с числовыми данными (в виде цены) и множественным списком. Каждый этот пример мы разберем далее.

1. Для начала нужно установить tagManager2

Для этого идем в Приложения/Установщик/

жмем кнопку «Загрузить дополнение» и в строке поиска вбиваем tagManager2

Также еще нужно установить сниппет getPage и getProducts . Таким образом раздел «Управление пакетами» должен выглядеть так (сниппет translit, кстати, отвечает за транслитерацию псевдонимов на латиницу)

Загружаем, устанавливаем пакеты и идем в «Настройки системы»

2. Настраиваем сниппет tagManager2

В Системных настройках выбираем раздел tag_manager2

Мы увидим параметры настройки фильтра

Там все достаточно просто и понятно, но все же:

• В «ID ресурса каталога верхнего уровня» указываете id шаблона каталога или категории, где будут фильтроваться товары или страницы
• В «Дополнительный разделитель множественного списка» ставим знак #. Ниже вы узнаете зачем он нужен
• В «Имена TV или полей с множественным списком» прописываем tv с множественным списком. Как их создать я покажу ниже
• «Имена TV или полей с числовыми значениями» - здесь нужно указать tv-параметры, в которых будут цифры. Обычно это параметр цены. Данный фильтр будет выведен в виде ползунка «от и до»
• В «ID шаблонов товаров» прописываем id страниц, которые нужно фильтровать и к которым прикреплены tv-параметры, указанные выше
• В «Имя набора параметров, используемого для фильтрации» прописываем catalog_filters. Данный шаблон мы будем использовать в шаблонах параметров getPage и getProducts
• Прописать в «Сниппет связанный с набором параметров» название сниппета, который будет осуществлять вывод и пагинацию страниц или товаров. Обычно это getPage .

3. Создаем набор параметров catalog_filters в getPage

Идем в сниппет getPage

Переходим во вкладку «Параметры» и нажимаем на кнопку «Добавить набор параметров» . Можно конечно и отредактировать существующий, но тогда есть шанс затирания параметров, которые мы сейчас создадим при обновлении getPage. Если не собираетесь обновлять можете просто редактировать.

Редактируем существующие параметры и присваиваем значения:

Создаем новые параметры и присваиваем значения

Отредактированные параметры будут отображаться зеленым цветом, созданные - фиолетовым

4. Создаем или редактируем tv параметры для фильтра

Я создал для примера 3 tv-параметра

Особое внимание хочу привлечь к тому, что нужно указывать Имя (Заголовок) tv-параметра, а иначе он может просто не отображаться в модуле управления фильтрами

​5.Создаем чанк filtr_tpl

Этот чанк отвечает за вывод каждого отдельно результата в getProducts

6. Создаем структуру в дереве документов

У меня она выглядит так:

Главная страница у нас с ID 1, а у товаров id шаблона 1 (это у нас стоит в настройках tag_manager2, если у Вас другие значения, не забудьте поменять в настройках)

7. Редактируем filters.js

Идем по адресу /assets/components/tag_manager2/js/web/filters.js и вместо

Multitags: ["tags"],//Имена доп. полей с множественными значениями

вставляем код с нашими подставленными значениями

Multitags: ["filtr1", "filtr2"],//Имена доп. полей с множественными значениями

Здесь все предельно просто и понятно. Мы вставили свои tv-поля с множественными значениями. А вообще это конфиг всех настроек (но лучше без разрешения больших дяденек их не трогать, я имею ввиду советов создателей модуля)

8. Выводим фильтр и результаты фильтрации

Сам фильтр

[]

Вывод результатов с пагинацией

[[!+page.nav]]

Сортировка результатов

9. Активируем фильтр

Теперь нужно лишь активировать наш фильтр. Для этого идем в Приложения/Управление фильтрами .

Здесь нужно поставить галочки возле каждого фильтра и нажать кнопку «Сохранить» .

Если вы все сделали правильно, то фильтр должен заработать. На этом все. Если появились вопросы - задавайте в комментариях, постараюсь ответить. А вообще вот документация по tagManager2 . Успехов в разработке. В "Демо" один из моих сайтов, на котором реализован фильтр с помощью tagManager2

Да, ещё один способ реализации Ajax-фильтра на сайте =)

Начнём с простого вывода на странице обычного списка ресурсов. Обязательно добейтесь, чтобы нормально работала AJAX-пагинация, потому что своих механизмов работы с AJAX мы писать не будем, а будем использовать методы AJAX, которые есть в pdoPage.

Для фильтров я буду использовать такую вёрстку. Но вёрстка тут особой роли не играет - главное указать правильные классы в JS-коде.

Вес

Высота

Тип

Быстрые Медленные

Цена

до 20 000 руб. 20 000-50 000 руб. 50 000-100 000 руб. от 100 000 руб.

JS-код обработки фильтров выглядит как-то так:

$(document).on("change keyup", "#filters input", function(){ // Проверяем, что pdoPage подключён if (typeof(pdoPage) == "undefined") return; // Собираем значения всех фильтров в единый массив var fields = {}; $.each($("#filters").serializeArray(), function(){ // Если параметр не является массивом (чекбоксом), то все просто if (this.name.indexOf("") <= 0) { fields = this.value; } else { // Для чекбоксов посложнее var name = this.name.replace("",""); if (typeof(fields) == "undefined") { fields = ; } fields.push(this.value); } }); // И отправляем этот массив на сервер. $.post(document.location.href, { action: "filter", fields: fields, // Параметр hash - обязательный (он содержит настройки pdoPage) hash: pdoPage.configs.page.hash }, function(data) { // Просим pdoPage загрузить новый список ресурсов var tmp = document.location.href.split("?"); pdoPage.keys.page = 0; pdoPage.loadPage(tmp, pdoPage.configs.page); }); });
Уже сейчас при изменении значения фильтров список ресурсов будет обновляться. Теперь осталось «объяснить», как обрабатывать фильтры. Для этого создаём плагин на событие OnHandleRequest :

context->key == "mgr" || empty($_SERVER["HTTP_X_REQUESTED_WITH"]) || $_SERVER["HTTP_X_REQUESTED_WITH"] != "XMLHttpRequest") return; switch ($_POST["action"]) { case "filter": $output = array("success" => false, "message" => ""); // Проверяем, что hash получен и параметры pdoPage существуют if (isset($_POST["hash"]) && !empty($_POST["hash"]) && isset($_SESSION["pdoPage"][$_POST["hash"]]) && !empty($_SESSION["pdoPage"][$_POST["hash"]])) { $hash = (string) $_POST["hash"]; // Указываем только ТВ, доступные для фильтрации $tvs = array("height","weight","speed_type"); // Наполняем условие выборки $where = array(); foreach ($tvs as $tv) { switch ($tv) { case "price": // Пример обработки чекбоксов if (isset($_POST["fields"]["price"]) && !empty($_POST["fields"]["price"])) { $where_price = ; foreach ($_POST["fields"]["price"] as $range) { $value = explode("-", $range); if (count($value) != 2) { continue; } $min = (int) $value; $max = (int) $value; $where_range = "CAST(`TVprice`.`value` AS DECIMAL(13,3)) >= " . $min; if ($max) { $where_range .= " AND CAST(`TVprice`.`value` AS DECIMAL(13,3)) <= " . $max; } $where_price = "(" . $where_range . ")"; } $where = "(" . implode(" OR ", $where_price) . ")"; } break; default: if (isset($_POST["fields"][$tv]) && $_POST["fields"][$tv] !== "") { $where[$tv] = $_POST["fields"][$tv]; } break; } } // Добавляем это условие в параметры pdoPage "на лету" $_SESSION["pdoPage"][$hash]["where"] = $where; $output["message"] = $where; $output["success"] = true; } else { $output["message"] = "Error"; } echo $modx->toJSON($output); die(); break; default: break; }
Теперь наши фильтры работают. Единственное - pdoPage «не знает», что показывать, когда ни один результат не найден. Чтобы такой случай учесть, создадим файл pdopage.custom.js и укажем его в параметре frontend_js :

{"!pdoPage" | snippet: [ "ajaxMode" => "default", "frontend_js" => "/assets/components/pdotools/js/pdopage.custom.js", "parents" => 0, "limit" => 3, // ... }
В стандартном коде мы добавим только условие else на случай, если ответ от сервера будет пустым:

// ... pdoPage.loadPage = function (href, config, mode) { // ... $.post(config["connectorUrl"], params, function (response) { if (response && response["total"]) { // ... } else { // Добавляем условие else wrapper.find(rows).html("Ничего не найдено"); wrapper.find(pagination).html(""); wrapper.removeClass("loading"); wrapper.css({opacity: 1}); if (config["mode"] == "default") { $("html, body").animate({scrollTop: wrapper.position().top - 50 || 0}, 0); } } }, "json"); }; // ...
На этом простой AJAX-фильтр готов.