Лидеры

Для различных типов товаров часто возникает необходимость вывести товары в рекомендуемые автоматически, по определённому критерию. Нередко товары группируются по коллекциям, но штатными средствами OpenCart нет возможности их корректно объединить и добавить автоматически друг к другу как рекомендуемые товары. Эта небольшая доработка позволяет без дополнительных модулей реализовать вывод товаров коллекции в рекомендуемые автоматически, и избавляет вас от необходимости добавлять каждый товар друг к другу вручную. Данная доработка не затрагивает шаблоны, поэтому подходит для любой версии движка и сборки. Для примера рассматривается вариант объединения в коллекции по совпадению поля EAN. По принципу - если поле EAN не пустое, то выводим такие товары в рекомендуемые. В файле catalog/controller/product/product.php Находим строку: $results = $this->model_catalog_product->getProductRelated($this->request->get['product_id']); И заменяем её на это: $results = $this->model_catalog_product->getProductRelatedCollection($product_info); В файле catalog/model/catalog/product.php Перед строкой: public function getProductRelated($product_id) { Добавляем: public function getProductRelatedCollection($product) { // Поле товара, по которому идёт выборка коллекции $collection_field = 'ean'; $product_data = array(); if (!empty($product[$collection_field])) { $query = $this->db->query("SELECT product_id FROM " . DB_PREFIX . "product WHERE product_id != '" . (int)$product['product_id'] . "' AND status = '1' AND `" . $this->db->escape($collection_field) . "` LIKE '" . $this->db->escape($product[$collection_field]) . "' ORDER BY sort_order"); foreach ($query->rows as $result) { $product_data[$result['product_id']] = $this->getProduct($result['product_id']); } } return $product_data; } Если нужно выбирать товары только того же производителя, то функция должна выглядеть так: public function getProductRelatedCollection($product) { // Поле товара, по которому идёт выборка коллекции $collection_field = 'ean'; $product_data = array(); if (!empty($product[$collection_field])) { $query = $this->db->query("SELECT product_id FROM " . DB_PREFIX . "product WHERE product_id != '" . (int)$product['product_id'] . "' AND status = '1' AND manufacturer_id = '" . (int)$product['manufacturer_id'] . "' AND `" . $this->db->escape($collection_field) . "` LIKE '" . $this->db->escape($product[$collection_field]) . "' ORDER BY sort_order"); foreach ($query->rows as $result) { $product_data[$result['product_id']] = $this->getProduct($result['product_id']); } } return $product_data; } Если у вас много товаров, то стоит зайти в phpMyAdmin и добавить индекс для поля EAN. Это ускорит выборку товаров для коллекции. Добавить индекс можно таким запросом: ALTER TABLE `oc_product` ADD INDEX `ean` (`ean`) Обратите внимание на префикс 'oc_', он у вас может отличаться или отсутствовать.

При покупке товаров в интернет-магазинах, большинство клиентов изучают товар более подробно, просматривая характеристики и описание, пролистывая при этом карточку товара. И когда после изучения всех необходимых подробностей клиент готов купить товар, кнопка покупки уже находится далеко за пределами экрана, что заставляет совершать покупателя дополнительные действия по поиску данной кнопки, чтобы иметь возможность добавить товар в корзину. Эту задачу своим клиентам вы можете упростить, сделав на странице товара небольшую прилипающую панель с названием товара, ценой и кнопкой добавления в корзину, которая будет появляться при исчезновении стационарной кнопки покупки за пределами экрана. Данное нововведение вполне может повлиять на конверсию для вашего интернет-магазина на OpenCart, конечно же, в сторону её увеличения. Посмотреть готовый пример такой реализации можно по ссылке. Как только кнопка покупки уходит за верхнюю границу экрана, внизу показывается прилипающая панель с необходимыми данными. В данной статье будут описаны основные шаги по созданию такого функционала своими руками. Ссылку на готовый пример в виде модуля для OpenCart3 вы сможете найти в конце статьи. При желании, адаптировать модификатор для других версий OpenCart не составит особого труда. Приступим к созданию. Для начала в файле шаблона catalog/view/theme/default/template/product/product.twig добавим сразу после строки: {{ header }} HTML блок со всеми необходимыми нам данными: <div class="psp-wrap" id="product-sticky-panel"> <div class="container"> <div class="psp-content"> ... </div> </div> </div> Код сокращён для наглядности. Полный исходный код можно посмотреть по ссылке в конце статьи. Теперь нам нужно добавить необходимые стили. Для начала сделаем нашу панель прилипающей. Для этого будем использовать position: sticky (заодно пропишем нужные правила для позиционирования нашей панели) .psp-wrap { position: sticky; top: 0; left: 0; right: 0; z-index: 999; } С такими стилями наша панель будет отображаться всегда, а при скроле будет прилипать к верху экрана. Такая реализация не совсем подходит для поставленной цели. Поэтому скроем нашу панель по умолчанию: .psp-wrap:not(.active) { display: none; } !ВНИМАНИЕ! В исходном коде модуля-примера все стили помещаются в <head> страницы. Если стили будут переноситься в css файл, то стиль скрытия надо обязательно оставить в секции <head>, иначе наша панель будет видна, пока не подгрузится файл стилей, а это увеличит совокупное смещение макета (CLS), что соответственно снизит оценку PageSpeed. Теперь наша панель скрыта. Дело остаётся за небольшим скриптом, который добавит нужный класс active для нашей панели в от момент, когда кнопка покупки спрячется за верхней границей экрана. Задача довольно простая, поэтому её лучше решить без использования jQuery. Для данной задачи нам также не нужно активное отслеживание событий onscroll, поэтому здесь как нельзя лучше подойдёт Intersection Observer API. Подробный разбор скрипта в этой статье не приводится, т.к. в интернете хватает документации и примеров по использованию данного API. Действия по отслеживанию будут выполняться вот таким скриптом: document.addEventListener('DOMContentLoaded', () => { let target = document.querySelector('#button-cart'); let psp = document.querySelector('#product-sticky-panel'); target && psp && new IntersectionObserver(([e]) => psp.classList.toggle('active', e.boundingClientRect.y < 0), { threshold:1.0 }).observe(target); }); Полный код этой несложной модификации можно скачать вот тут: