19th

В стандартном шаблоне Opencart 2 дополнительные изображения товаров выводятся без скрола (карусели), захотелось решить.
На досуге занимался, код кривой, работает под дефолтной схемой, но может быть кому-то пригодится. Пример получившегося во вложении.
1) \catalog\controller\product\product.php
где-нибудь после
$this->document->addStyle('catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.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');  
2) \catalog\view\theme\default\template\product\product.tpl
2.1) в начало файла
<style> #owl-demo .item{ padding: 1px 1px; margin: 1px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } .customNavigation{ text-align: center; } .customNavigation a{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .owl-carousel .owl-buttons .owl-prev{ left:1px !important; opacity: 0.4 !important; } .owl-carousel .owl-buttons .owl-next{ right:1px !important; opacity: 0.4 !important; } .owl-carousel:hover .owl-buttons div{ opacity:0.7 !important; } </style> 2.2 в конец, в скрипты
$(document).ready(function() { var owl = $("#owl-demo"); owl.owlCarousel({ items : 3, itemsDesktop : [1000,3], itemsDesktopSmall : [900,3], itemsTablet: [600,2], itemsMobile : false, navigation : true, navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'], pagination: false }); }); 2.3 вывод дополнительных картинок
<?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <?php } ?> меняем на
<?php if ($images) { ?> <div id="owl-demo" class="owl-carousel owl-theme"> <?php foreach ($images as $image) { ?> <div class="item"> <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a> </div> <?php } ?> </div> <?php } ?>  

В стандартном шаблоне Opencart 2 дополнительные изображения товаров выводятся без скрола (карусели), захотелось решить.
На досуге занимался, код кривой, работает под дефолтной схемой, но может быть кому-то пригодится. Пример получившегося во вложении.
1) \catalog\controller\product\product.php
где-нибудь после
$this->document->addStyle('catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.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');  
2) \catalog\view\theme\default\template\product\product.tpl
2.1) в начало файла
<style> #owl-demo .item{ padding: 1px 1px; margin: 1px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } .customNavigation{ text-align: center; } .customNavigation a{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .owl-carousel .owl-buttons .owl-prev{ left:1px !important; opacity: 0.4 !important; } .owl-carousel .owl-buttons .owl-next{ right:1px !important; opacity: 0.4 !important; } .owl-carousel:hover .owl-buttons div{ opacity:0.7 !important; } </style> 2.2 в конец, в скрипты
$(document).ready(function() { var owl = $("#owl-demo"); owl.owlCarousel({ items : 3, itemsDesktop : [1000,3], itemsDesktopSmall : [900,3], itemsTablet: [600,2], itemsMobile : false, navigation : true, navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'], pagination: false }); }); 2.3 вывод дополнительных картинок
<?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <?php } ?> меняем на
<?php if ($images) { ?> <div id="owl-demo" class="owl-carousel owl-theme"> <?php foreach ($images as $image) { ?> <div class="item"> <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a> </div> <?php } ?> </div> <?php } ?>  

Добавил линк на сообщение в шапку.

Возможно пригодиться кому-то. Если есть обмен с 1С, то при переходе на https у вас есть два варианта: включать поддержку SSL в 1С (правильный вариант) либо настроить обращение к скрипту обмена без SSL (более простой вариант, но не совсем правильный):
1 вариант) Как завещал великий Savage4Pro:
2 вариант) В каталог /export положить файл .htaccess с содержимым:
 

ЧПУ:
Для 2.3: https://liveopencart.ru/opencart-moduli-shablony/moduli/seo/url-rewriting-tools
Для 2.1: он же или https://liveopencart.ru/opencart-moduli-shablony/moduli/seo/modul-chpu-seo-url-kannonicheskih-ssyilok-avtomaticheski-opencart-2 или https://liveopencart.ru/opencart-moduli-shablony/moduli/seo/modul-chpu-seo-url-kannonicheskih-ssyilok-avtomaticheski-opencart-2

под 2.1 есть вот такой файлик, которым нужно заменить admin/model/localisation/currency.php  (разумеется сделать бэкап)
currency.php

ВАЖНО! ТЕМА ЗАКРЫТА. ОБНОВЛЕННАЯ ИНСТРУКЦИЯ ДЛЯ ПЕРЕХОДА НА HTTPS - >>>ЗДЕСЬ<<<
 
Правила Темы:
 
UPD24.10.2016 Данная инструкция актуальна для Opencart.PRO и Opencart.CMS версий 2.1.0.2.2 и выше!
UPD02.11.2016 Важное дополнение по Ukraine.com.ua от @Yoda в Пункте 10.2
UPD08.01.2017 Дополнение от @markimax в Пункте 3.4 о том, нужно ли удалять модуль HTTP FIX после склейки зеркал.
UPD04.02.2017 Добавлен Раздел 12 - Дополнение для версий 1.5.X.
UPD28.02.2017 Добавлена информация для настройки обмена по HTTPS с программами от 1С - ЗДЕСЬ.
UPD16.03.2017 Обновлен список авторизационных (удостоверяющих) центров (CA).
UPD07.03.2018 Яндекс заменит директиву HOST на 301-й редирект - больше информации ЗДЕСЬ.
 
 
0. ВАЖНО! Перед началом любых экспериментов не забываем делать бэкап файлов и базы сайта!!!
 
1. Для перехода на SSL (HTTPS) нужен сертификат, получить его можно здесь:
 
2. Далее необходимо установить сертификат на сервер, либо активировать его в ПУ, либо передать его хостинг-провайдеру для установки на сервер (на котором размещен ваш сайт). Более подробно о данной процедуре можно узнать у техподдержки хостера.
 
3. Настраиваем CMS для работы с SSL.
3.1 В файлах /config.php и admin/config.php делаем замены:
3.2 Устанавливаем этот модуль. Отдельно благодарим комрадов @Yoda, @savage4pro и @markimax, которыми он был написан.
Настройка CMS на данном этапе завершена.
3.3 Дополнительная информация от @savage4pro о работе модуля:
3.4 Нужно ли удалять модуль после склейки зеркал?
 
4.  Далее необходимо настроить редирект с HTTP на HTTPS.
Ситуация здесь двоякая, если сразу настроить редирект, в большинстве случаев позиции в выдаче ПС будут потеряны. Явление временное, но неприятное.
Посему, согласно изысканиям и рекомендациям комрадов @Yoda и @savage4pro (если о ком-то не написал, отпишитесь, исправлю), с редиректом мы повременим до момента склейки зеркал сайта поисковиками (зеркала - сайт на HTTP и на HTTPS).
Делаем следующее в файле robots.txt:
если sitemap вашего сайта не отдается фидом, добавляем в обе секции (User-agent: * и User-agent: Yandex) файла robots.txt следующие директивы:
Sitemap: httрs://mysite.com/sitemap.xml в секции для Яндекса (User-agent: Yandex) добавляем директиву Host: Host: https://<ваш_сайт> если sitemap вашего сайта отдается фидом, отдаем ПСам новый фид (по HTTPS); добавляем новый сайт на HTTPS в Вебмастеры ПС; наблюдаем и ждём момента когда главным зеркалом станет сайт на HTTPS и произойдёт склейка зеркал. Вебмастеры ПС:
 
5. Добавляем в Вебмастеры Яндекса и Гугла HTTPS-версии вашего сайта. В Вебмастере Яндекса наблюдаем и ждём момента, когда зеркала будут склеены. Для тех у кого не очень много товаров в каталоге или много свободного времени идём Инструменты -> Переобход страниц и каждый день добавляем по 10 ссылок (с HTTPS), тем самым заставляя Яшу чуть быстрее индексировать ваш сайт по HTTPS.
 
6. Дополнительная информация:
от Яши - здесь и здесь от Гоши - здесь и здесь.  
7. Когда склейка зеркал произошла, остается дело за малым - настроить редирект.
7.1 Идём "Система -> Настройки -> Редактировать -> Вкладка Сервер -> Использовать SSL: выбираем Да. ДО склейки зеркал НЕ включаем.
7.2 И тут, на мой взгляд, основные танцы с бубном. Обновленный seo_pro (с версии 2.1.0.2.2) позволяет избавиться от танцев с бубном вокруг .htaccess, делая внесение изменений в него не обязательными.
 
Написать о результатах и задать вопрос можно в теме поддержки модуля.
 
Если вы всё же приняли решение настроить редирект в .htaccess, для вас информация далее.
В виду того, что у разных хостинг-провайдеров разные настройки серверов, необходимо выбрать тот вариант редиректа, который будет работать. Как проверить напишу чуть ниже.
Важный момент! Подразумевается, что редирект с "с www" на "без www", или наоборот, у вас уже настроен. Если нет, смотрите здесь.
ВАЖНО! Изменения вносятся в файл .htaccess в корневом каталоге сайта.
ВАЖНО! Редиректы в файле .htaccess необходимо добавлять сразу после строки с 'RewriteBase /'. Если не работает, попробуйте поставить выше, сразу после строки с  'RewriteEngine On'. О результатах экспериментов пишите в этой теме.
7.3 Варианты редиректов:
7.3.1 Редиректы от @Yoda:
7.3.2 Редиректы от @savage4pro:
7.3.3 Редирект от Timeweb.ru:
7.3.4 Редирект для Ukraine.com.ua:
7.3.5 Редирект для Masterhost.ru (говорим спасибо @Yoda здесь?
7.3.6 Редирект для webhost1.ru:
7.3.7 Редирект для связки nginx и Apache:
7.3.8 Редирект для jino.ru от @markimax:
 
8. Проверка. Чтобы проверить корректность работы произведенных изменений необходимо сделать следующее:
8.1 Если у вас настроен редирект с "с www" на "без www"
идём на сайт по HTTP с WWW, должны получить HTTPS без WWW; идём на сайт по HTTP без WWW, должны получить HTTPS без WWW; идём на сайт по HTTPS с WWW, должны получить HTTPS без WWW. 8.2 Если у вас настроен редирект с "без www" на "с www"
идём на сайт по HTTP с WWW, должны получить HTTPS с WWW; идём на сайт по HTTP без WWW, должны получить HTTPS с WWW; идём на сайт по HTTPS без WWW, должны получить HTTPS с WWW. 8.3 Отдельно можно проверить как после всех изменений ваш сервер отдает статические файлы, например, фото товаров.
Зайдите на страницу товара, скопируйте ссылку на фото товара, вставьте её в строку браузера и поэкспериментируйте согласно пунктам 8.1 - 8.2, и посмотрите по какому протоколу будет отдаваться статика. 
8.4 У некоторых хостинг-провайдеров есть возможность включить редирект в ПУ. Тут следует обратить внимание на то, каким редиректом будет осуществляться переадресация - 301-м или 302-м. Нужен 301-й. Как посмотреть? Можно здесь. Также показывает редирект Screaming Frog SEO Spider, браузер тоже показывает. Пробуйте.
8.5 Проверьте сайт на наличие ссылок по HTTP. Это могут быть ссылки в статьях или описаниях товаров. Необходимо изменить в них HTTP на HTTPS или сделать их относительными, т.е. без доменного имени сайта.
 
9. ВАЖНО! Все внешние скрипты, стили, шрифты и прочие iframe должны подключаться строго по HTTPS и никак иначе! В противном случае получим кучу ошибок в консоли браузера и корявости на сайте. 
 
10. Решения для хостинг-провайдеров:
10.1 Хостинг-провайдер Timeweb.ru:
10.2 Хостинг-провайдер Ukraine.com.ua:
 
ПОЛЕЗНО! Сервис для тестирования установленного сертификата QUALYS SSL LABS
 
11. Небольшой эксперимент с инструментом "Переобход страниц":
11.1 Сайт, около 600 товаров, переставил на HTTPS.
11.2 В вебмастере Яндекса сделал "переезд на https" получил ответ, что скоро всё произойдёт. До сих пор жду.
11.3 Добавил отдельно тот же сайт, но по HTTPS, так "Переобход" работает.
11.4 Добавляю каждый день по 10 страниц (без повторений) в "Переобход страниц".
11.5 Результат (И - страниц в индексе, П - страниц в поиске):
11.6 Вывод - профит от инструмента ясен и понятен.
P.S. Ну а если вы всё ещё ждёте Яшу в гости, ну что ж ждите
 
12. Переход на HTTPS для OC версий 1.5.X
12.0 См. Пункт 0 настоящей Инструкции.
12.1 Устанавливаем сертификат (Пункт 1 настоящей Инструкции). На shared хостингах в ПУ хостинга все редиректы должны быть выключены.
12.2 В файлах /config.php и admin/config.php делаем замены:
12.3 Делаем следующее в файле robots.txt:
если sitemap вашего сайта не отдается фидом, добавляем в обе секции (User-agent: * и User-agent: Yandex) файла robots.txt следующие директивы:
Sitemap: httрs://mysite.com/sitemap.xml в секции для Яндекса (User-agent: Yandex) добавляем директиву Host: Host: https://<ваш_сайт> если sitemap вашего сайта отдается фидом, отдаем ПСам новый фид (по HTTPS); добавляем новый сайт на HTTPS в Вебмастеры ПС; наблюдаем и ждём момента когда главным зеркалом станет сайт на HTTPS и произойдёт склейка зеркал. 12.4 В .htaccess добавляем один из редиректов (обращаем внимание на комментарии):
Редирект ставим между директивами RewriteEngine On и RewriteBase /
Первая строка и нижние строки добавлены для ориентира.
12.5 Идём Система -> Настройки -> Нажать 'Изменить' -> Вкладка 'Сервер' -> Использовать SSL выбираем ДА.
12.6 Производим проверку согласно Раздела 8 настоящей инструкции.
 
P.S. На некоторых хостингах (из-за настроек серверов) не работают, либо работают некорректно, редиректы в .htaccess. Можно поэкспериментировать с редиректами из Пунктов 7.3.1 и 7.3.3 настоящей Инструкции, попытаться запросить правильный редирект у хостинг-провайдера, или включить редиректы в ПУ хостинга (предварительно откатив все изменения касающиеся редиректов в .htaccess).

http://forum.opencart.pro/files/file/69-релиз-opencartcms-2102/
во первых вот последний релиз, а там качаете
opencart_cms_2_1_0_2_1.zip

от Let's Encrypt (о разнице в общих чертах можно прочитать здесь)

Да конечно, но это как и в любой другой форме связи - можно с человеком два часа говорить и он ничего не купит, а может задаст вопрос один и сразу 10 заказов сделает. Навскидку по частоте общения с клиентами у меня примерно так:
живосайт (чат и форма обратной связи в оффлайне) скайп форма обратной связи на сайте почта вайбер телефон телеграм вконтакте ватсап  
 

Ну во первых тотальная переделка модулей и шаблонов, так что сейас рабочий магазин переводить смысла нет никакого вообще. В админке есть несколько изменений, кое что описал тут https://liveopencart.ru/news_site/chto-novogo-v-opencart-23/ Но прям так что бы что-то новое и революционное - такого для пользователей нет.

что-то моя шутеечка плохо зашла, сделаем конечно, но позже

Ну во первых тотальная переделка модулей и шаблонов, так что сейас рабочий магазин переводить смысла нет никакого вообще. В админке есть несколько изменений, кое что описал тут https://liveopencart.ru/news_site/chto-novogo-v-opencart-23/ Но прям так что бы что-то новое и революционное - такого для пользователей нет.

Ну во первых тотальная переделка модулей и шаблонов, так что сейас рабочий магазин переводить смысла нет никакого вообще. В админке есть несколько изменений, кое что описал тут https://liveopencart.ru/news_site/chto-novogo-v-opencart-23/ Но прям так что бы что-то новое и революционное - такого для пользователей нет.

еще бы мне кто подсказал как это сделать

https://liveopencart.ru/opencart-moduli-shablony/moduli/zakaz/-oc-2-podskazki-dadata-pro-opencart-ocstore-2-x

@markimax когда пишет про блондинок, меня передергивает )) 

В стандартном шаблоне Opencart 2 дополнительные изображения товаров выводятся без скрола (карусели), захотелось решить.
На досуге занимался, код кривой, работает под дефолтной схемой, но может быть кому-то пригодится. Пример получившегося во вложении.
1) \catalog\controller\product\product.php
где-нибудь после
$this->document->addStyle('catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.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');  
2) \catalog\view\theme\default\template\product\product.tpl
2.1) в начало файла
<style> #owl-demo .item{ padding: 1px 1px; margin: 1px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } .customNavigation{ text-align: center; } .customNavigation a{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .owl-carousel .owl-buttons .owl-prev{ left:1px !important; opacity: 0.4 !important; } .owl-carousel .owl-buttons .owl-next{ right:1px !important; opacity: 0.4 !important; } .owl-carousel:hover .owl-buttons div{ opacity:0.7 !important; } </style> 2.2 в конец, в скрипты
$(document).ready(function() { var owl = $("#owl-demo"); owl.owlCarousel({ items : 3, itemsDesktop : [1000,3], itemsDesktopSmall : [900,3], itemsTablet: [600,2], itemsMobile : false, navigation : true, navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'], pagination: false }); }); 2.3 вывод дополнительных картинок
<?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <?php } ?> меняем на
<?php if ($images) { ?> <div id="owl-demo" class="owl-carousel owl-theme"> <?php foreach ($images as $image) { ?> <div class="item"> <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a> </div> <?php } ?> </div> <?php } ?>  

В стандартном шаблоне Opencart 2 дополнительные изображения товаров выводятся без скрола (карусели), захотелось решить.
На досуге занимался, код кривой, работает под дефолтной схемой, но может быть кому-то пригодится. Пример получившегося во вложении.
1) \catalog\controller\product\product.php
где-нибудь после
$this->document->addStyle('catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.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');  
2) \catalog\view\theme\default\template\product\product.tpl
2.1) в начало файла
<style> #owl-demo .item{ padding: 1px 1px; margin: 1px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } .customNavigation{ text-align: center; } .customNavigation a{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .owl-carousel .owl-buttons .owl-prev{ left:1px !important; opacity: 0.4 !important; } .owl-carousel .owl-buttons .owl-next{ right:1px !important; opacity: 0.4 !important; } .owl-carousel:hover .owl-buttons div{ opacity:0.7 !important; } </style> 2.2 в конец, в скрипты
$(document).ready(function() { var owl = $("#owl-demo"); owl.owlCarousel({ items : 3, itemsDesktop : [1000,3], itemsDesktopSmall : [900,3], itemsTablet: [600,2], itemsMobile : false, navigation : true, navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'], pagination: false }); }); 2.3 вывод дополнительных картинок
<?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <?php } ?> меняем на
<?php if ($images) { ?> <div id="owl-demo" class="owl-carousel owl-theme"> <?php foreach ($images as $image) { ?> <div class="item"> <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a> </div> <?php } ?> </div> <?php } ?>  

В стандартном шаблоне Opencart 2 дополнительные изображения товаров выводятся без скрола (карусели), захотелось решить.
На досуге занимался, код кривой, работает под дефолтной схемой, но может быть кому-то пригодится. Пример получившегося во вложении.
1) \catalog\controller\product\product.php
где-нибудь после
$this->document->addStyle('catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.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');  
2) \catalog\view\theme\default\template\product\product.tpl
2.1) в начало файла
<style> #owl-demo .item{ padding: 1px 1px; margin: 1px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } .customNavigation{ text-align: center; } .customNavigation a{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .owl-carousel .owl-buttons .owl-prev{ left:1px !important; opacity: 0.4 !important; } .owl-carousel .owl-buttons .owl-next{ right:1px !important; opacity: 0.4 !important; } .owl-carousel:hover .owl-buttons div{ opacity:0.7 !important; } </style> 2.2 в конец, в скрипты
$(document).ready(function() { var owl = $("#owl-demo"); owl.owlCarousel({ items : 3, itemsDesktop : [1000,3], itemsDesktopSmall : [900,3], itemsTablet: [600,2], itemsMobile : false, navigation : true, navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'], pagination: false }); }); 2.3 вывод дополнительных картинок
<?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <?php } ?> меняем на
<?php if ($images) { ?> <div id="owl-demo" class="owl-carousel owl-theme"> <?php foreach ($images as $image) { ?> <div class="item"> <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a> </div> <?php } ?> </div> <?php } ?>  

В стандартном шаблоне Opencart 2 дополнительные изображения товаров выводятся без скрола (карусели), захотелось решить.
На досуге занимался, код кривой, работает под дефолтной схемой, но может быть кому-то пригодится. Пример получившегося во вложении.
1) \catalog\controller\product\product.php
где-нибудь после
$this->document->addStyle('catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.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');  
2) \catalog\view\theme\default\template\product\product.tpl
2.1) в начало файла
<style> #owl-demo .item{ padding: 1px 1px; margin: 1px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } .customNavigation{ text-align: center; } .customNavigation a{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .owl-carousel .owl-buttons .owl-prev{ left:1px !important; opacity: 0.4 !important; } .owl-carousel .owl-buttons .owl-next{ right:1px !important; opacity: 0.4 !important; } .owl-carousel:hover .owl-buttons div{ opacity:0.7 !important; } </style> 2.2 в конец, в скрипты
$(document).ready(function() { var owl = $("#owl-demo"); owl.owlCarousel({ items : 3, itemsDesktop : [1000,3], itemsDesktopSmall : [900,3], itemsTablet: [600,2], itemsMobile : false, navigation : true, navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'], pagination: false }); }); 2.3 вывод дополнительных картинок
<?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <?php } ?> меняем на
<?php if ($images) { ?> <div id="owl-demo" class="owl-carousel owl-theme"> <?php foreach ($images as $image) { ?> <div class="item"> <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a> </div> <?php } ?> </div> <?php } ?>  

В стандартном шаблоне Opencart 2 дополнительные изображения товаров выводятся без скрола (карусели), захотелось решить.
На досуге занимался, код кривой, работает под дефолтной схемой, но может быть кому-то пригодится. Пример получившегося во вложении.
1) \catalog\controller\product\product.php
где-нибудь после
$this->document->addStyle('catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.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');  
2) \catalog\view\theme\default\template\product\product.tpl
2.1) в начало файла
<style> #owl-demo .item{ padding: 1px 1px; margin: 1px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } .customNavigation{ text-align: center; } .customNavigation a{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .owl-carousel .owl-buttons .owl-prev{ left:1px !important; opacity: 0.4 !important; } .owl-carousel .owl-buttons .owl-next{ right:1px !important; opacity: 0.4 !important; } .owl-carousel:hover .owl-buttons div{ opacity:0.7 !important; } </style> 2.2 в конец, в скрипты
$(document).ready(function() { var owl = $("#owl-demo"); owl.owlCarousel({ items : 3, itemsDesktop : [1000,3], itemsDesktopSmall : [900,3], itemsTablet: [600,2], itemsMobile : false, navigation : true, navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'], pagination: false }); }); 2.3 вывод дополнительных картинок
<?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <?php } ?> меняем на
<?php if ($images) { ?> <div id="owl-demo" class="owl-carousel owl-theme"> <?php foreach ($images as $image) { ?> <div class="item"> <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a> </div> <?php } ?> </div> <?php } ?>