Opencart 2.x - Html Модуль (2 Часть) – Популярные Категории

Тема в разделе "Модули и дополнения", создана пользователем admin, 12 ноя 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    1.534
    Симпатии:
    15.285
    Репутация:
    114
    Всем привет, в прошлой статье мы с вами научились выводить информационные блоки с преимуществами нашего интернет магазина без использования платных модулей, в этой статье я продолжу рассказывать вам об применении бесплатного html модуля предустановленного в OcStore 2.x (OpenCart 2.x). Сегодня мы с вами выведем на главную страницу нашего магазина блоки с популярными категориями.

    OpenCart-20-2.jpg

    Этот материал разделён на две части, сегодня мы сделаем популярные блоки в минималистическом дизайне, а в следующей части статьи сделаем каждому блоку красивый фон.


    Список задач на сегодня:

    1. Работаем с изображениями

    2. Работаем с админкой

    3. Работаем с CSS

    Приступим:

    1. Подбираем картинки для самых популярных категорий вашего интернет магазина, для примера я возьму вот эти изображения:

    beats.png gamer.png laptop.png sysblock.png

    (формат изображений PNG, фон – прозрачный, размеры 130px x 130px)

    1.1. Закидываем наши картинки в папку image вашего шаблона, в моём случае это стандартный шаблон (default):

    ../catalog/view/theme/default/image/

    (запоминаем название своего шаблона, оно нам скоро понадобится)

    2. Откроем админку и переходим:

    Дополнения > Модули > HTML Содержимое > Редактировать:

    • Название: Популярные категории
    • Заголовок: Популярные категории
    • Статус: Включено
    Описание (переключаемся на исходный код) и начинаем работать:

    Сначала сделаем обёртку блоков:

    Код:
    <div class="row">
    </div>
    теперь добавим четыре колонки:

    Код:
    <div class="row">
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    </div>
    
    </div>
    Теперь в колонки нужно поместить наши картинки:

    Код:
    <div class="row">
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat">
    <img src="/catalog/view/theme/default/image/sysblock.png">
    </div>
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat">
    <img src="/catalog/view/theme/default/image/laptop.png">
    </div>
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat">
    <img src="/catalog/view/theme/default/image/beats.png">
    </div>
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat">
    <img src="/catalog/view/theme/default/image/gamer.png">
    </div>
    </div>
    
    </div>
    Теперь добавим заголовки и ссылки на категории:

    Код:
    <div class="row">
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat">
    <a href="ссылка на категорию"><span>Компьютеры и комплектующие</span>
    <img src="/catalog/view/theme/default/image/sysblock.png">
    </a>
    </div>
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat">
    <a href="ссылка на категорию"><span>Ноутбуки</span>
    <img src="/catalog/view/theme/default/image/laptop.png">
    </a>
    </div>
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat">
    <a href="ссылка на категорию"><span>Наушники и гарнитуры</span>
    <img src="/catalog/view/theme/default/image/beats.png">
    </a>
    </div>
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat">
    <a href="ссылка на категорию"><span>Игровые устройства</span>
    <img src="/catalog/view/theme/default/image/gamer.png">
    </a>
    </div>
    </div>
    
    </div>
    (вместо ссылка на категорию прописываем чпу юрл нужных вам категорий)

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

    2.1. Теперь нам необходимо вывести наш новый модуль на главную страницу витрины, переходим:

    Админка > Дизайн > Схемы > Главная > Редактировать > Добавить модуль:

    • Модуль: HTML содержимое > Популярные категории
    • Расположение: Вверху страницы
    • Порядок сортировки: 3
    Нажимаем кнопку Сохранить.

    Проверка:

    2016-11-12_202657.png

    3. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вставим в него эти строки (можно в самый конец файла):

    Код:
    /* popular category */
    .pop_cat {
    border: 1px solid #ddd;
    text-align: center;
    padding: 10px 0;
    border-radius: 3px;
    }
    .pop_cat:hover {
    border: 1px solid #23527c;
    }
    .pop_cat span {
    display: block;
    padding-bottom: 10px;
    }
    .pop_cat img {
    display: block;
    margin: 0 auto;
    }
    Результат:

    2016-11-12_202719.png

    Надеюсь статья была вам полезна.

    На сегодня всё, следите за нашими новостями и до новых встреч.