Opencart 2: Cлайдер Owl Carousel в OcStore 2.1.0.2. Что делать, если слайдер не работает?

По сравнению с версиями 1.5 Opencart и OcStore получили ряд улучшений и изменений. Тем не менее, к этим новшествам надо еще и приспособиться, особенно тем, кто привык работать с более ранними версиями. Обновления не обошли стороной и всеми любимый модуль слайдера, теперь вместо старого Nivo Silder используется Owl Carousel, поэтому и настройки будут отличаться.

Подключение кода слайдера, как и прежде, осуществляется в файле /catalog/view/theme/ваша-тема/template/module/slideshow.tpl. Стоит сказать, что для карусели используется этот же слайдер, поэтому эффекты и параметры будут похожими, только редактируются они в файле /catalog/view/theme/ваша-тема/template/module/carousel.tpl

В файле мы видим следующий код:

<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
    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
});
--></script>

Здесь можно настроить поведение и эффекты слайдера. Если обратиться к документации Owl Carousel, то сразу все станет ясно:

items - определяет количество элементов, которые будут отображаться одновременно на экране (несколько изображений подряд, как в старой карусели)

autoPlay - задает интервал времени в милисекундах, через который будет сменяться изображение в слайдере

singleItem - параметр, с помощью которого карусель превращается в слайдер, т.е. отображает только одно большое изображение

navigation - отображение стрелок влево-вправо

navigationText - текст или изображение на стрелках навигации

pagination - отображение постраничной навигации, т.е. точек внизу слайдера, которые показывают текущее положение

Кроме настроек по-умолчанию есть и другие полезные опции, которые можно включить самостоятельно, ознакомившись со списком опций в документации Owl Carousel
Например, можно включить остановку слайдера при наведении курсора мышки:

stopOnHover: true,

Не забывайте ставить запятую в конце каждой опции. Также можно настроить скорость анимации слайдера, то есть длительность эффекта смены изображений:

slideSpeed: 400,

И одна из самых интересных и полезных опций - настройка эффекта слайдера, т.е. анимации с которой сменяются изображения:

transitionStyle: "backSlide",

Со списком и демо анимаций можно ознакомиться на сайте слайдера

Но после указания типа анимации, многие сталкиваются с тем, что слайдер вообще перестает работать, либо изображения сменяются без какого-либо эффекта. Дело в том, что в текущей версии Opencart и OcStore не подключены все стили слайдера, и есть небольшой баг в скрипте слайдера.

Первым делом надо подключить стили анимаций слайдера. Это делается в файлах /catalog/controller/module/slideshow.php и /catalog/controller/module/carousel.php соответственно. Здесь надо дописать строчку

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

после 

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

Также в строке  $this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');  удаляем слово "min", так как следующим шагом будет редактирование и подключение файла полного скрипта слайдера. Получаем в итоге три строки такого вида:

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

Сохраняем файл и идем в папку /catalog/view/javascript/jquery/owl-carousel где открываем файл owl.carousel.js, в котором ищем строку:

support3d = (asSupport !== null && asSupport.length === 1);

и меняем ее на:

support3d = (asSupport !== null && asSupport.length >= 1 && asSupport.length <= 2);

Эта строка отвечает за поддержку слайдера различными браузерами, в том числе и Internet Explorer. В измененной версии поддержка будет более точной, поэтому слайдер сможет использовать все свои эффекты в современных браузерах. Сохраняем отредактированный файл, чистим кэш браузера (Ctrl+F5 или Ctrl+Shift+R) и радуемся новым эффектам слайдера. В документации говорится, что можно написать и свои эффекты для слайдера, поэтому тут можно и еще поэксперементировать.