Бывают случаи, когда в списке товаров нужно кроме основного изображения вывести и дополнительные. Например, интернет-магазин фейерверков. Основное изображение будет упаковка товара, однако покупателю нужно посмотреть как тот или иной салют выглядит в действии.
В 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 Находим строки:
И в любом удобном месте вставляем цикл вывода дополнительных фото:
Ну а дальше дело за малым, поставить нужные нам стили, например:
.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; } С помощью данной доработки мы делаем возможность увеличения дополнительных фотографий при наведении.
