admin Опубликовано 12 марта, 2022 Поделиться Опубликовано 12 марта, 2022 Бывают случаи, когда в списке товаров нужно кроме основного изображения вывести и дополнительные. Например, интернет-магазин фейерверков. Бывают случаи, когда в списке товаров нужно кроме основного изображения вывести и дополнительные. Например, интернет-магазин фейерверков. Основное изображение будет упаковка товара, однако покупателю нужно посмотреть как тот или иной салют выглядит в действии. В 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; } С помощью данной доработки мы делаем возможность увеличения дополнительных фотографий при наведении. 0 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.