Оценок: 1

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

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

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

Интеграция

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

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

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

размещение файлов Fotorama

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

Шаг 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
		}
	});
});

Оценок: 1

На вдохновениеDonate

Комментарии (5)

Админ, добавь пожалуйста статью — как в админку добавить фильтр по EAN (по штрих коду). Будь человеком))) Пробовал по аналогии «как добавить Артикул» но вместо SKU прописывал EAN и ничего не работает. (ocStore 2.3.0.2)
Ну, или ткни пожалуйста носом — ничего найти не могу((

Прохожий 25 ноября 2020, 03:08 0

ответ
Правильно ли понял, что fotorama будет выводить из БД все три типа изображений (image_popup /
image_thumb / image_additional)?

Что тогда выводится посредством <?php echo $image['medium']; ?>?
Или где эта medium задаётся…

М4 09 июня 2020, 11:38 0

ответ
- В БД получаем только одно изображение, исходное. Все остальные задаются в контроллере (выделено зеленым). «medium» имеет размеры image_thumb.
  Да, с thumb != image_thumb можно запутаться… не придал значения
  
  Владимир 09 июня 2020, 21:28 0
  
  ответ
для админа сайта знающего код это еще приемлемо
— для остальных это решение полное дерьмо
как всем этим упралять без адмики

стас 15 октября 2019, 00:33 -1

ответ
- Какая админка нужна и чем здесь управлять собираетесь? Решение именно такое, какое есть и именно для тех кто может его применить. Остальным спасибо за внимание.
  
  Владимир 15 октября 2019, 01:56 +1
  
  ответ

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

Интеграция

Похожие

Написать комментарий

Комментарии (5)