Дополнительные изображения товара в категории

Бывают случаи, когда в списке товаров нужно кроме основного изображения вывести и дополнительные. Например, интернет-магазин фейерверков.

Бывают случаи, когда в списке товаров нужно кроме основного изображения вывести и дополнительные. Например, интернет-магазин фейерверков. Основное изображение будет упаковка товара, однако покупателю нужно посмотреть как тот или иной салют выглядит в действии.

В opencart в списке товаров отображается только основное изображение, дополнительные, где отображены выстрелы в ночном небе, доступны только в карточке товара. Это очень неудобно, т.к. при выборе, что бы посмотреть на работу салюта, нужно зайти в конкретное наименование, а их может быть очень много.

Решением в этой ситуации служит вывод дополнительных изображений в категории возле основной картинки. Это позволит покупателю, не заходя в карточку товара, увидеть фото взрыва в ночном небе и сделать быстрый выбор.

Для начала добавим функцию добавления дополнительных изображений в массив данных товаров, который формируется в контроллере, открываем файл:

/catalog/controller/product/category.php

Находим строки:

$results = $this->model_catalog_product->getProducts($data);
foreach ($results as $result) {

После них вставляем:

$results_img = $this->model_catalog_product->getProductImages($result['product_id']);
$dop_img = array();
foreach ($results_img as $result_img) {
	if ($result_img['image']) {
		$image_dop = $this->model_tool_image->resize($result_img['image'], 50, 50);
	} else {
		$image_dop = false;
	}
	$dop_img[] = $image_dop;
}

Немного ниже ищем строки:

$this->data['products'][] = array(

	'product_id' => $result['product_id'],

Ниже нее добавляем:

'dop_img' => $dop_img,

Сохраняем, теперь в данных которые передаются в наш шаблон есть дополнительные фото. Далее редактируем шаблон, открываем: /catalog/view/theme/default/template/product/category.tpl Находим строки:

<?php foreach ($products as $product) { ?>

И в любом удобном месте вставляем цикл вывода дополнительных фото:

<div class="dop_img">
	<?php foreach ($product['dop_img'] as $img) { ?>
		<img src="<?php echo $img;?>">
	<?php } ?>
</div>

Ну а дальше дело за малым, поставить нужные нам стили, например:

.dop_img{
	position:absolute;
	z-index:100;
}
.dop_img img{
	margin-right:2px;
	border-radius:4px;
}

Вот и все, дополнительные изображения товаров выведены в категории.

С помощью стилей можно сделать эффект увеличения при наведении, например в контроллере где у нас стоит $result_img[‘image’], 50, 50); можно поставить размер изображения 150, 150 А в стилях прописать:

.dop_img img{
	margin-right:2px;
	border-radius:4px;
	width:50px;
	height:50px;
}
.dop_img img:hover{
	width:150px;
	height:150px;
	position:absolute;
}

С помощью данной доработки мы делаем возможность увеличения дополнительных фотографий при наведении.