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

Для начала необходимо установить пакет 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

Между комментариями //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 и которые необходимо обрабатывать при фильтрации.

[[+pagetitle]]

[[+tv.area:isnot=``:then=` `]]

Этаж	[[+tv.floor]]
Площадь	[[+tv.area]] кв.м.
Гараж	[[+tv.garage:is=`1`:then=`Есть`:else=`Нет`]]
Цена:	[[+tv.price]]

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

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

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

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

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

Всем доброго здравия. В этой статье я расскажу как сделать фильтр документов по 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

В MODx существуют встроенный синтаксис для использования конструкций if else.

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

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

Условные модификаторы вывода

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

Также для того что бы иметь возможность пользоваться вложеными конструкциями можно воспользоваться дополнительным пакетом, который имеет короткое и емкое название If. Загрузить его можно зайдя в Система-> Управление пакетами.

Так будет выглядить код условия:

[ [!If? &subject=`[ [+total]]` &operator=`GT` &operand=`3` &then=`You have more than 3 items!`]]

Параметры пакета if:

subject - Параметр, по которому выполняются условия.

operator - Оператор сравнения с subject

operand - Используеться по необходимости и являет собой значение subject (предмета сравнения) с использованием operator (оператора сравнения).

then - Код, который выводиться в том случае если условие принимает значение true

else - Код, который выводиться в том случае если условие принимает значение false

debug - Если значение true, отобразит все переданные параметры

die - Если отладка (debag) прошла успешно и соответствует значению true, то после вывода параметров применить функцию die().

Параметры

Операторы:

Приветствую, друзья! Сегодня мы научимся создавать фильтр ресурсов в MODx Revolution с возможностью сортировки по любому TV полю и подгрузкой результатов по клику "Загрузить еще". Для вывода результатов будем использовать сниппет pdoResources.

Класснуть

Запинить

Скачать все сниппеты и необходимые файлы урока.

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

После установки пакетов, давайте подключим сниппет, который вы скачали в ваш проект. Если вы разрабатываете каталог сейчас с нуля, то советую придерживаться использования определенных классов для 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 параметру.

Я постарался сделать данный скрипт максимально универсальным, поэтому если вы используете стандартные селекторы элементов Ajax фильтра, то редактировать ни чего не нужно.

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

Создайте новый сниппет в панели управления MODx catalogFilter и заполните его следующим содержимым:

Между комментариями //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

[[+pagetitle]]

[[+tv.area:isnot=``:then=` `]]

Этаж	[[+tv.floor]]
Площадь	[[+tv.area]] кв.м.
Гараж	[[+tv.garage:is=`1`:then=`Есть`:else=`Нет`]]
Цена:	[[+tv.price]]

Комплексный пример вывода во фронтенд можете посмотреть в репозитории проекта на гитхабе в файле demo.html .

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 .

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

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

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

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

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

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

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

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

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

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