Fotorama - интеграция галереи в страницу товара Opencart

Fotorama - скрипт jQuery галереи с миниатюрами, которые можно расположить снизу, или сверху от основного изображения, а так же увелличением (просмотр во все окно с миниатюрами), все это в одном скрипте. Основной слайдер и миниатюры (если не помещаются в отведенное пространство) можно пролистывать, поддерживается Swipe.

Существенный недостаток - нет вертикального слайдера, но так как Owl Carousel этим так же похвастаться не может - альтернатива вполне нормальная, даже если говорить о замене на всем сайте. Что же касается страницы товара, с учетом наличия увеличения - можно избавиться от скрипта magnific popup, а если еще и сделать замену Owl Carousel на Fotorama в модулях - получим выгоду - меньше загружаемых пользователю скриптов.

Интеграция

Для начала скачиваем сам скрипт - Здесь

Там же можно (нужно) посмотреть примеры, документацию.

Шаг 2 - размещаем файлы в /catalog/view/javascript/jquery

Можете использовать другое место для размещения файлов (например, в шаблоне), только не забудьте далее указать правильный путь

Шаг 3 - подключаем скрипт в контроллере - /catalog/controller/product/product.php

Находим подключение скрипта magnific popup, где то 220+/- строка:

$this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js');$this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css');

Меняем на пути к соответствующим файлам Fotorama (т.к. дополнительный скрипт для увеличения не нужен):

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

Теперь изменения в выводе изображений. Изначально есть основное изображение с размерами image_thumb и image_popup плюс дополнительные изображения с размерами image_additional и image_popup. Здесь я использовал названия из настроек, что бы было понятнее, т.к. "thumb" у основного и дополнительных изображений разных размеров.

Для вывода понадобится один массив, в котором будут все изображения в трех размерах - thumb (image_additional), medium (image_thumb), popup (image_popup). Изменения в том же контроллере немного дальше (оранжевым - удалить, зеленым - добавить):

$this->load->model('tool/image');

if ($product_info['image']) {
   $data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_popup_width'), $this->config->get($this->config->get('config_theme') . '_image_popup_height'));
  } else {
   $data['popup'] = '';
  }

  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'] = '';
  }

if ($product_info['image']) {
$data['images'][] = array(
					'popup' => $this->model_tool_image->resize($product_info['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($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')),
					'medium' => $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'))
				);
  }
  $data['images'] = array();

  $results = $this->model_catalog_product->getProductImages($this->request->get['product_id']);

  foreach ($results as $result) {
   $data['images'][] = array(
'medium' => $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')),
    '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'))
   );
  }

В итоге будет так:

Шаг 4 - изменения в шаблоне товара - /catalog/view/theme/default/template/product/product.tpl

Заменить нужно будет весь блок с изображениями:

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

На такой код:

<?php if ($images) { ?>
<div class="fotorama" data-nav="thumbs" data-thumbheight="75" data-allowfullscreen="true" data-swipe="true" data-autoplay="5000">
  <?php foreach ($images as $image) { ?>
    <a target="_blank" href="<?php echo $image['medium']; ?>" data-full="<?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>
  <?php } ?>
</div>
<?php } ?>

Это как вариант. Здесь все параметры указаны в качестве атрибутов для блока с классом fotorama, дополнительный вызов не нужен, но можно использовать и альтернативный вариант с вызовом (смотрим документацию). Вместо ссылки можно использовать атрибуты для изображения, что бы указать среднее и большое изображение.

Так же нужно удалить вызов MagnificPopup в самом конце файла:

$(document).ready(function() {
	$('.thumbnails').magnificPopup({
		type:'image',
		delegate: 'a',
		gallery: {
			enabled:true
		}
	});
});