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

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

категория: , Дорабатываем

✎ Опубликовано: 31.05.2015 ✎ Обновлено: 12.06.2015 ☕ Просмотров: 15096 ✉ Комментарии: 14

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

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

В 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;
}

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

Антон 31.05.2015

Есть ли возможность прицепить колорбокс к этим дополнительным картинкам?

Ответ for-opencart.com 31.05.2015

Почему нет? Обертываем наши дополнительные изображения ссылкой, то есть вместо вывода изображений выводим:

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

Естественно ссылкой на фото - ставим большое изображение товара, это в контроллере предварительно надо прописать.

Внизу страницы категории инициализируем colorbox:

<script type="text/javascript"><!--
  $(document).ready(function() {
    $('.colorbox').colorbox({
      overlayClose: true,
      opacity: 0.5,
      rel: "colorbox"
    });
  });
//--></script> 

И последним шагом - подгоняем стили под требования!

Hunter 24.08.2015

Было бы круто сделать не одно изображение а несколько.

Marta 26.08.2015

Сделала все как в статье, доп фото не выводятся в категориях. Для Ocstore версия 1.5.5.1.2 не работает.

Ответ for-opencart.com 26.08.2015

Изображения не выводятся, или видает ошибку? Установлен ли фильтр filterpro на сайте? Доработка протестирована на ocstore 1.5.5.1.2 Уточните эти вопросы.

Marta 26.08.2015

Доп изображения не выводятся, ошибок не выдается, вид каталога остается без изменений как будто ничего не вносилось. Фильтр не установлен.

Ответ for-opencart.com 26.08.2015

Изображения дополнительные заданы во вкладке Изображения на странице редактирования товара? И посмотрите включено ли отображения ошибок в настройках магазина. Система - Настройки - вкладка Сервер - показывать ошибки

Marta 28.08.2015

Доп изображения заданы, в карточках товара они есть, показывать ошибки не включено, включено записывать ошибки, но журнал ошибок чист.

Ответ for-opencart.com 28.08.2015

Ну тогда только в индивидуальном порядке смогу посмотреть что там не так.

Сергей 05.09.2015

Сдалал все как написано. Но стоит тема и нона берет даные для категорий гдето не в /catalog/controller/product/category.php незнаю как от сюда работатет только для поиска для всех остальных фалов не работает. Что можно сделать?

Ответ for-opencart.com 05.09.2015

Ищите в /catalog/controller/product/category.php начало строки $this->data['products'] = данные

Вот там и формируется массив с товарами.

Если стоит filterpro тогда надо смотреть в controller/module/filterpro.php

Дмитрий 24.05.2017

Добрый день. Для версии 2.3 нет аналогичного решения?

Ответ for-opencart.com 24.05.2017

Добрый! А какие проблемы с 2.3 Просто тот же код, но вместо $this->data['variable'] надо заменить на  $data['variable'] .

German 10.07.2017

Добрый день! А если мне необходимо в статью вставить 3-5 картинок, и что б они увеличивались при клике - например, так же, как и доп.картинки в карточке товара.

Ответ for-opencart.com 10.07.2017

Добрый день! По аналогии как и в товаре сделайте да и все.

Alex 26.07.2017

Вирсия 2.3 не работает, ошибок никаких не выдает...( $this->data['variable'] надо заменить на $data['variable'] . Ничего подобного в коде не нашел (((

Ответ for-opencart.com 26.07.2017

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

Ярослав 02.09.2017

А если мне нужно вывести только количество дополнительных картинок?

Ответ for-opencart.com 02.09.2017

Если количество, то просто $dop_img = count($results_img); То есть в переменную с фото вставляете только количество и на сайте будет вывод

Виталий 01.10.2017

Если возможность когда много дополнительных фото поместить в карусель?

Ответ for-opencart.com 01.10.2017

Конечно, просто прикрутите какую-то карусель, их очень много на просторах индернета, либо воспользуйтесь каруселью которая уже есть в opencart owl slider

Кира 13.01.2019

Для вывода нескольких изображений - есть такой модуль: https://opencartforum.com/files/file/6593-additional-hover-images-%E2%80%93-dopolnitelnye-izobrazheniya-pri-navedenii-kak-na-autoru/

Юра 15.07.2020

Здравствуйте. Использовал Вашу подсказку для вывода дополнительных картинок товара в листинге категории. Вопрос такой - как вывести alt и title для этих картинок. В таблице базы product_image я создал дополнительные столбцы для alt и title. В адмике alt и title (доп.картинок) прекрасно редактируется и добавляется. В карточке товара - alt и title для каждой доп. картинки выводится отлично. Подскажите (а лучше готовый код :)) как вывести alt и title для доп.картинок в листинге категории ? Заранее спасибо.

Ответ for-opencart.com 15.07.2020

Добрый день! Ну смотрите, здесь все по аналогии. Код дать не могу тк не знаю как вы сделали по alt title все. Но по аналогии как с товаром.

опеть Юра 15.07.2020

Я не знаю придёт ли уведомление об ответе. Поэтому, пожалуйста, прошу информируйте меня о наличии решения. Спасибо ещё раз. C уважением Юра.