Opencart карусель дополнительных изображений товара на странице товара

Дата публикации

30.04.2020

Просмотров:

1566

Продолжаем окультуривать наш магазин на Opencart (ocStore). Данная иструкция позволит реализовать карусель дополнительных изображений на странице товара. Еще одна небольшая изюминка, добавляющая индивидуальности Вашему магазину.

В магазине Opencart и ocStore уже есть встроенная библиотека карусели. На ней работает модуль “Карусель” и нам остается только приспособить ее к выводу дополнительных изображений на странице товаров.

Так как все скрипты уже загружены, остается только их инициализировать и заставить работать с нужными нам эллементами. Для этого правим файл шаблона вывода товара:

/catalog/view/theme/default/template/product/product.tpl

нужно в самом конце перед футером добавить:

<?php if (count($images) > 2) { ?>
        <?php $add_height = $this->config->get('config_image_additional_height'); ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/carousel.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel.min.js"></script>
<script type="text/javascript"><!--
$(function() {
        var visible = 2;
        var thumb_width = $('.product-info .left').outerWidth(true);
        $('.image-additional a').wrap('<li />');
        $('.image-additional li').wrapAll('<ul class="jcarousel-skin-opencart" />');
        $('.image-additional').width(thumb_width);
        $('.product-info > .left + .right').css('margin-left', thumb_width
		  		

Opencartкарусель дополнительных изображений товара на странице товара

Поделиться