Добавление изображения к категории
При разработке последнего интернет-магазина было принято решение установить его на CMS MODX Revolution. Путем перебора, для обеспечения функционала магазина было выбрано дополнение miniShop2.
В техническом задании было указано, так как магазин небольшой, надо все категории выводить на главной странице с изображением, названием категории, при клике на которые осуществлялся переход в саму категорию. Внешний вид Вы можете наблюдать на изображении.
С одной стороны, это можно было бы выполнить стандартной версткой, создать статичные блоки категорий с ссылками. Но это показалось нам слишком просто, да и вдруг ассортимент в скором времени начнет увеличиваться — будет просто некрасиво перед заказчиком.
Решили начать с добавления изображения для категории.
Создаем дополнительное поле
Стоит упомянуть, что работали мы на MODX Revolution версии 2.6.1-pl. Для возможности назначения своего изображения каждой категории, мы вводим дополнительное поле (Новый TV). Называем его cat_img, задаем ему тип «Изображение» и, конечно, выставляем доступность для шаблона нашей категории.
Теперь, при создании или редактировании категории мы имеем возможность добавлять/изменять изображение. Можно считать, что первая часть задачи выполнена. Теперь надо вывести список категорий в нужном нам месте и виде.
Для вывода списка категорий было принято решение использовать pdoMenu с нашими вводными — ведь нам нужен не просто список, а все это обернуть в наши блоки, привязать стили.
Вывод категорий Minishop2 с помощью pdoMenu
Разберемся со структурой сайта. Все категории могут лежать в разделе, например, Каталог или не связаны между собой общим ресурсом. В первом случае ссылка будет выглядеть site.ru/katalog/название_категории, а во втором просто site.ru/название_категории. В нашем случае, объединяющего раздела не было, потому вывод через pdoMenu выглядел так:
[[pdoMenu?
&parents=`0`
&level=`1`
&includeTVs=`cat_img`
&tplOuter=`@INLINE <section id="katalog">[[+wrapper]]</section>`
&tpl=`@INLINE <div class="col4"><a href="[[+link]]"><img src="[[+cat_img]]" alt="{$pagetitle}" title="{$pagetitle}"/></a><h3><a href="[[+link]]">[[+menutitle]]</a></h3>[[+wrapper]]</div>`
&firstClass=``
&lastClass=``
&hereClass=``
&resources=`-1`
]]
Что мы тут видим?
- &parents=`0` — родительский ID. Если мы оставляем параметр 0, то выводится все. Если у Вас категории товаров вложены в ресурс Каталог, Продукция и т.п., иными словами, имеют родительский элемент, то надо подставить ID родителя в данный параметр.
- &level — уровень вложенности меню. Если указать «2», то будут выводиться и товары в виде подменю. В нашем случае, это не требовалось.
- &includeTVs — наше дополнительное поле с изображением категории, в значение параметра пишем название дополнительного поля.
- &tplOuter — контейнер, в который будет обернуто наше меню. Обычно используется ul, но в нашем случае это section. Все зависит от структуры Вашего сайта. Как видите, у секции задан id=»katalog» — это для привязки стилей.
- &tpl — «обертка» для каждого элемента меню. Здесь Вы уже видите, что мы подключаем нашу верстку для блоков категорий, чтобы они имели именно тот внешний вид, который нам нужен. В шаблоне есть параметры:
- [[+link]] — ссылка на категорию
- [[+cat_img]] — наше дополнительное поле, путь к картинке категории.
- {$pagetitle} — заголовок категории
- [[+menutitle]] — заголовок пункта меню, если не меняли настройки, то будет таким же, как и заголовок категории.
- &firstClass, &lastClass, &hereClass с пустыми значениями — убираем привязку классов для первого элемента меню, последнего и текущего — нам в верстке это не требовалось.
- &resources — в pdoMenu можно добавить дополнительные страницы, для этого в параметр пишем ID страниц. Если написать ID со знаком минус, то из списка эта страница уходит. В нашем случае, мы избавлялись от отображения главной страницы в нашем списке.
Вот и все — помещаем этот код в нужное место шаблона главной страницы и получаем динамический список категорий, который будет увеличиваться, уменьшаться, отслеживать изменение названия категории и установленного изображения без необходимости лезть в код шаблона.
Требуется помощь? Есть задачи по доработке магазина на базе MODX + minishop2 — отправляйте ТЗ на нашу почту info@kolibri-spb.ru. Поможем!
