MODX. Сниппет BannerY. Создание удобного слайдера в MODX при помощи BannerY

Отредактировано: 15 Марта 2023

Большинство авторов описывают создание слайдера при помощи MIGX, но такой способ весьма не удобен, поскольку требует привязки к ресурсу. Куда более удобным компонентом для этих целей является BannerY, как всегда, от несравненного Василия Наумкина.

Итак, для организации бэкэнд части слайдера понадобиться:

Установить дополнение BannerY;
Создать 2 чанка с шаблонами: шаблон для элемента и шаблон для обертки;
Зайти в меню Extras (Пакеты) в пункт BannerY;
В открывшемся окне перейти на 2 вкладку «Позиции» и создать новую позицию;
Перейти на 1 вкладку «Баннеры», и создать необходимое количество баннеров, задать каждому имя, изображение и выбрать специальную позицию;
Перейти в нужное место шаблона и вызвать сниппет
```
[[!BannerY?
      &tpl=`tpl.slider-item`
      &tplWrapper=`tpl.slider-wrap`
]]
```

Пример чанка tpl.slider-wrap

<div class="slider-block js-slider">
    [[+output]]
</div>

Пример чанка tpl.slider-item

<div class="slider-img-wrap">
        <img src="{$image}" alt="{$name}">
</div>

Не забудьте написать css и подключить скрипт слайдера в js файлах вашего сайта, например так:

<script src="/assets/templates/def/js/jquery-3.3.1.min.js"></script>
<script src="/assets/templates/def/js/slick.min.js"></script>
<script> $('.js-slider').slick({}); </script>

Поля интерфейса «Баннеры» в компоненте BannerY:

Название — любое название баннера, чтобы вам было удобно ориентироваться по ним в админке.
Источник медиа — необязательный параметр. Картинки можно хранить на удалённых серверах, подключенных через источники медиа. По умолчанию будут местные файлы.
Включен — переключатель активности баннера.
Новое изображение — выберите предварительно загруженное изображение. Будут показаны файлы из выбранного источника.
URL — место назначения баннера. Можно указывать страницы своего сайта или url - для этого нужно набрать адрес с http://.
Текст баннера — любой произвольный текст, его можно будет вывести в подписи к баннеру.
Позиции — выбор позиций, для которых показывается этот баннер. Их нужно создать предварительно в соседней вкладке.

Плейсхолдеры сниппета BannerY:

[[++bannery_click]] — устанавливается в href параметр ссылки, отлавливает клик по баннеру;
[[+adposition]] — номер баннера;
[[+image]] — изображение;
[[+name]] — название;
[[+description]] — описание;
[[+url]] — ссылка.

Тонкости при работе с BannerY:

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

// модификатор убирает первый слеш при выводе изображения на сайте
<img src="{$image | preg_replace : '~^/~': ''}"/>

Еще одна особенность работы компонента заключается в ссылке на несуществующую страницу сайта. Поисковики видят ссылки как /bannerclick/5?id=2246 и в отчетах жалуются на то, что эти страницы заблокированы файлом robots.txt, хотя страницы таковыми не являются. Чтобы исключить эти показания из отчетов, заблокируйте страницы в robots.txt

Disallow: /bannerclick/

Документация сниппета BannerY