Всем привет, в связи с кое-какими проблемами на блоге долгое время не выходили новые статьи по CMS OpenCart, ну что ж, будем по тихоньку исправляться, сегодня мы с вами выведем на витрину нашего магазина блок с популярными категориями нашего интернет магазина.
Список задач на сегодня:
1. Работаем с изображениями
2. Работаем с HTML модулем
3. Выводим Популярные категории на главную страницу
4. Добавляем CSS стили
Приступим:
1. Находим подходящие изображения, для примера я использую вот такие:
Я немного поработал над изображениями (привёл к одному размеру 300*300 и для уменьшения веса оптимизировал изображения для веб).
Переходим на наш сайт с помощью файлового менеджера и переходим в папку ../image/catalog/ и копируем в неё наши изображения.
2. Откроем админку вашего сайта и переходим: Модули/Расширения > Модули/Расширения > Тестовый блок — HTML > Добавить и заполняем:
Название модуля: Популярные категории
Заголовок: Не заполняем
Текст переключаем на редактирование кода (code view, иконка </>) и вставляем в него вот такой код:
<h3>Популярные категории</h3> <div class="row popular-category"> <div class="col-sm-3"><a href="katalog/component/mouse"><img src="image/catalog/headphones.png" class="img-responsive">Игровые наушники</a></div> <div class="col-sm-3"><a href="katalog/component/mouse"><img src="image/catalog/keyboard.png" class="img-responsive">Игровые клавиатуры</a></div> <div class="col-sm-3"><a href="katalog/component/mouse"><img src="image/catalog/mouse.png" class="img-responsive">Игровые мыши</a></div> <div class="col-sm-3"><a href="katalog/component/mouse"><img src="image/catalog/mousepad.jpg" class="img-responsive">Игровые коврики</a></div> </div>
Вновь нажимаем кнопку редактирование кода.
Статус: Включено
Нажимаем кнопку Сохранить.
3. Заходим в админку и переходим: Дизайн > Макеты > Главная / Home > Редактировать > Верх страницы > Популярные категории > Добавить > Сохранить.
Переходим на витрину нашего сайта, смотрим результат, при необходимости редактируем изображения.
4. Заходим на сайт через файловый менеджер и переходим: ../catalog/view/theme/default/stylesheet/stylesheet.css и добавим в конец файла вот эти строки:
.popular-category {
padding: 20px 0;
text-align: center;
text-transform: uppercase;
}
.popular-category a {
font-size: 15px;
color: #000;
}
.popular-category a:hover {
filter: grayscale(100%);
}
P.S. — мы просто добавляем отступы для модуля с верху и снизу, оформим текст и выделяем изображение-ссылку серой заливкой (при наведении курсором мыши картинка становится черно-белой).
Чистим все кеши и смотрим результат нашей работы, На сегодня всё, до новых встреч.
Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru
