Обновить карусель в Opencart
2021-03-31
Карусель в opencart отображается на главной странице магазина и создает первое впечатление о нем. Поэтому выглядеть карусель должна красиво и эффектно, и нельзя сказать что встроенная карусель не производит должного впечатления, но некоторым не нравится то что она перелистывает слайды не по-кругу, а дойдя до последнего слайда - перематывает на первый обратно.
Реализована карусель при помощи jquery-плагина "Owl Carousel". Изначально в OpenCartе используется версия Owl Carousel 1.3.3, и вышеописанный метод показа слайдов является такой "фишкой" и отключить ее нельзя. Но в более новых версиях этого же плагина есть необходимые настройки, а на сегодняшний день вышло несколько обновлений этого плагина. Скачать последнюю версию можно с Официальной страницы или скачать уже готовый патч карусели по ссылке в конце статьи.
Для обновления плагина нужно просто заменить старые js и css файлы в папках, а также подключить стиль и настроить вызов.
Замена файлов
Если вы скачали архив с официального сайта, то вам будут нужны файлы из папок "dist" и "dist\assets". Скопируйте файлы owl.carousel.js, owl.carousel.min.js, owl.carousel.css, owl.theme.default.css в папку на компьютере. Затем нужно переименовать файл owl.theme.default.css в owl.theme.css.
y
Теперь у вас есть четыре файла, которые необходимо заменить в opencart, скопируйте эти файлы в папку на сервере по адресу catalog\view\javascript\jquery\owl-carousel\
Подключение
Переходим в папку catalog\controller\extension\module и в файлах banner.php, carousel.php, slideshow.php находим такие строки:
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');
И добавляем еще одну:
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.theme.css');
Настройка
После простой замены файлов и их подключения слайдер работать не будет, нужно изменить опции отображения и все.Переходим в папку стандартной темы catalog/view/theme/default/template/extension/module/ и изменяем настройки в файлах banner.tpl, carousel.tpl, slideshow.tpl
Нужно отметить, что разные файлы относятся к разным opencart плагинам - баннер, карусель и слайдшоу соответственно. В первой строке изменяем class="owl-carousel" на class="owl-carousel owl-theme"
и в скрипте заменяем опции, прописывая необходимые настройки:
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 3000,
smartSpeed: 1000,
dots: true,
navText: ['<i class="fa fa-chevron-left fa-5x"></i>', ' <i class="fa fa-chevron-right fa-5x"> </i>'],
nav: true
Опции слайдера
items - Количество одновременно отображаемых элементов
loop - Бесконечная прокрутка
mouseDrag - Пролистывание слайдов мышью
touchDrag - Пролистывание слайдов пальцем
nav - Кнопки навигации
navText - Код кнопок навигации
dots - Отображение точек навигации
autoplay - Автовоспроизведение
autoplayTimeout - Период переключения слайдов
smartSpeed - Скорость перелистывания
center - Показ слайда по-центру контейнера
Скачать готовый архив со всеми файлами можно ОТСЮДА. Для установки, архив нужно просто распаковать в корневую папку.