support 447 Опубликовано 30 июня, 2017 Жалоба Share Опубликовано 30 июня, 2017 В 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 Всё, сохраняем наш шаблон и смотрим сопутствующие товары в карточке товара в магазине. Теперь сопутствующие товары выводятся слайдером. Вот так: Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения