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

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

Владелец интернет-магазина нижнего белья LaRouge поставил перед нами задачу разработать инструмент, который помог бы легко с этим справляться. (https://larouge-lingerie.ru) .

Для реализации функционала мы создали в административной панели отдельный инфоблок с баннерами.

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

Мы создали разделы

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

Для хранения названий, ссылок и изображений предусмотрены соответствующие поля элементов инфоблока

Текст для серой плашки хранится в пользовательском свойстве каждого раздела инфоблока

Для корректного вывода изображений в каждом горизонтальном блоке берется пользовательское свойство раздела инфоблока “Тип блока”

От значения этого свойства зависит то, какой шаблон html-верстки будет применяться.

Чтобы изменить порядок отображения баннеров на странице, контент-редактору достаточно изменить индекс сортировки соответствующих разделов инфоблока

Задав сортировку элемента раздела, можно регулировать местоположение картинок внутри горизонтального блока.