opencart товары с помощью модуля популярные карточки товара

Выведем на главной странице лучшие opencart товары.

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

Перейдем в административную панель и в меню модули расширения выберем модули.

Находим элемент в модуле товаров рекомендуемые, нажимаем редактировать.

В поле ширина и высота установим 360 пикселей.

Добавим вывод нового модуля товаров на главную страницу магазина в меню макет.

Добавим в opencart карточку товара.

Заведем один товар в систему opencart, чтобы добавить его в модуль товаров популярные.

Заходим в меню товары нажимаем добавить новый.

В поле название товара пишем полное название, это заголовок первого уровня, который влияет на seo продвижение в поисковой системе.

Так как у нас установлен важный модуль autourl.ocmod.xml, то мета тег title пропишется автоматически и в поле seo url появится правильная запись, которая также сильно влияет на продвижение товара в топ по низкочастотному запросу.

Этот запрос есть название товара, его модель, характеристики, которые ищет пользователь, чтобы купить.

В поле описание товара добавляем seo текст от 500 символов минимум, в тексте должны быть учтены все lsi слова.

Также текст должен быть релевантным.

В поле описание пишем два предложения с названием товара.

Перейдем в поле данные и добавим артикул.

В рекламной кампании для магазина, можно использовать запрос с артикулом для уменьшения рекламного бюджета.

Установим вычитать со склада нет.

В поле атрибуты товара добавляем все характеристики и свойства товара.

У карточки товара в opencart есть поля скидка, акция и бонусы, это система хорошо влияет на продажи, если правильно настроить.

Последние поле это изображение, добавим к каждому товару по пять картинок, чтобы была галерея.

Стилизуем вывод товаров в модуле популярные.

1. У идентификатора #content, сделаем вывод заголовка по центру.
2. Отступ делаем margin-bottom: 20px.
3. Оставим только кнопку купить для вывода, у класса и button-group делаем для дочернего &:first-child свойство display: block
4. Добавим вторую кнопку купить в один клик.
5. Делаем рамку для карточки товара при наведении border: 1px solid #b641b0.
6. Если добавим акцию у карточки товара, то появится вторая цена новая. Чтобы старая цена price-old была зачеркнута воспользуемся свойством text-decoration: line-through.
7. Стилизуем кнопку купить и вторую купить в один клик.

Код в stylesheet.sass.

Выводим карточки товара одинакового размера на главной странице.

Установим плагин в gulp командой bower I equalheights.

После установки файл будет лежать в папке libs, можно скачать этот плагин вручную из интернета.

Теперь подключим плагин к проекту в файле header.tpl.

Создадим скрипт myscript.js в новой папке js для opencart, в который будем писать любые функции.

Подключаем equalheights к проекту в файле myscript.j.

Карточки товаров в opencart получаются разного размера из-за названия товара.

Для этого у класса вывода названия product-thumb h4 сбросим высоту css (height, пустые кавычки) и применим equalHeights ().

Теперь все элементы стали одинаковой высоты.

Код в myscript.j.