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

Обновление 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;}

Оценок: 2
Надежный хостинг VPS серверов
  • Свои ISO образы
  • VDS с оплатой раз и навсегда
  • Аренда VDS на любой срок, с оплатой по дням
  • Большое разнообразие конфигураций
  • Дата-центры в ЕС и России
+ скидка 10%

Комментарии (4)

  1. Скажем так, ставил, все работает, но…
    Мне не понравилось — единственный плюс увидел в работе карксели по кругу, но само передвижение картинок резкое, дерганное.
    Банер также не айс.
    Установил старую версию, как то получше смотрится.

    Александр 07 июня 2021, 07:05 0
    • Может нужно больше правок под шаблон, если визуально не так… с шаблоном по-умолчанию там не то что бы много отличий (вроде все так же)

      Владимир 07 июня 2021, 07:24 0
      • Шаблон стандарт, правки минимальны. Но визуально, при новом скрипте карусель перемещает картинку резко, со старым она перемещается более плавно, не раздражает глаз.

        Александр 08 июня 2021, 07:29 0
        • Скорость анимации можно опциями контролировать. Например попробовать:

          Показать код
          smartSpeed: 300,
          Стандартно 250.

          Еще есть navSpeed, dotsSpeed, dragEndSpeed, если нужно отдельно настроить.

          На одиночных слайдах хорошо смотрится если указать эффект fadeOut:
          Показать код
          animateOut: 'fadeOut',

          Владимир 08 июня 2021, 07:41 0