категория: , Дорабатываем
✎ Опубликовано: 31.05.2015 ✎ Обновлено: 12.06.2015 ☕ Просмотров: 13227 ✉ Комментарии: 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; }
С помощью данной доработки мы делаем возможность увеличения дополнительных фотографий при наведении.
Почему нет? Обертываем наши дополнительные изображения ссылкой, то есть вместо вывода изображений выводим:
<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>
И последним шагом - подгоняем стили под требования!
Часто бывает, что продаваемый товар в интернет магазине не нуждается в отдельной странице. Вот как, например, гвозди. Им не надо отдельная страница
В стандартном функционале Opencart после заказа покупателю приходит письмо на почту с данными заказа. С коробки письмо достаточно информативное
В стандартной реализации Opencart не предусмотрен вывод производителя товара в категории, но в некоторых ситуациях он просто необходим.
В Opencart есть возможность закачки файлов через админку. Однако сделано это очень неудобно и дает возможность скачивать файл только с личного кабинета покупателя
В CMS Opencart очень много есть преимуществ перед аналогами. Однако эта система имеет и свои недостатки. Самым серьезным из которых, как я считаю, являются – дубли страниц.
В одном из проектов интернет-магазина керамики заказчик захотел видеть в функционале магазина «Вывод коллекций плитки определенного производителя».
Как прикрепить файлы к товару, что бы была возможность их скачивания без покупки. Например инструкции или драйвера. Есть модуль!
Читая информацию о рекламе в facebook я нашел кое что интересное
Чистый и валидный HTML и CSS код, Хорошие показатели Google Page Speed, Более 20 модулей в комплекте, Профессиональная техническая поддержка - это только часть того что есть в шаблоне
Исправляем странный баг в Opencart в удаляется товар при копировании. Этот баг присутствует в google chrome
Также в статье хочу выразить благодарность не только Виталию а и другим крутым авторам дополнений с кем приходилось иметь дело
Чтобы принимать Биткоин и Лайткоин в OpenCart, вам не нужно заполнять утомительные документы, проходить проверку и ждать несколько дней. Установите бесплатный модуль и просто введите адрес своего Биткоин и/или Лайткоин кошелька. Тогда все входящие платежи
Монобанк - прогрессивный банк без отделений в котором дают кредитные карточки с хорошим грейс периодом а также возможностью заработать открыв в нем депозит. Именно о нем и пойдет речь
Мы знаем что поисковые роботы любят текст на страницах. Однако публикуя тексты помните предназначена ли эта страница для такого текста
Небольшой пример как можно сделать автоматически содержание описания со скролом при клике на заголовок
Обзор платежного шлюза fondy который позволяет сделать онлайн оплату на сайте за любые товары или услуги
Как оптимизировать сайт для google page speed - обзор основного функционала сервиса от гугл для проверки скорости загрузки страницы
Для того что бы вывести кастомную информацию не надо много кода. Достаточно применить правильный подход и пару строк кода. Читаем в статье.
Как мне "посчастливилось" пощупать UMI CMS особенно со стороны переноса данных и почему меня до сих пор тошнит при слове UMI
В этом обзоре будут выявлены все плюсы и минусы каждого фильтра. Всего в обзоре будет 7 фильтров который продаются и развиваются. По завершению будет дана рекомендация какой же выбрать
Коллеги, давайте предоставлять хороший сервис и поднимать планку качества. Небольшая история как я обращался к разным разработчикам