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'
		'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
		}
	});
});