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

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

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

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

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

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

В 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

Быстрый поиск

Похожее

  • Выбор опций в списке товаров

    Часто бывает, что продаваемый товар в интернет магазине не нуждается в отдельной странице. Вот как, например, гвозди. Им не надо отдельная страница

  • Дополнительные поля в письме покупателю

    В стандартном функционале Opencart после заказа покупателю приходит письмо на почту с данными заказа. С коробки письмо достаточно информативное

  • Вывод логотипа производителя товара в категории

    В стандартной реализации Opencart не предусмотрен вывод производителя товара в категории, но в некоторых ситуациях он просто необходим.

  • Добавление файла к товару

    В Opencart есть возможность закачки файлов через админку. Однако сделано это очень неудобно и дает возможность скачивать файл только с личного кабинета покупателя

  • Удаляем дубли страниц в Opencart

    В CMS Opencart очень много есть преимуществ перед аналогами. Однако эта система имеет и свои недостатки. Самым серьезным из которых, как я считаю, являются – дубли страниц.

  • Категории производителя

    В одном из проектов интернет-магазина керамики заказчик захотел видеть в функционале магазина «Вывод коллекций плитки определенного производителя».

  • Opencart прикрепить файлы к товару

    Как прикрепить файлы к товару, что бы была возможность их скачивания без покупки. Например инструкции или драйвера. Есть модуль!

Новое на сайте