Выведем на главной странице лучшие opencart товары.
Это секция, в которой администратор магазина считает вывести популярные товары и добавляет самостоятельно.
Перейдем в административную панель и в меню модули расширения выберем модули.
Находим элемент в модуле товаров рекомендуемые, нажимаем редактировать.
В поле ширина и высота установим 360 пикселей.
Добавим вывод нового модуля товаров на главную страницу магазина в меню макет.
Содержание статьи
Добавим в opencart карточку товара.
Заведем один товар в систему opencart, чтобы добавить его в модуль товаров популярные.
Заходим в меню товары нажимаем добавить новый.
В поле название товара пишем полное название, это заголовок первого уровня, который влияет на seo продвижение в поисковой системе.
Так как у нас установлен важный модуль autourl.ocmod.xml, то мета тег title пропишется автоматически и в поле seo url появится правильная запись, которая также сильно влияет на продвижение товара в топ по низкочастотному запросу.
Этот запрос есть название товара, его модель, характеристики, которые ищет пользователь, чтобы купить.
В поле описание товара добавляем seo текст от 500 символов минимум, в тексте должны быть учтены все lsi слова.
Также текст должен быть релевантным.
В поле описание пишем два предложения с названием товара.
Перейдем в поле данные и добавим артикул.
В рекламной кампании для магазина, можно использовать запрос с артикулом для уменьшения рекламного бюджета.
Установим вычитать со склада нет.
В поле атрибуты товара добавляем все характеристики и свойства товара.
У карточки товара в opencart есть поля скидка, акция и бонусы, это система хорошо влияет на продажи, если правильно настроить.
Последние поле это изображение, добавим к каждому товару по пять картинок, чтобы была галерея.
Стилизуем вывод товаров в модуле популярные.
- У идентификатора #content, сделаем вывод заголовка по центру.
- Отступ делаем margin-bottom: 20px.
- Оставим только кнопку купить для вывода, у класса и button-group делаем для дочернего &:first-child свойство display: block
- Добавим вторую кнопку купить в один клик.
- Делаем рамку для карточки товара при наведении border: 1px solid #b641b0.
- Если добавим акцию у карточки товара, то появится вторая цена новая. Чтобы старая цена price-old была зачеркнута воспользуемся свойством text-decoration: line-through.
- Стилизуем кнопку купить и вторую купить в один клик.
Код в stylesheet.sass.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
.product-layout .price font-size: 1em .price-old font-size: 0.8em text-decoration: line-through > .product-thumb padding: 40px 0 0 text-align: center margin-bottom: 40px .image padding: 0 25px > a display: block img display: inline-block &:hover border: 1px solid #b641b0 .caption padding: 0 25px p display: none &.price display: block margin-bottom: 20px .price-tax display: none .rating display: none h4 margin-top: 25px margin-bottom: 10px a color: #333 font-size: 1.2em &:hover, &:focus text-decoration: none .button-group > * display: none &:first-child display: block &.toclick display: block .button-group margin-top: 15px button, .button &.toclick border-radius: 40px font-size: 1.2em color: #fff background-color: #b641b0 padding: 10px 0 &:hover, &:focus background-color: #fff color: #000 border: none border-radius: 40px background-color: #1f62e9 color: #fff width: 100% padding: 10px 0 font-size: 1.2em transition: background-color .25s ease &:hover, &:focus box-shadow: 0 0 50px rgba(126,114,164,0.8) background-color: blue text-decoration: none .fa display: none |
Выводим карточки товара одинакового размера на главной странице.
Установим плагин в gulp командой bower I equalheights.
После установки файл будет лежать в папке libs, можно скачать этот плагин вручную из интернета.
Теперь подключим плагин к проекту в файле header.tpl.
Создадим скрипт myscript.js в новой папке js для opencart, в который будем писать любые функции.
Подключаем equalheights к проекту в файле myscript.j.
Карточки товаров в opencart получаются разного размера из-за названия товара.
Для этого у класса вывода названия product-thumb h4 сбросим высоту css (height, пустые кавычки) и применим equalHeights ().
Теперь все элементы стали одинаковой высоты.
Код в myscript.j.
1 2 3 |
$(function() { $('.product-thumb h4').css('height', '').equalHeights(); }); |