Как добавить слайдер для дополнительных картинок товара на странице карточки товара?

[support 447]

В VamShop 2 уже встроен bxSlider - http://bxslider.com

Это удобный скрипт для создания слайдеров.

В данном примере мы выведем дополнительные картинки товара на странице карточки товара в виде слайдера.

По умолчанию дополнительные картинки выводятся так:

Добавим слайдер, вот так:

Начинаем:

1. Подключаем bxSlider. Для этого в Админке - Оформление - Шаблоны - Основной шаблон после:

{bender src="{base_path}/css/jquery/plugins/colorbox/colorbox.css"}

добавляйте:

{bender src="{base_path}/css/jquery/plugins/bxslider/jquery.bxslider.css"}

и внизу после:

{bender src="{base_path}/js/jquery/plugins/colorbox/jquery.colorbox-min.js"}

добавляйте:

{bender src="{base_path}/js/jquery/plugins/bxslider/jquery.bxslider.min.js"}

2. Теперь нам нужно обновить сгенерированные автоматически css и js файлы VamShop, для этого удалите 2 файла:

/app/webroot/css/vamshop-packed.css

/app/webroot/js/vamshop-packed.js

Они сгенерируются автоматически с подключённым bxSlider.

3. Теперь нам надо добавить слайдер для дополнительных картинок товара.

Для вывода картинок товара используется метка {content_images} в шаблоне карточки товара в Админке - Оформление - Шаблоны.

Нам нужно задать свой шаблон для метки {content_images}, т.к. стандартный шаблон нам не подходит, нам нужно будет добавить javascript код для слайдера.

Для этого переходим в Админку - Расширения - Тэги, ищем тэг content_images, заходим внутрь, кликнув по тэгу content_images и внизу будет кнопка Создать микро шаблон из тэга. Нажимаем кнопку Создать микро шаблон из тэга.

Создаём микро-шаблон, в опции Псевдоним например можно указать myimages

Сохраняем наш шаблон.

4. Теперь нам нужно указать тэгу {content_images}, что б картинки товара отрисовывались не стандартным шаблоном, а нашим новым шаблоном myimages

Для этого в Админке - Оформление - Шаблоны -  Шаблон карточки товара сверху меняйте:

{content_images}

на:

{content_images template="myimages"}

Всё, теперь картинки товара отрисовываются нашим микро-шаблоном myimages

5. Остался последний шаг - добавить слайдер в наш новый шаблон myimages.

Для этого заходим в Админку - Оформление - Микро-шаблоны и редактируем наш микро-шаблон myimages.

Внизу добавляем следующий код:

{if $images_count > 4}
<script type="text/javascript">
$(document).ready(function(){
$(".row.small").bxSlider({
  adaptiveHeight: true,
  pager: false,
  minSlides: 3,
  maxSlides: 3,
  slideWidth: 180
});
});
</script>
{/if}

Описание всех настроек bxSlider доступно на официальном сайте - http://bxslider.com/options

Всё, сохраняем наш шаблон и смотрим картинки на странице карточки товара в магазине.

Если у Вас у товара больше 3 дополнительных картинок, то будет выводиться слайдер.

Вот так: