Блок с акциями размещаем в слайдере (OpenCart)

Постановка задачи

Надо уменьшить размер блока с акциями в сайдбаре, поставив на нем слайдер, поскольку данный блок занимает много места.

Размещаем блок с акциями в слайдере

На движке 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; ?>

То есть размещаем данный скрипт на всех шаблонах где надо блок в сайдбаре спрятать в слайдер. В данном примере только в шаблоне карточки товара.

На выходе имеем следующий вид

Стилизацию слайдера и настройку отображения стрелочек или точек в данной статье не рассматриваю. Настройка слайдера происходит в скрипте входными параметрами.