Во многих интернет магазинах на главной (домашней) странице есть блок с популярными категориями товаров, именно такой блок мы сегодня и сделаем. Сегодня сделаем Популярные категории в стиле минимализм — единый блок с простыми иконками и текстом.
Подбор иконок
Сначала подберём несколько изображений для наших категорий, я для демонстрации сделаю 4 категории. Тематика демо сайта — игровые устройства, поэтому я и подбираю подходящие именно моему магазину изображения:
Открываем ftp менеджер и переходим в папку: ../public_html/image/ и переносим в неё наши изображения. Запоминаем название и формат иконок.
Работаем с кодом
Открываем админку сайта и переходим: Модули/Расширения — Модули/Расширения — Текстовый блок — HTML — Добавить и заполняем:
- Название: Популярные категории
- Статус: Включено
Переключаем блок Текст на редактирование кода (кнопка Источник) и заполняем:
<h3>Популярные категории</h3>
<div class="row my-category">
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="row">
<div class="col-sm-3"><a href="/catalog/katalog/igrovye-myshi"><img class="img-fluid" src="image/mouse.png" /></a></div>
<div class="col-sm-9"><a href="/catalog/katalog/igrovye-myshi">Игровые мышки от ведущих мировых производителей игровых устройств</a></div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="row">
<div class="col-sm-3"><a href="/catalog/katalog/igrovye-klaviatury"><img class="img-fluid" src="image/keyboard.png" /></a></div>
<div class="col-sm-9"><a href="/catalog/katalog/igrovye-klaviatury">Профессиональные клавиатуры с механическими переключателями Cherry MX</a></div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="row">
<div class="col-sm-3"><a href="/catalog/katalog/igrovye-naushniki-s-mikrofonom"><img class="img-fluid" src="image/headphones.png" /></a></div>
<div class="col-sm-9"><a href="/catalog/katalog/igrovye-naushniki-s-mikrofonom">Огромный выбор профессиональных наушников с микрофоном</a></div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="row">
<div class="col-sm-3"><a href="/catalog/katalog/striming"><img class="img-fluid" src="image/web-camera.png" /></a></div>
<div class="col-sm-9"><a href="/catalog/katalog/striming">Различное стриминговое оборудование</a></div>
</div>
</div>
</div>
P.S. — Ссылки и изображения меняем на свои.
Вновь нажимаем кнопку Источник и Сохранить.
Включаем модуль
Переходим в админке: Дизайн — Макеты — Главная/Home — Редактировать — Низ страницы — Добавить — Популярные категории — Сохранить.
Работаем со стилями
Заходим на ftp и открываем файл: ../public_html/catalog/view/stylesheet/stylesheet.css и в конец файла вставляем эти строки:
/* my-category v1 */
.my-category {
padding: 20px;
margin: 20px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
.my-category a {
color: #000;
}
.my-category a:hover {
color: #019fdf;
}
Чистим все кеши и смотрим результат.
Демонстрационный сайт: demo.moushe.ru (демо сайт обновляется вместе с выходом новых статей).
На этом всё, встретимся в следующей статье.
