MODX Revo и Minishop2 — вывод на главной категорий с изображением
WEB-студия » Полезное » MODX Revo и Minishop2 — вывод на главной категорий с изображением
Добавление изображения к категории
При разработке последнего интернет-магазина было принято решение установить его на CMS MODX Revolution. Путем перебора, для обеспечения функционала магазина было выбрано дополнение miniShop2.
В техническом задании было указано, так как магазин небольшой, надо все категории выводить на главной странице с изображением, названием категории, при клике на которые осуществлялся переход в саму категорию. Внешний вид Вы можете наблюдать на изображении.
С одной стороны, это можно было бы выполнить стандартной версткой, создать статичные блоки категорий с ссылками. Но это показалось нам слишком просто, да и вдруг ассортимент в скором времени начнет увеличиваться — будет просто некрасиво перед заказчиком.
Решили начать с добавления изображения для категории.
Создаем дополнительное поле
Стоит упомянуть, что работали мы на MODX Revolution версии 2.6.1-pl. Для возможности назначения своего изображения каждой категории, мы вводим дополнительное поле (Новый TV). Называем его cat_img, задаем ему тип «Изображение» и, конечно, выставляем доступность для шаблона нашей категории.
Теперь, при создании или редактировании категории мы имеем возможность добавлять/изменять изображение. Можно считать, что первая часть задачи выполнена. Теперь надо вывести список категорий в нужном нам месте и виде.
Для вывода списка категорий было принято решение использовать pdoMenu с нашими вводными — ведь нам нужен не просто список, а все это обернуть в наши блоки, привязать стили.
Вывод категорий Minishop2 с помощью pdoMenu
Разберемся со структурой сайта. Все категории могут лежать в разделе, например, Каталог или не связаны между собой общим ресурсом. В первом случае ссылка будет выглядеть site.ru/katalog/название_категории, а во втором просто site.ru/название_категории. В нашем случае, объединяющего раздела не было, потому вывод через pdoMenu выглядел так:
Что мы тут видим?
- &parents=`0` — родительский ID. Если мы оставляем параметр 0, то выводится все. Если у Вас категории товаров вложены в ресурс Каталог, Продукция и т.п., иными словами, имеют родительский элемент, то надо подставить ID родителя в данный параметр.
- &level — уровень вложенности меню. Если указать «2», то будут выводиться и товары в виде подменю. В нашем случае, это не требовалось.
- &includeTVs — наше дополнительное поле с изображением категории, в значение параметра пишем название дополнительного поля.
- &tplOuter — контейнер, в который будет обернуто наше меню. Обычно используется ul, но в нашем случае это section. Все зависит от структуры Вашего сайта. Как видите, у секции задан — это для привязки стилей.
- &tpl — «обертка» для каждого элемента меню. Здесь Вы уже видите, что мы подключаем нашу верстку для блоков категорий, чтобы они имели именно тот внешний вид, который нам нужен. В шаблоне есть параметры:
- [[+link]] — ссылка на категорию
- [[+cat_img]] — наше дополнительное поле, путь к картинке категории.
- <$pagetitle>— заголовок категории
- [[+menutitle]] — заголовок пункта меню, если не меняли настройки, то будет таким же, как и заголовок категории.
- &firstClass, &lastClass, &hereClass с пустыми значениями — убираем привязку классов для первого элемента меню, последнего и текущего — нам в верстке это не требовалось.
- &resources — в pdoMenu можно добавить дополнительные страницы, для этого в параметр пишем ID страниц. Если написать ID со знаком минус, то из списка эта страница уходит. В нашем случае, мы избавлялись от отображения главной страницы в нашем списке.
Вот и все — помещаем этот код в нужное место шаблона главной страницы и получаем динамический список категорий, который будет увеличиваться, уменьшаться, отслеживать изменение названия категории и установленного изображения без необходимости лезть в код шаблона.
Источник
pdoMenu
Сниппет генерации меню. Может заменять Wayfinder, и позволяет более гибко указывать параметры.
Например, умеет строить меню сразу из нескольких родителей, отображая их как вместе, так и отдельными ветками.
Существенный прирост скорости дает только при первом запуске, дальше Wayfinder не особо уступает, благодаря грамотному кэшированию.
Параметры
По умолчанию pdoMenu принимает общие параметры pdoTools и некоторые свои:
| Название | По умолчанию | Описание |
|---|---|---|
| &parents | Текущий ресурс | Список родителей для поиска результатов, через запятую. Если поставить &parents=`0` — выборка не ограничивается. Если id родителя начинается с дефиса, он и его потомки исключаются из выборки. |
| &level | 0 (не ограниченно) | Уровень генерируемого меню. |
| &resources | Список ресурсов для вывода в результатах, через запятую. Если id ресурса начинается с дефиса, этот ресурс исключается из выборки. | |
| &templates | Список шаблонов для фильтрации результатов, через запятую. Если id шаблона начинается с дефиса, ресурсы с ним исключается из выборки. | |
| &where | Массив дополнительных параметров выборки, закодированный в JSON. | |
| &displayStart | 0 | Включить показ начальных узлов меню. Полезно при указании более одного «parents». |
| &context | Ограничение выборки по контексту ресурсов. | |
| &showHidden | 0 | Показывать ресурсы, скрытые в меню. |
| &showUnpublished | 0 | Показывать неопубликованные ресурсы. |
| &previewUnpublished | 0 | Включить показ неопубликованных ресурсов, если у пользователя есть на это разрешение. |
| &hideSubMenus | 0 | Спрятать неактивные ветки меню. |
| &select | Список полей для выборки, через запятую. Можно указывать JSON-строку с массивом, например &select=`<"modResource":"id,pagetitle,content">` | |
| &sortby | menuindex | Любое поле ресурса для сортировки, включая ТВ-параметр, если он указан в параметре &includeTVs, например &sortby=`<"tvname":"ASC","pagetitle":"DESC">`. Можно указывать JSON-строку с массивом нескольких полей. Для случайной сортировки укажите &sortby=`RAND()` |
| &sortdir | ASC | Направление сортировки: по убыванию или по возрастанию. Если оставить параметры &sortby и &sortdir пустыми, то сортировка будет идти по порядку ресурсов в &resources. |
| &limit | 0 | Ограничение количества результатов выборки. |
| &offset | 0 | Пропуск результатов от начала. Необходимо использовать вместе с явно указанным &limit |
| &checkPermissions | Укажите, какие разрешения нужно проверять у пользователя при выводе ресурсов, например &checkPermissions=`list`. | |
| &countChildren | 0 | Точный подсчет количества дочерних ресурсов каждой категории и вывод их в плейсхолдер [[+children]] . Делает дополнительные запросы в БД, поэтому по умолчанию отключен. |
| &toPlaceholder | Если не пусто, сниппет сохранит все данные в плейсхолдер с этим именем вместо вывода на экран. | |
| &plPrefix | wf. | Префикс для выставляемых плейсхолдеров. |
| &showLog | 0 | Показывать дополнительную информацию о работе сниппета. Только для авторизованных в контекcте «mgr». |
| &fastMode | 0 | Быстрый режим обработки чанков. Все необработанные теги (условия, сниппеты и т.п.) будут вырезаны. |
| &cache | 0 | Кэширование результатов работы сниппета. |
| &cacheTime | 3600 | Время актуальности кэша, в секундах. |
| &scheme | -1 | Схема формирования url, передаётся в modX::makeUrl(), поэтому возможные варианты нужно смотреть здесь. Особый тип uri подставляет значение uri ресурса, без запуска функции. |
| &useWeblinkUrl | 1 | Генерировать ссылку с учетом класса ресурса. |
| &rowIdPrefix | Префикс для выставления идентификатора в чанк. | |
| &hereId | id текущего ресурса для генерируемого меню. Нужно указывать только если скрипт сам его неверно определяет, например при выводе меню из чанка другого сниппета. | |
| &includeTVs | Список ТВ-параметров для выборки, через запятую. Например &includeTVs=`action,time` дадут плейсхолдеры [[+action]] и [[+time]] . | |
| &prepareTVs | Список ТВ-параметров, с файлами из источников медиа, для которых нужно сгенерировать полные пути. Если установить &prepareTVs=`1`, будут подготовлены все ТВ, указанные в &includeTVs. | |
| &processTVs | Список ТВ-параметров, которые нужно обработать и вывести согласно их настроек в менеджере системы. Если установить &processTVs=`1`, будут обработаны все ТВ, указанные в &includeTVs. Замедляет работу. | |
| &tvPrefix | Префикс для ТВ-параметров. |
Параметры шаблонов
Эти параметры устанавливают чанки, которые содержат шаблоны для генерации меню.
| Название | Описание |
|---|---|
| &tplOuter | Чанк оформления всего блока меню. По умолчанию: @INLINE
|
| &tpl | Чанк оформления пункта меню. Если не указан, то содержимое полей ресурса будет распечатано на экран. По умолчанию: @INLINE [[+menutitle]][[+wrapper]] |
| &tplHere | Чанк оформления текущего пункта меню. |
| &tplStart | Чанк оформления корневого пункта, при условии, что включен &displayStart. По умолчанию: @INLINE [[+menutitle]][[+wrapper]] |
| &tplParentRow | Чанк оформления родителя с потомками, не подпадающего под условия &tplCategoryFolder . Например: @INLINE [[+menutitle]][[+wrapper]] |
| &tplParentRowHere | Чанк оформления текущего документа, если он содержит потомков. |
| &tplParentRowActive | Чанк оформления родителей с потомками в активной ветке меню. |
| &tplCategoryFolder | Специальный чанк оформления категории. Категорией считается родитель с потомками, у которого указан пустой шаблон или rel=»category» в поле link_attributes . |
| &tplInner | Чанк оформления всего блока подпунктов меню. Если пуст — будет использовать &tplOuter. Например: @INLINE
|
| &tplInnerRow | Чанк оформления подпункта меню. Например: @INLINE [[+menutitle]][[+wrapper]] |
| &tplInnerHere | Чанк оформления активного подпункта меню. |
Параметры CSS классов
Эти параметры задают значение плейсхолдеров [[+classnames]] и [[+classes]] для различных элементов меню. Плейсхолдер [[+classnames]] выводит только название класса без атрибута class=»», в отличие от плейсхолдера [[+classes]] .
| Название | Описание |
|---|---|
| &firstClass | Класс для первого пункта меню. По умолчанию: first |
| &lastClass | Класс последнего пункта меню. По умолчанию: last |
| &hereClass | Класс для активного пункта меню. По умолчанию: active |
| &parentClass | Класс категории меню. |
| &rowClass | Класс пункта меню. |
| &outerClass | Класс обертки блока меню. |
| &innerClass | Класс обертки блока подпунктов меню. |
| &levelClass | Класс уровня меню. Например если укажите «level», то будет «level1», «level2» и т.д. |
| &selfClass | Класс текущего ресурса в меню. |
| &webLinkClass | Класс ресурса-ссылки. |
Примеры
Обычный вывод меню из корня сайта в один уровень:
Вывод с исключением определенных родителей и проверкой разрешений пользователя:
Вывод меню сразу из двух родителей, с показом корневых точек:
Вывод двух уровней ресурсов с подсчетом количества вложенных:
Источник
Вывод категорий товара тегами
Комментарии: 20
Это, скорее, аналог хлебных крошек, а не вывод всех категорий товара. Причем, этот аналог работает только для мультикатегорий, обычные категории он не покажет.
В общем, проясни, пожалуйста, зачем это нужно, в каких ситуация. Тогда немного поправим код и положим в готовые решения.
Почему только для мультикатегорий? Показывает родительскую категорию и, если есть, дополнительные. Просто в силу специфики мне удобней было не тэгами разделять товары на отдельные группы, а категориями. Тэги я использовал для менее значимых праметров и группировок. Например, товар находится в нескольких основных группах, и, помимо этого есть еще несколько категорий по применению в разных секторах (бытовой, промышленный), чтобы удобней было пользоваться фильтром, не создавая большую кучу всего. Как по мне, в моем случае это добавляет удобства и понятности в категоризации.
Теперь понял. Из-за разделителя «/» решил, что сниппет должен показывать уровень вложения товара в категориях.
Тогда предлагаю вот такой код:
Выбирает все категории за один запрос и самостоятельно генерирует ссылки согласно настроек сайта. Работать будет немного быстрее.
Точно, потерялось где-то.
Ребята, что я делаю не так?
Создал сниппет, скопировал туда этот код.
Вызываю его [[$название_сниппета]] в чанке, чанк в шаблоне.
Подскажите пожалуйста как вывести только альтернативные категории, и не выводить родителя.
Просто есть каталог одежды, и есть специальные коллекции. Каждый товар помимо категории, также привязывается к определенной коллекции.
Задача следующая — нужно в карточке товара сперва отобразить ссылку на категорию товара, т.е. вывести ссылку на родителя, и отдельной ссылкой вывести коллекцию, т.е. на альтернативную категорию.
Источник
