joomix

Скроллинг дополнительных изображений в карточке товара Опенкарт 2

Как известно, в дефолтном шаблоне Opencart 2 дополнительные изображения товаров выводятся без скрола (карусели).

Приведем один из вариантов решения данной проблемы с помощью owl.

 

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 } ?>

На этом все. Надеемся, данное решение окажется Вам полезным!


Рейтинг статьи

Рейтинг: 100% - 5 голоса (-ов)

100%