VaM

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

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

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

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

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

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

59565cd1e54ad_Screenshotfrom2017-06-3017

Сделаем вот так:

59565cd0553ff_Screenshotfrom2017-06-3017

Начинаем:

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

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

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

Вот так:

59565cd0553ff_Screenshotfrom2017-06-3017

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


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

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

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

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

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


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

Войти

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


Войти сейчас