Сегодня полезная статья про фильтры 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.

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

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

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

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

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

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

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

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

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

Модификатор	Описание	Пример
or	Может использоваться со строковыми модификаторами для организации отношения логического "И"
and	Может использоваться со строковыми модификаторами для организации отношения логического "ИЛИ"
isequalto, isequal, equalto, equals, is, eq	Сравнивает вывод с заданным значением и в случае совпадения продолжает парсинг тэга. Используется совместно с "then" и "else"	[[+numbooks:isequalto=`5`:then=`There are 5 books!`:else=`Not sure how many books`]]
notequalto, notequals, isnt, isnot, neq, ne	Сравнивает вывод с заданным значением и в случае не совпадения продолжает парсинг тэга. Используется совместно с "then" и "else"	[[+numbooks:notequalto=`5`:then=`Not sure how many books`:else=`There are 5 books!`]]
greaterthanorequalto, equalorgreaterthen, ge, eg, isgte, gte	Сравнивает вывод с заданным значением и в случае если вывод больше либо равен переданному значению продолжает парсинг тэга. Используется совместно с "then" и "else"	[[+numbooks:gte=`5`:then=`There are 5 books or more than 5 books`:else=`There are less than 5 books`]]
isgreaterthan, greaterthan, isgt, gt	Сравнивает вывод с заданным значением. Если вывод больше -продолжает парсинг. Используется с "then" и "else"	[[+numbooks:gt=`5`:then=`There are more than 5 books`:else=`There are less than 5 books`]]
equaltoorlessthan, lessthanorequalto, el, le, islte, lte	Сравнивает вывод с заданным значением и в случае если вывод меньше либо равен переданному значению продолжает парсинг тэга. Используется совместно с "then" и "else"	[[+numbooks:lte=`5`:then=`There are 5 or less than 5 books`:else=`There are more than 5 books`]]
islowerthan, islessthan, lowerthan, lessthan, islt, lt	Сравнивает вывод с заданным значением. Если вывод меньше -продолжает парсинг. Используется с "then" и "else"	[[+numbooks:lte=`5`:then=`Менее 5 книг`:else=`Более 5 книг`]]
hide	Проверяет предшествующие условия. Если они были истинными - скрывает элемент.	[[+numbooks:lt=`1`:hide]]
show	Проверяет предшествующие условия. Если они были истинными - отображает элемент.	[[+numbooks:gt=`0`:show]]
then	Используется как следствие какого-либо условия	[[+numbooks:gt=`0`:then=`Now available!`]]
else	Используется как следствие какого-либо условия. Применяется совместно с "then"	[[+numbooks:gt=`0`:then=`Now available!`:else=`Sorry, currently sold out.`]]
memberof, ismember, mo	Возвращает результат проверки на принадлежность пользователя заданной группе.	[[+modx.user.id:memberof=`Administrator`]]

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

Модификатор	Описание	Пример
cat	Добавляет к выводу указанную строку, если вывод не пустой.	[[+numbooks:cat=` books`]]
lcase, lowercase, strtolower	Переводит все символы строки в нижний регистр. Идентично функции PHP strtolower	[[+title:lcase]]
ucase, uppercase, strtoupper	Переводит все символы строки в верхний регистр. Идентично функции PHP strtoupper	[[+headline:ucase]]
ucwords	Переводит первые буквы всех слов в строке в верхний регистр. Идентично функции PHP ucwords	[[+title:ucwords]]
ucfirst	Переводит первую букву строки в верхний регистр. Идентично функции PHP ucfirst	[[+name:ucfirst]]
htmlent, htmlentities	Идентично функции PHP htmlentities . Использует текущее значение системного параметра "modx_charset" с флагом ENT_QUOTES	[[+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	Удаляет все PHP и HTML тэги за исключением указанного. Идентично функции PHP strip_tags	[[+code:strip_tags=` `]]
len,length, strlen	Выводит длину строки. Идентично функции PHP strlen	[[+longstring:strlen]]
reverse, strrev	Идентично функции PHP strrev	[[+mirrortext:reverse]]
wordwrap	Идентично функции PHP wordwrap . Принимает оптимальное значение для установки позиции переноса слов.	[[+bodytext:wordwrap=`80`]]
wordwrapcut	Идентично функции PHP wordwrap с разрывом слов. Принимает оптимальное значение для установки позиции переноса слов.	[[+bodytext:wordwrapcut=`80`]]
limit	Ограничивает (обрезает) длину строки в заданное количество символов. По умолчанию ограничение длины составляет 100 символов.	[[+description:limit=`50`]]
ellipsis	Обрезает строку до заданного количества символов и добавялет многоточие. По умолчанию ограничение составляет 100 символов.	[[+description:ellipsis=`50`]]
tag	Отображает вызываемый элемент без:tag. Полезно для документации, например, как у меня =)	[[+showThis]]
math	Возвращает результат вычислений (не рекомендуется т.к. создает нагрузку на процессор)
add,increment,incr	Возвращает значение наращенное на заданную величину (по умолчанию на единицу)	[[+downloads:incr]] [[+blackjack:add=`21`]]
subtract,decrement,decr	Декрементирует из значения заданную величину (по умолчанию: -1)	[[+countdown:decr]] [[+moneys:subtract=`100`]]
multiply,mpy	Возвращает результат умножения на число (по умолчанию: *2)	[[+trifecta:mpy=`3`]]
divide,div	Возвращает результат деления на число (умолчание: /2) Не допускается 0.	[[+rating:div=`4`]]
modulus,mod	Возвращает остаток от деления (Умолчание: %2, возвращает 0 или 1)	[[+number:mod]]
ifempty,default,empty, isempty	Возвращает заданную строку, если вывод пустой.	[[+name:default=`anonymous`]]
notempty, !empty, ifnotempty, isnotempty	Возвращает заданную строку, если вывод не пустой.	[[+name:notempty=`Hello [[+name]]!`]]
nl2br	Идентично функции PHP nl2br . Все переносы строк заменяет на	[[+textfile:nl2br]]
date	Идентично функции PHP strftime . Формат передается в качестве значения. См. Date Formats .	[[+birthyear:date=`%Y`]]
strtotime	Идентично функции PHP strtotime . Применимо только к датам. См Date Formats .	[[+thetime:strtotime]]
fuzzydate	Возвращает дату в формате "сегодня в 13:40", "вчера в 18:40".	[[+publishedon:fuzzydate]]
ago	Возвращает количество секунд, минут, часов, недель и т.д от даты до текущего момента. Применимо только к датам	[[+createdon:ago]]
md5	Идентично функции PHP md5 .	[[+password:md5]]
cdata	Заключает строку в тэги CDATA.	[[+content:cdata]]
userinfo	Возвращает запрашиваемы пользовательские данные. Применимо к ID пользователя в MODx. В модификатор передается поле, которое необходимо возвратить.	[[+modx.user.id:userinfo=`username`]]
isloggedin	Возвращает "true" если пользователь авторизован в данном контексте.	[[+modx.user.id:isloggedin]]
isnotloggedin	Возвращает "true" если пользователь авторизован в данном контексте	[[+modx.user.id:isnotloggedin]]
urlencode	Идентично функции PHP urlencode	[[+mystring:urlencode]]
urldecode	Идентично функции PHP urldecode	[[+myparam:urldecode]]

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

Сниппеты могут использоваться в качестве модификаторов. Для этого просто вместо название фильтра следует вписать имя сниппета. Например, у нас есть сниппет с названием "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`]]

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

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

[ ]

Они также могут быть соединены (выполняется слева направо):

[ ]

Вы также можете использовать их, чтобы изменить выход сниппета; внимание, модификатор идет после имени сниппета и перед вопросительным знаком, например,

[ ]

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

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

Модификатор	Описание	Пример
if, input
	Логическое ИЛИ	[ [+numbooks:is=`5`:or:is=`6`:then=`There are 5 or 6 books!`:else=`Not sure how many books`] ]
	Логическое И
isequalto, isequal, equalto, equals, is, eq		[ [+numbooks:isequalto=`5`:then=`There are 5 books!`:else=`Not sure how many books`] ]
notequalto, notequals, isnt, isnot, neq, ne		[ [+numbooks:notequalto=`5`:then=`Not sure how many books`:else=`There are 5 books!`] ]
greaterthanorequalto, equalorgreaterthen, ge, eg, isgte, gte	Больше или равно	[ [+numbooks:gte=`5`:then=`There are 5 books or more than 5 books`:else=`There are less than 5 books`] ]
isgreaterthan, greaterthan, isgt, gt		[ [+numbooks:gt=`5`:then=`There are more than 5 books`:else=`There are less than 5 books`] ]
equaltoorlessthan, lessthanorequalto, el, le, islte, lte	Меньше или равно	[ [+numbooks:lte=`5`:then=`There are 5 or less than 5 books`:else=`There are more than 5 books`] ]
islowerthan, islessthan, lowerthan, lessthan, islt, lt		[ [+numbooks:lt=`5`:then=`There are less than 5 books`:else=`There are more than 5 books`] ]
		[ [+numbooks:lt=`1`:hide] ]
		[ [+numbooks:gt=`0`:show] ]
		[ [+numbooks:gt=`0`:then=`Now available!`] ]
		[ [+numbooks:gt=`0`:then=`Now available!`:else=`Sorry, currently sold out.`] ]
memberof, ismember, mo		[ [+modx.user.id:memberof=`Administrator`] ]

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

Модификатор	Описание	Пример
	Если не пусто	[ [+numbooks:cat=` books`] ]
lcase, lowercase, strtolower	Транформация в малые буквы	[ [+title:lcase] ]
ucase, uppercase, strtoupper	Трансформация в большие буквы	[ [+headline:ucase] ]
	Первая буква слова заглавная	[ [+title:ucwords] ]
	Первая буква заглавная	[ [+name:ucfirst] ]
htmlent, htmlentities	Замена тегов HTML	[ [+email:htmlent] ]
esc,escape	Безопасно убирает символы	[ [+email:escape] ]
	Замена перевода каретки, табуляции и множества пробелов на один пробел	[ [+textdocument:strip] ]
stripString	Удаляет значение из строки	[ [+name:stripString=`Mr.`] ]
	Замена значения	[ [+pagetitle:replace=`Mr.==Mrs.`] ]
striptags, stripTags,notags,strip_tags	Убирает HTML теги	[ [+code:strip_tags=`
len,length, strlen	Длина строки	[ [+longstring:strlen] ]
reverse, strrev	Реверс строки	[ [+mirrortext:reverse] ]
wordwrap	Новая строка после указанного количества символов	[ [+bodytext:wordwrap=`80`] ]
wordwrapcut	Вставляет символ новой строки после определенного количества символов.	[ [+bodytext:wordwrapcut=`80`] ]
	Выводимое кол-во символов	[ [+description:limit=`50`] ]
ellipsis	Обрезание строки после указанного кол-ва символов	[ [+description:ellipsis=`50`] ]
	Отображает сырой элемент без: тега. Полезно для документации.	[ [+showThis:tag] ]

Если значение может изменяться динамически, то его следует сделать некэшированным. Например:

[ [+placeholder:default=`A default value!`] ]

Это означает, что значение может иногда быть пустым, а иногда нет. Зачем его хранить в кэше? Это может исключить то, что значение может появиться.

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

[ [!getResources:default=`Sorry - nothing matched your search.`? &tplFirst=`blogTpl` &parents=`2,3,4,8` &tvFilters=`blog_tags==%%` &includeTVs=`1`] ]

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

=".$_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

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

Ajax сортировка по TV

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

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

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

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

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