CMS OpenCart 3.0 переделка стандартного шаблона (8 часть)

Всем привет, в связи с кое-какими проблемами на блоге долгое время не выходили новые статьи по 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

Комментарии

Меню навигации