Всем привет, продолжи работать с популярными категориями нашего интернет магазина созданного на CMS OpenCart 4, в этот раз мы выведем преимущества в 3 колонки и запретим их вывод на устройствах с низким разрешением экрана.
1. Подберём изображения, я как и всегда беру картинки с фотостока freepik.com, для примера вполне подойдут эти фотографии:
2. Заходим на FTP и открываем: ../public_html/image/catalog/popular/ и перенесём в эту папку наши изображения.
P.S. — папку popular мы создавали в прошлой статье по популярным категориям.
3. Откроем админку и переходим: Модули / Расширения > Модули / Расширения > Текстовый блок — HTML > Добавить и заполняем:
- Название модуля: Популярные категории (3 вариант)
- Статус: Включено
Блок Текст переключаем на Источник и вставляем этот код:
<div class="d-none d-lg-block">
<div class="row popular-v3">
<div class="col-lg-3"><a href="ваша ссылка"><img class="img-fluid" src="image/catalog/popular/chair.jpg" /></a></div>
<div class="col-lg-6"><a href="ваша ссылка"><img class="img-fluid" src="image/catalog/popular/keyboard.jpg" /></a></div>
<div class="col-lg-3"><a href="ваша ссылка"><img class="img-fluid" src="image/catalog/popular/speakers.jpg" /></a></div>
</div>
</div>
P.S. — В отличии от прошлых Популярных категорий эти будут показываться только на устройствах с высоким разрешением экрана.
Вновь нажимаем кнопку Источник и кнопку Сохранить.
4. Переходим в админке: Дизайн > Макеты > Главная / Home > Редактировать > Верх страницы > Добавить > Популярные категории (3 вариант) > Сохранить и смотрим результат:
Из-за различного разрешения изображений наши фотографии идут некрасивой ступенькой, необходимо ограничить максимальную высоту изображений в css файле, этим мы с вами сейчас и займёмся.
5. Заходим на ftp и переходим: ../public_html/catalog/view/stylesheet/stylesheet.css и в конец файла добавим эти строки:
/* my-category-v3 */
.popular-v3 {
padding-bottom: 30px;
}
.popular-v3 img {
height: 100%;
overflow: hidden;
}
Чистим кеши, смотрим результат:
При желании ссылкам-изображениям можно добавить надписи и эффекты при наведении курсором мыши на изображения (увеличение изображение, затемнение и т.д.), если вам это нужно, напишите комментарий.
Демонстрационный сайт: demo.moushe.ru (демо сайт обновляется вместе с выходом новых статей).
На сегодня всё, встретимся в следующих статьях.
