VaM

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

1 сообщение в этой теме

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

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

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

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

595668a81354c_Screenshotfrom2017-06-3018

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

595668a525a47_Screenshotfrom2017-06-3018595668a6999ba_Screenshotfrom2017-06-3018

Начинаем:

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 дополнительных картинок, то будет выводиться слайдер.

Вот так:

595668a525a47_Screenshotfrom2017-06-3018595668a6999ba_Screenshotfrom2017-06-3018

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас