Популярные категории на CMS OpenCart 4.0. (2 вариант)

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

1. Подбираем подходящие изображения в png формате с прозрачной подложкой, в моём случае это (размеры 400px x 400px):

Для примера эти изображения вполне подойдут.

2. Заходим к себе на ftp и переходим: ../public_html/image/catalog, создадим папку popular и загрузим в неё наши изображения.

3. Заходим в админку нашего сайта и переходим: Модули/Расширения > Модули/Расширения > Текстовый блок — HTML > Добавить и заполняем:

Название модуля — Популярные категории (2 вариант)
Статус: Включено

В блоке текст нажимаем кнопку Источник и вставляем этот код:

<div class="row popular">
<div class="col-sm-12 col-md-6 col-lg-3 popular-1">
<div class="col"><a href="ваша ссылка">Системные блоки</a></div>
<div class="col"><a href="ваша ссылка"><img class="img-fluid" src="image/catalog/popular/pc.png" /></a></div>
</div>

<div class="col-sm-12 col-md-6 col-lg-3 popular-2">
<div class="col"><a href="ваша ссылка">Игровые мыши</a></div>
<div class="col"><a href="ваша ссылка"><img class="img-fluid" src="image/catalog/popular/mouse.png" /></a></div>
</div>

<div class="col-sm-12 col-md-6 col-lg-3 popular-3">
<div class="col"><a href="ваша ссылка">Игровые наушники</a></div>
<div class="col"><a href="ваша ссылка"><img class="img-fluid" src="image/catalog/popular/headset.png" /></a></div>
</div>

<div class="col-sm-12 col-md-6 col-lg-3 popular-4">
<div class="col"><a href="ваша ссылка">Коврики для игровых мышек</a></div>
<div class="col"><a href="ваша ссылка"><img class="img-fluid" src="image/catalog/popular/mousepad.png" /></a></div>
</div>
</div>

Нажимаем кнопку Источник и кнопку Сохранить.

P.S. — Да код не самый красивый, используется много лишних дивов, но встроенный в движок CKEditor до сих пор не позволяет завернуть див в ссылку и самостоятельно меняет див и ссылку местами. Проблема старая, проблема не решённая. 🙁

Возможно этот косяк авто-правки строчных и блочных элементов когда то исправят…

4. Переходим в админке: Дизайн > Макеты > Главная / Home > Редактировать > Верх страницы > Добавить и выбираем наш новый модуль, после этого нажимаем кнопку Сохранить.

5. Заходим на ftp и открываем файл: ../public_html/catalog/view/stylesheet/stylesheet.css и в конец файла вставляем эти строки:

/* my-category v2 */
.popular {
    padding: 0 0 30px 0;
    margin:0;
    text-align: center;
}
.popular img {
    height: 320px;
}
.popular a {
    display: inline-block;
    width: 100%;
}
.popular-link a {
    color: #fff;
    padding-top: 10px;
    text-transform: uppercase;
    display:inline-block;
}
.popular div:hover {
    opacity: 0.9;
    background-color: #fff;
}
.popular div:hover a {
    color: #000;
}
.popular-1 {
    background: #2196F3;
}
.popular-2 {
    background: #9C27B0;
}
.popular-3 {
    background: #FF9800;
}
.popular-4 {
    background: #FF5722;
}

Чистим все кеши и смотрим результат: