Фильтры, они же модификаторы, в CMF MODx Revolution. Условные модификаторы для шаблонов в MODX Фильтры модификаторы

В 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().

Параметры

Операторы:

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

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

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

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

В Revolution фильтры вывода ведут себя так же, как и PHx в Evolution, только фильтры теперь встроены прямо в движок MODX. Синтаксис выглядит так:

[]

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

[]

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

[]

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

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

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

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

Модификаторы для работы с пользователями нужно вызывать некэшированными, чтобы каждый юзер видел актуальные данные.

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

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

[[!getResources:default=`К сожалению, ничего не найдено`? &tplFirst=`blogTpl` &parents=`2,3,4,8` &tvFilters=`blog_tags==%[[!tag:htmlent]]%` &includeTVs=`1` ]]

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

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

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

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

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

В этой статье Я бы хотел рассказать Вам о фильтрах (модификаторах) в MODx .

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

В этой статье Я буду говорить про MODx Revolution . Возможность применять фильтры существует благодаря сниппету PHx, который по умолчанию уже встроен в ядро MODx Revolution, в ядре же Evolution PHx отсутствует, поэтому на Evo его необходимо устанавливать отдельно.

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

Синтаксис фильтров выглядит следующим образом:

Очень удобно то, что их можно выстраивать в цепочки:

При этом, передавать параметры в сниппеты также возможно. Главное, чтобы фильтр прописывался между названием сниппета и вопросительным знаком:

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

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

Строковые модификаторы

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

Сниппеты могут использоваться в качестве модификаторов. Для этого просто вместо название фильтра следует вписать имя сниппета. Например, у нас есть сниппет с названием "makeDownloadLink"

[[+file:makeDownloadLink=`notitle`]]

Этот вызов передаст в сниппет следующие параметры:

Результатом будет являться то, что будет возвращать сниппет .

Примеры использования

Здесь приведен пример, когда фильтры вызываются друг за другом. Данный пример форматирует дату из строки в другой формат:

[[+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`]]

Почтовый индекс: [[+modx.user.id:userinfo=`zip`]]

Аватарка: [[+modx.user.id:userinfo=`photo`]]

Приветствую, друзья! Сегодня мы научимся создавать фильтр ресурсов в 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 .