В статье пойдет речь о том, как на сайте организовать перелинковку с помощью меток (тегов) к статьям. Особенность описанного способа в том, что страница тега полностью может быть настроена под SEO, можно указать title, h1, описание, поэтому страницы тегов можно использовать как категории материалов.
Задачи, которые будут решены:
- реализована возможность для каждой статьи указать несколько тематических тегов;
- для каждого тега создана уникальная страница с настраиваемым title, h1, другими мета теги и автоматически генерируемым списком статей с этим тегом.
Пошаговая инструкция тегированию сайта на MODx:
-
Создайте новый шаблон для вывода списка статей по тегу, назовите его Теги. Статьи по определенному тегу будут выводиться сниппетом pdoPage компонента pdoTools, этот сниппет позволит разбить вывод статей на несколько страниц:
[[!pdoPage? parents=`0` tpl=`tpl.myTickets.list.row` tvFilters=`tags==[[*id]]||%^^tags==%||[[*id]]^^tags==%||[[*id]]||%^^tags==[[*id]]` ]] [[!+page.nav]]
- element — сниппет который выполняет непосредственно выборку данных из БД;
- parents — cписок родителей, через запятую, для поиска результатов, 0 – не ограничивать;
- includeTVs — какие TV нужно выводить, можно перечислить несколько через запятую;
- tpl — шаблон вывода результатов;
- tvFiltersOrDelimiter — разделитель для условий OR в параметре tvFilters, стандартный || не подходит так как будет использоваться в значениях TV;
- tvFilters — правило для выбора статей, в строке описаны все возможные варианты вхождения ID статьи в значение TV;
Приведенные выше пример кода предусматривают использование компонента для размещения статей на сайте. Если Вы не используете его, то установите отдельно компонент и исправьте значение параметра на компонент, который используете для вывода списка статей.
3 урок Корпоративный сайт на MODX Revolution. Вывод изображений слайдера через TV поля, ТВ на MODX
- назовите его «Теги»,
- включите галочку «Не показывать в меню»,
- в качестве шаблона ресурса укажите ранее созданный шаблон «Теги».
Его дочерние ресурсы будут тегами для статей.
- назовите его «tags»,
- на вкладке «Доступно для шаблонов» выберите шаблон Теги,
- на вкладке «Параметры ввода» укажите следующие параметры: Тип ввода:
список (множественный выбор)
Возможные значения:
В качестве входящих данных скрипт получает строку с перечисленными через запятую ID тегов, выбирает данные ресурсов (тегов) по этим ID и формирует ссылки на страницы тегов. Тест ссылки берется из параметра «Пункт меню» (menutitle), если оно не заполнено, то из заголовка.
[[Tags? tagsPage=`6`]]
Параметр tagsPage передает в сниппет номер ресурса Теги созданного в пункте 2.
Страница тега является обычным ресурсом и поэтому вы можете настраивать её как угодно, менять заголовок, добавить параметры keywords, description и т.п. На данном сайте используется именно такой способ тегирования статей.
ModX Revo — Урок №3.1 Шаблоны. Вывод ресурсов и создание TV поля
Источник: myitstuff.ru
Ajax фильтр на MODx Revolution
Приветствую, друзья! Сегодня мы научимся создавать фильтр ресурсов в 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()+’).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[name=sortby]’).val(‘pagetitle’); $(‘input[name=sortdir]’).val(‘asc’); setTimeout(function() < $(‘[data-sort-by]’).data(‘sort-dir’, ‘asc’).toggleClass(‘button-sort-asc’).text(sortUpText); >, fadeSpeed); ajaxMainFunction(); ajaxCount(); >) $(»+ajaxFormSelector+’ input’).change(function() < ajaxMainFunction(); >) $(‘[data-sort-by]’).data(‘sort-dir’, ‘asc’).click(function() < var ths = $(this); $(‘input[name=sortby]’).val($(this).data(‘sort-by’)); $(‘input[name=sortdir]’).val($(this).data(‘sort-dir’)); setTimeout(function() < $(‘[data-sort-by]’).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? limit=`3` 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.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.
Премиум уроки от WebDesign Master
Создание сайта от А до Я. Комплексный курс
Создание современного интернет-магазина от А до Я
Я — фрилансер! Базовый курс для начинающих
Другие уроки по теме «CMS»
- Посадка типовой секции Landing Page на MODx с использованием MIGX (добавляемые поля)
- Настройка прав доступа для контент-менеджера в MODX Revolution
- MODX Revolution — Базовый урок
- Как создать шаблон для WordPress. Грамотная посадка верстки на WordPress (Right Way)
- Быстрое создание красивых сайтов на WordPress. Layers Style Kit на реальном примере
Источник: webdesign-master.ru
Документация по шаблонизатору Fenom
Fenom — это легковесный, быстрый и гибкий шаблонизатор, который становится доступен в modx после установки дополнения pdoTools . Использование данного шаблонизатора не только ускоряет время выполнения запросов, но и еще решает массу повседневных задач, такие как вывод get параметра через fenom в modx, использование условия вывода, циклы и многое другое.
Другие параметры
| placeholders> | массив с системными плейсхолдерами |
| config> | массив с системными настройками |
| context> | массив (не объект!) с текущим контекстом |
| user> | массив (не объект!) с текущим пользователем |
| resource> | массив (не объект!) с текущим ресурсом |
| lexicon> | служба загрузки лексиконов |
| lexicon()> | функция для вывода строки из лексикона |
| runSnippet()> | запуск сниппета |
| runProcessor()> | запуск процессора |
| getChunk()> | вывод чанка |
| runSnippet(‘!pdoResources’)> | не кэшируемый |
| GET | |
| POST | |
| текущий год | |
| Ссылка на документ |
Модификаторы MODX FENOM
| текущий год | |
| Ссылка на ресурс |
Подключение наборов параметров
Подключение шаблона
| подключение шаблона | |
| подключение чанка | |
| подключение чанка | |
| контект | расcтановка блоков |
| наследование шаблона |
Синтаксис
Синтаксис используемый в Fenom похож на Smarty , но обладает рядом улучшений. Все теги шаблонизатора заключаются в фигурные скобки: < — открытие тега и >— закрытие тега.
Зачастую, во время первого использования феном на рабочем сайте возникает такая ошибка, как выводится не результат запроса на fenom, а текст кода, это в большинстве случаев связано с тем что в коде javascript также присутствуют фигурные скобки, для решения данной проблемы достаточно обернуть все скрипты между тегами ваши скрипты .
Системные переменные
Безымянная системная переменная начинается с $. и предоставляет доступ к глобальным системным переменным и системной информации:
- $.env — массив $_ENV.
- $.get — массив $_GET.
- $.post — массив $_POST.
- $.files — массив $_FILES.
- $.cookie — массив $_COOKIE.
- $.server — массив $_SERVER.
- $.session — массив $_SESSION.
- $.globals — массив $GLOBALS.
- $.request — массив $_REQUEST.
- $.tpl.name возвращает текущее название шаблона.
- $.tpl.basename возвращает текущее название шаблона без схемы.
- $.tpl.scm возвращает схему шаблона.
- $.tpl.options возвращает параметры шаблона в виде целого числа.
- $.tpl.depends возвращает массив шаблонов, на которые ссылается текущий шаблон.
- $.tpl.time возвращает штамп времени, когда шаблон последний раз менялся
- $.version возвращает версию Fenom.
- $.const обращение к PHP константе: $.const.PHP_EOL обращение к константе PHP_EOL. Поддерживается пространство имен которое разделяется через точку: $.const.Storage.FS::DIR_SEPARATOR обращение к PHP константе StorageFS::DIR_SEPARATOR если такой константы нет будет взята константа StorageFSDIR_SEPARATOR .
- $.call обращение к статическомому методу. $.call.Storage.FS::put($filename, $data) обращение к методу StorageFS::put($filename, $data) . Настройка disable_call отключает возможность обращения к $.call. Так же можно ограничить и указать список доступных к вызову классов и функций.
- $.block проверка на существование блоков которые были определены до момента обращения к акцессору. Например, .
Так же вы можете добавить свои или удалить существующие системные переменные и функции
Операции
Как и любой другой язык программирования/шаблонизации, Fenom поддерживает множество различных операторов:
- Арифметические операторы — +, -, *, /, %
- Логические операторы — ||, , !$var, and, or, xor
- Операторы сравнения — >, >=,
- Битовые операторы — |, >,
- Операторы присвоения — =, +=, -=, *=, /=, %=, >=,
- Строковый оператор — $str1 ~ $str2
- Тернарные операторы — $a ? $b : $c, $a ! $b : $c, $a ?: $c, $a !: $c
- Проверяющие операторы — $var?, $var!
- Оператор тестирование — is, is not
- Оператор содержания — in, not in
Модификаторы
Модификаторы переменных могут быть применены к переменным, пользовательским функциям или строкам. Для их применения надо после модифицируемого значения указать символ | (вертикальная черта) и название модификатора. Так же модификаторы могут принимать параметры, которые влияют на их поведение. Эти параметры следуют за названием модификатора и разделяются: (двоеточием). Кроме того, по умолчанию все функции PHP могут быть использованы в качестве модификаторов (что можно отключить в настройках) и модификаторы можно комбинировать.
выведет «USER» выведет «user» <»> выведет «user» > выведет «user» обрежет текст до 80 символов и добавит символы «. » значение переменной $foo будет «USER» вывысти текущий год получение значения полей ресурса с ID 1 (pagetitle, tv и т.д.) resource.publishedon | date_format:»%d-%m-%Y %H:%M:%S»> модификатор дата
Игнорирование кода
Как уже говорилось ранее, если требуется вывести текст, содержащий фигурные скобки, то есть следующие варианты это сделать:
Использование блочного тега . Текст внутри этого тега текст не компилируется шаблонизатором и выводится как есть. Если после открывающей фигурной скобки есть пробельный символ (пробел или t) или перенос строки (r или n), то она не воспринимается как разделитель кода Fenom и код после неё выводится как есть. Установить опцию:ignore у блочного тега. Все Fenom теги внутри блока будут проигнорированны
h1 [removed] (function (text) < var e = document.createElement(‘P’); e[removed] = text; document.body.appendChild(e); >)(‘test’); var item = ; [removed]
h1 [removed] (function (text) < var e = document.createElement(‘P’); e[removed] = text; document.body.appendChild(e); >)(‘test’); var item = ; [removed]
Пробелы
Шаблонизатор допускает любое количество пробелов или переносов строк в своём коде
1, «two» => 2, «three» => 3 ] as $key => $val> :
Fenom в modx
Для использования более сложных сущностей, в pdoParser предусмотрена служебная переменная , которая даёт безопасный доступ к некоторым переменным и методам системы.
- resource.id> — вывод id ресурса
- resource.tv_name> — вывод тв ресурса
- makeUrl(7)> — ссылка на 7 ресурс
- makeUrl($_modx->resource.id)> — ссылка на текущий ресурс
- config.system_setting> — вывод системной настройки
- user> — массив текущего пользователя
Плейсхолдеры с точкой или тире
Во многих местах MODX используются плейсхолдеры, которые нельзя указывать в Fenom, так как они не соответствуют правилам наименования переменных PHP. Например, плейсхолдеры с точкой (MODX обычно выставляет так данные массивов) или с тире (ТВ параметры).
Для доступа к этим плейсхолдерам нужно использовать вторую служебную переменную — :
Также существуют другие способы вывода плейсхолдеров в modx через fenom, такие как:
getPlaceholder(‘namePlaceholder’)>
Примеры работы
// загрукзка ресурсов runSnippet(‘pdoResources’, [ ‘parents’ => 19, ‘depth’ => 0, ‘where’ => [‘isfolder’ => 0], ‘showLog’ => 1, ])> // загрукзка меню runSnippet(‘pdoMenu’, [ ‘parents’ => 0, ‘level’ => 2 ])> p> lexicon->load(‘ms2gallery:default’)> Проверка словарей ms2Gallery: lexicon(‘ms2gallery_err_gallery_exists’)> p> p> isAuthenticated(‘web’)> Привет, user.fullname>!
Вам нужно авторизоваться =( p> p>Текущий контекст: context.key>p>
Создание значения из переменной с добавление префикса
Тег
Тег foreach предоставляет простой способ перебора массивов. Foreach работает только с массивами, объектами и интервалами.
] $value] [index=$index] [first=$first] [last=$last]>
Перебор значений массива $list:
div>div> div>№div>
Перебор ключей и значений массива $list:
$value> div>: div>
Получение номера (индекса) итерации, начиная с 0
div>№: div> или div>№: div>
Определение первой итерации:
Переменная $value:last будет иметь значение TRUE, если текущая итерация является последней.
Замечание: Использование last требует от $list быть countable.
Тег используется для выхода из цикла до достижения последней итерации. Если в цикле встречается тег , цикл завершает свою работу, и далее, выполняется код, следующий сразу за блоком цикла
Тег используется для прерывания текущей итерации. Если в цикле встречается тег , часть цикла, следующая после тега, не выполняется, и начинается следующая итерация. Если текущая итерация была последней, цикл завершается.
Тег ограничивает код, который должен быть выполнен, если итерируемый объект пуст.
div> last item div> div>emptydiv>
В блоке . использование , выбросит исключение FenomCompileException при компиляции
Вывод MIGX через fenom
Вывод migx с помощью fenom для текущего ресурса
resource.elements | fromJSON> $row>
где elements имя migx тв.
Вывод migx с помощью fenom для произвольного ресурса
где ID id ресурса тв которого нужно вывести, elements имя migx тв.
Ресайз картинок с помощью phpthumbon через fenom
Запускаем сниппеты modx через fenom
Синтаксис вызова сниппета modx через fenom очень простой, вот пример вызова:
‘mSearch2’, ‘toPlaceholder’ => ‘searchResults’ ]>
Если требуется вызвать сниппет без кеширования, вызов будет иметь следующий вид:
Работаем с файловой системой в modx через fenom
В modx выводить сниппеты, чанки, шаблоны можно не только из бд modx, можно загружать статичные файлы с хостинга с помощью fenom. Для этого по умолчанию в настройках pdoTools указана директория core/elements в которой следует распологать ваши php,tpl и html файлы. Заметим, что статические сниппеты это не совсем modx сниппеты, при возникновении проблемы с работой modx объектов чаще всего помогает наследование переменной modx и pdoTools, для этого в php файл добавьте следующий код:
global $modx; $pdoTools = $modx->getService(‘pdoTools’);
Вывод статических чанков в modx через fenom
Для этого в директории core/elements/chunks (если такой директории нет, то нужно создать через ftp или ssh, тут уже как вам удобнее) создаем файл (доступны расширения файлов html, htm, tpl) в котором будем хранить html код, для примера назовем файл test.tpl . Для вывода статического чанка на страницу используем одну из следующих команд:
Вывод статических шаблонов в modx через fenom
Вывод шаблонов аналогичен чанкам с тем лишь отличием, что файлы шаблонов для удобства располагаем в директории core/elements/templates и для каждого шаблона в панеле администратора создаем шаблон внутрь которого вставляем код:
где test.tpl название статического файла размещенного внутри директории templates .
Вывод статических сниппетов в modx через fenom
Для этого в директории core/elements/snippets (если такой директории нет, то нужно создать) создаем файл в котором будет находиться исполняемый php код, например создадим файл test.php в котором будет находиться следующий код
Если код написан без ошибок, то выведется hello world иначе скорее всего вы увидите белый экран, в этом случаем проверьте корректность написанного кода, а также смотрите системные логи.
Проверка авторизации
Так как объекта с пользователем в нет, методы проверки авторизации и прав доступа вынесены непосредственно в класс:
isAuthenticated()> hasSessionContext(‘web’)> hasPermission(‘load’)>
Приветствую вас на сайте ZENCOD.ru! Здесь вы найдете статьи по web-разработке, javascript, linux и прочим темам, которые могут быть полезны.
Источник: zencod.ru