Обновление Owl Carousel в Opencart 2

В опенкарт 2-й версии, для работы модулей "Баннер", "Карусель", "Слайдшоу" (это из стандартных) используется скрипт Owl Carousel, первой версии. Скрипт хороший, но кое-чего ему не хватает, в основном - бесконечной прокрутки.

Самый простой выход - обновить карусель до более свежей версии. Правки при этом предстоят небольшие, после изменений получим не только зацикленную прокрутку, но и более удобную настройку адаптивности (хотя здесь кому как, но хуже не станет), ну и плюс еще несколько новых опций, все их можно найти в документации скрипта.

Для начала составлю небольой список, что нужно будет сделать:

• Скачать свежую версию Owl Carousel
• Заменить файлы на хостинге
• Внести правки в контроллеры модулей (не обязательно, кроме banner)
• Правки в .tpl модулей
• Изменения в CSS

Вот и все, можно приступать.

Обновление скрипта

Для начала скачиваем скрипт, сделать это можно с сайта Owl Carousel - вот отсюда

В скачанном архиве нам нужны будут файлы:

• dist/owl.carousel.js
• dist/owl.carousel.min.js
• dist/assets - можно взять все содержимое папки

Все эти файлы копируем с заменой в catalog/view/javascript/jquery/owl-carousel

После этой замены скрипт обновлен, все работает, но пока не правильно.

Модификация контроллеров

Для начала рекомендую внести небольшие правки в контроллеры модулей, это не обязательно, но так будет лучше. Изначально подключается не сжатая таблица стилей - owl.carousel.css, заменим на min версию, это ускорит загрузку страниц. Нужны будут следующие файлы (здесь и далее только для стандартных модулей, по остальным делаем по аналогии):

• catalog/controller/extension/module/banner.php
• catalog/controller/extension/module/carousel.php
• catalog/controller/extension/module/slideshow.php

Здесь находим:

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');

Меняем на:

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.css');

Еще в banner.php нужно удалить строку:

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');

С контроллерами все.

Изменения в шаблонах

Нужно будет изменить код вызова карусели, т.к. изменились все (или почти) параметры. Рекомендую ознакомиться с доступными опциями - здесь, возможно найдется что то нужное.

Понадобятся файлы:

• catalog/view/theme/default/template/extension/module/banner.tpl
• catalog/view/theme/default/template/extension/module/carousel.tpl
• catalog/view/theme/default/template/extension/module/slideshow.tpl

Для каждого модуля будет старый код и новый, так хорошо будут видны изменения.

slideshow.tpl

items: 6,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true

Меняем на такой:

items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 3000,
singleItem: true,
nav: true,
navText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
dots: true

carousel.tpl

items: 6,
autoPlay: 3000,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true

Меняем на:

items: 6,
loop: true,
autoplay: true,
autoplayTimeout: 3000,
nav: true,
navText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
dots: true

banner.tpl

items: 6,
autoPlay: 3000,
singleItem: true,
navigation: false,
pagination: false,
transitionStyle: 'fade'

Меняем на:

items: 1,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true,
nav: false,
dots: false,
animateOut: 'fadeOut'

Изменения в CSS

Теперь нужно добавить стили, для нормального отображения навигации и не только. Правки будут показаны на примере CSS стандартного шаблона:
catalog/view/theme/default/stylesheet/stylesheet.css

В самый конец файла добавлю:

.owl-carousel .owl-nav {width: 100%;position: absolute;top: 50%;line-height: 45px;}
.owl-carousel .owl-nav [class*='owl-'] {top: 50%;color: rgba(0,0,0,0.8);text-shadow: 1px 1px 0 rgba(255,255,255,0.3);transition: all .3s ease;position: absolute;opacity: 0;width: 27px;height: 44px;margin-top: -22px;}
.owl-carousel .owl-nav .disabled {opacity: 0;cursor: default;}
.owl-carousel .owl-nav i {font-size: 44px;line-height: 1em;}
.owl-carousel .owl-nav .owl-prev {left: -10px;}
.owl-carousel .owl-nav .owl-next {right: -10px;}
.owl-carousel:hover .owl-nav [class*='owl-'] {opacity: 0.7}
.owl-carousel:hover .owl-nav [class*='owl-']:hover {opacity: 1}
.owl-carousel:hover .owl-nav .owl-prev {left: 10px;}
.owl-carousel:hover .owl-nav .owl-next {right: 10px;}
.owl-carousel .owl-dots {text-align: center;-webkit-tap-highlight-color: transparent; }
.owl-carousel .owl-dots .owl-dot {display: inline-block;zoom: 1;*display: inline;}
.owl-carousel .owl-dots .owl-dot span {width: 10px;height: 10px;margin: 5px 7px;background: #D6D6D6;display: block;-webkit-backface-visibility: visible;transition: opacity 200ms ease;border-radius: 30px;}
.owl-carousel .owl-dots .owl-dot.active span, .owl-carousel .owl-dots .owl-dot:hover span {background: #869791;}