Как выводить сопутствующие товары (любые товары, категории и т.д.) в виде слайдера?!

[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. Теперь нам надо заменить стандартный внешний вид (шаблон) блока сопутствующие товаров, на вывод с использованием слайдера bxSlider.

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

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

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

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

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

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

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

{xsell}

на:

{xsell template="myxsell"}

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

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

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

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

<script type="text/javascript">
$(document).ready(function(){
$(".thumbnails").bxSlider({
  adaptiveHeight: true,
  pager: false,
  minSlides: 3,
  maxSlides: 3,
  slideWidth: 360
});
});
</script>

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

Всё, сохраняем наш шаблон и смотрим сопутствующие товары в карточке товара в магазине.

Теперь сопутствующие товары выводятся слайдером.

Вот так: