Урок 32 Вертикальная и горизонтальная карусель изображений в карточке товара opencart

Уверен, Вы не раз сталкивались с тем, что в опенкарт вывод дополнительных изображений в карточке товара реализован примитивно. Я уже останавливался на модуле карусели дополнительных изображений чтобы решить данную проблему. Сегодня же будем все делать руками.
Если Вы планируете выводить больше 7 изображений, то получите нечто подобное
Согласитесь, совсем не привлекательно. И сегодня мы постараемся исправить эту ситуацию. И использовать для этих целей будем замечательный скрипт — Slick. Ссылку на него дам ниже.
Итак начнем. Прежде всего заливаем папку со скриптом в общую папку скриптов
1 |
/catalog/view/javascript/ |
И обязательно подключаем сам скрипт и файл стилей этого плагина в шаблоне хедера
1 |
/catalog/view/theme/default/template/common/header.tpl |
Т.е. сразу перед </head> добавляем
1 2 |
<link rel="stylesheet" href="/catalog/view/javascript/slick/slick.css"> <script src="/catalog/view/javascript/slick/slick.js"></script> |
После этого самое время приступать к созданию самой карусели дополнительных изображений. Делать это будем в контроллере и шаблоне карточки товара. Сначала внесем требуемые изменения в контроллер по адресу
1 |
/catalog/controller/product/product.php |
Здесь нам необходимо добавить дополнительные размеры изображений для миниатюр и главного изображения. Все дело в том, что для главного изображения сделано 2 типа размеров, и столько же для миниатюр. Для главного изображения нет размера миниатюры, а для миниатюр нет среднего изображения. Итак, находим
1 2 3 4 5 6 |
if ($product_info['image']) { $data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_thumb_width'), $this->config->get($this->config->get('config_theme') . '_image_thumb_height')); $this->document->setOgImage($data['thumb']); } else { $data['thumb'] = ''; } |
и сразу под ним добавляем
1 2 3 4 5 6 |
if ($product_info['image']) { $data['additional'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_additional_width'), $this->config->get($this->config->get('config_theme') . '_image_additional_height')); $this->document->setOgImage($data['additional']); } else { $data['additional'] = ''; } |
Здесь же чуть ниже этот фрагмент
1 2 3 4 5 6 |
foreach ($results as $result) { $data['images'][] = array( 'popup' => $this->model_tool_image->resize($result['image'], $this->config->get($this->config->get('config_theme') . '_image_popup_width'), $this->config->get($this->config->get('config_theme') . '_image_popup_height')), 'thumb' => $this->model_tool_image->resize($result['image'], $this->config->get($this->config->get('config_theme') . '_image_additional_width'), $this->config->get($this->config->get('config_theme') . '_image_additional_height')) ); } |
меняем на
1 2 3 4 5 6 7 |
foreach ($results as $result) { $data['images'][] = array( 'popup' => $this->model_tool_image->resize($result['image'], $this->config->get($this->config->get('config_theme') . '_image_popup_width'), $this->config->get($this->config->get('config_theme') . '_image_popup_height')), 'thumb' => $this->model_tool_image->resize($result['image'], $this->config->get($this->config->get('config_theme') . '_image_thumb_width'), $this->config->get($this->config->get('config_theme') . '_image_thumb_height')), 'additional' => $this->model_tool_image->resize($result['image'], $this->config->get($this->config->get('config_theme') . '_image_additional_width'), $this->config->get($this->config->get('config_theme') . '_image_additional_height')) ); } |
Заливаем файл обратно на хостинг и приступаем к шаблону
Горизонтальная карусель дополнительных изображений
Теперь приступим непосредственно к созданию горизонтальной карусели. Открываем шаблон карточки товара по адресу
1 |
/catalog/view/theme/default/template/product/product.tpl |
Здесь это
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php if ($thumb || $images) { ?> <ul class="thumbnails"> <?php if ($thumb) { ?> <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <?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 } ?> </ul> <?php } ?> |
полностью меняем на
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?php if ($thumb || $images) { ?> <ul class="thumbnails slider-for"> <?php if ($thumb) { ?> <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li><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 } ?> </ul> <ul class="slider-nav"> <?php if ($thumb) { ?> <li><img src="<?php echo $additional; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></li> <?php } ?> <?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li class="image-additional"><img src="<?php echo $image['additional']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></li> <?php } ?> <?php } ?> </ul> <script> $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slider-nav' }); $('.slider-nav').slick({ slidesToShow: 3, slidesToScroll: 1, vertical: false, asNavFor: '.slider-for', dots: false, centerMode: true, focusOnSelect: true, useCSS: true, centerPadding: '100px 0 100px 0', swipe: true, touchThreshold: 4 }); </script> <?php } ?> |
Если все было сделано верно, то теперь вот так будут выглядеть изображения товаров.
Стилизацию я конечно не делал, так как каждый подгоняет конкретно под свой случай.
Ветикальная карусель дополнительных изображений
Для создания вертикальной карусели дополнительных изображений opencart нужно будет проделать чуть больше работы, а именно необходимо разделить блок изображения на две части — одну под миниютюры, вторую — под основные. Замечу что в данных примерах я рассматриваю взаимосвязанные изображения. Т.е. при прокрутке карусели или нажатии в карусели на изображение, это изображение автивируется в основном блоке.
Итак, править нам надо больший фрагмент кода в том же шаблоне карточки товара. В этот раз это
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php if ($thumb || $images) { ?> <ul class="thumbnails"> <?php if ($thumb) { ?> <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <?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 } ?> </ul> <?php } ?> |
Необходимо заменить на следующий кода
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?php if ($thumb || $images) { ?> <div class="row"> <div class="col-md-3"> <ul class="slider-nav"> <?php if ($thumb) { ?> <li><img src="<?php echo $additional; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></li> <?php } ?> <?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li class="image-additional"><img src="<?php echo $image['additional']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></li> <?php } ?> <?php } ?> </ul> </div> <div class="col-md-9"> <ul class="thumbnails slider-for"> <?php if ($thumb) { ?> <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li><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 } ?> </ul> </div> </div> <script> $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slider-nav' }); $('.slider-nav').slick({ slidesToShow: 3, slidesToScroll: 1, vertical: true, asNavFor: '.slider-for', dots: false, centerMode: true, focusOnSelect: true, useCSS: true, centerPadding: '100px 0 100px 0', swipe: true, touchThreshold: 4 }); </script> <?php } ?> |
Теперь обновите модификаторы и после обновления карточки товара должны увидеть что то такое
Как и в предыдущем примере с горизонтальной каруселью я не наводит «красоту», так как основная задача получить рабочую красивую карусель изображений. Отлично работает во всех браузерах. Отмечу, что плагин magnificPopup просмотра изображения работает при нажатии на большие изображения. Думаю у всех все получилось. Если что то не понятно — задавайте вопросы. Данный плагин имеет просто огромную массу настроек и позволяет создавать крутые карусели изображений, как вертикальные, так и горизонтальные.
Оставить комментарий