Доска почета

В стандартном шаблоне 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.3.0.2.3 появились преимущества и подарки. В шаблоне они не выводятся ни в карточке товара, ни в категориях. Сделал адаптацию. Через модификаторы вывести: В файл стилей добавить:

В процессе экспериментов был создан модуль html с повторяющейся разметкой типа <div class="html-banner-item col-xs-6 col-sm-3"> Ничего не предвещало беды, но вдруг обнаружилось что при определенных разрешениях экрана этот модуль отображается с пропуском четвертого элемента в первой строке. Последующие ряды отображаются верно. Причина была в стандартных стилях которые отвечают за перенос каждого четвертого элемента. После экспериментов в Инспекторе кода и замены nth-child на nth-of-type проблема исчезла. Окончательные выводы не делаю, но вдруг у кого-то случится подобный глюк. Будете знать где копать. P.S. понятное дело, что аналогичный глюк может проявиться и на других разрешениях и с другой разметкой.