Постановка задачи
Надо уменьшить размер блока с акциями в сайдбаре, поставив на нем слайдер, поскольку данный блок занимает много места.
Размещаем блок с акциями в слайдере
На движке OpenCart уже присутствует по умолчанию скрипт слайдера «owlCarousel», по этому будем использовать его.
Вносим правки в модуль акций
файл правки (шаблон модуля акций):
/catalog/view/theme/default/template/extension/module/special.tpl
<h3><?php echo $heading_title; ?></h3> <div class="row"> <div id="main-special"> <!-- добавляем --> <?php foreach ($products as $product) { ?> <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12"> . . . </div> <?php } ?> </div><!-- добавляем --> </div>
Это нужно для дальнейшей привязки скрипта слайдера к блоку.
Файл правки (шаблон карточки товара):
/catalog/view/theme/default/template/product/product.tpl
. . . <script type="text/javascript"><!-- $(document).ready(function() { viewSpecial(); function viewSpecial(){ $('#main-special').addClass('owl-carousel'); $('#main-special .product-layout').removeClass('col-lg-3 col-md-3 col-sm-6 col-xs-12'); } }); $('#main-special').owlCarousel({ items: 1, autoPlay: 3000, navigation: true, navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'], pagination: false }); --></script> <?php echo $footer; ?>
То есть размещаем данный скрипт на всех шаблонах где надо блок в сайдбаре спрятать в слайдер. В данном примере только в шаблоне карточки товара.
На выходе имеем следующий вид
Стилизацию слайдера и настройку отображения стрелочек или точек в данной статье не рассматриваю. Настройка слайдера происходит в скрипте входными параметрами.
Yay google is my queen aided me to find this great site! .