Opencart 2.x - Делаем Рекомендуемые Категории (html Модуль)

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

  1. TopicStarter Overlay
    Offline

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

    Сообщения:
    2.642
    Симпатии:
    118.321
    Репутация:
    210
    Всем привет, в этой статье мы с вами сделаем рекомендуемые категории интернет магазина используя стандартный html модуль.

    2017-07-21_201030.png

    Список задач на сегодня:
    • 1. Подготавливаем картинки
    • 2. Работаем с html модулем
    • 3. Выводим наши Рекомендуемые категории на главную страницу сайта
    • 4. Работаем с CSS стилями
    Приступим:

    1. Находим в интернете несколько подходящих нам картинок:

    2017-07-21_201039.png 2017-07-21_201048.png 2017-07-21_201055.png 2017-07-21_201103.png

    Я отредактировал размер фотографий, добавил им внешнее свечение и вот что у нас получилось:

    2017-07-21_201110.png 2017-07-21_201117.png 2017-07-21_201124.png 2017-07-21_201131.png

    названия и расширение моих картинок:
    • headset.png
    • keyboard.png
    • mouse.png
    • mousemat.png
    у вас они будут иными, запомните их (когда будем прописывать пути к изображениям в html модуле, вам будут нужны названия ваших картинок)

    P.S. – Рекомендую использовать картинки в формате .png с прозрачным фоном – это сильно упростит вашу работу

    Теперь заходим на фтп и в этой папке:

    /image

    создадим новую подпапку category, вот какой путь к файлам (в Filezilla и т.д.) получится в итоге:

    ../public_html/image/category

    и переместим в неё наши картинки. На этом первый шаг окончен, переходим ко второму.

    2. Открываем админку нашего магазина и переходим:

    Админка > Дополнения > Дополнения > HTML Содержимое > Установить > Редактировать

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

    Код:
    <div class="row pop-cat-all">
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pop-cat-1">
    <div class="image"><a href="gamer-headsets" alt="Игровые наушники" title="Игровые наушники" class="img-responsive"><img src="image/category/headset.png"></a></div>
    <h4><a href="gamer-headsets">Игровые наушники</a></h4>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pop-cat-2">
    <div class="image"><a href="gamerkeyboard" alt="Игровые клавиатуры" title="Игровые клавиатуры" class="img-responsive"><img src="image/category/keyboard.png"></a></div>
    <h4><a href="gamerkeyboard">Игровые клавиатуры</a></h4>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pop-cat-3">
    <div class="image"><a href="gamer-mouses" alt="Игровые мыши" title="Игровые мыши" class="img-responsive"><img src="image/category/mouse.png"></a></div>
    <h4><a href="gamer-mouses">Игровые мыши</a></h4>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pop-cat-4">
    <div class="image"><a href="gamer-pads" alt="Игровые ковры" title="Игровые ковры" class="img-responsive"><img src="image/category/mousemat.png"></a></div>
    <h4><a href="gamer-pads">Игровые ковры</a></h4>
    </div>
    </div>
    после заполнения вновь нажимаем иконку Исходный код (иначе бывает глюк в результате которого вбитый код не сохраняется) и нажимаем кнопку Сохранить.

    В нашем коде нет ничего сложного, просто указываем SEO URL ваших категорий вместо моих:
    • gamer-headsets
    • gamerkeyboard
    • gamer-mouses
    • gamer-pads
    прописываем свои картинки вместо моих:
    • image/category/headset.png
    • image/category/keyboard.png
    • image/category/mouse.png
    • image/category/mousemat.png
    и заполним alt, title и название категории в ссылке своими.

    P.S. – В заголовок можно вставить иконку с http://fontawesome.io/icons/ (собственно я это и сделал)

    3. Заходим в админку и переходим:

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

    настраиваем:

    Вверху страницы > Популярные категории > Добавить модуль > Сохранить

    4. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки:

    Код:
    /* popular category */
    .pop-cat-all {
    margin: 10px 0;
    }
    .pop-cat-1, .pop-cat-2, .pop-cat-3, .pop-cat-4 {
    text-align: center;
    min-height: 256px;
    padding: 0;
    }
    .pop-cat-1 h4 a, .pop-cat-2 h4 a, .pop-cat-3 h4 a, .pop-cat-4 h4 a {
    color: #fff;
    max-width: 100%;
    padding: 10px;
    }
    .pop-cat-1 img, .pop-cat-2 img, .pop-cat-3 img, .pop-cat-4 img {
    padding-top: 20px;
    }
    .pop-cat-1:hover img, .pop-cat-2:hover img, .pop-cat-3:hover img, .pop-cat-4:hover img {
    margin-top: -2px;
    }
    .pop-cat-1 {
    background: #FFEB3B;
    background-image: linear-gradient(to top,#F57F17 0%,#FFEB3B 100%);
    }
    .pop-cat-2 {
    background: #3F51B5;
    background-image: linear-gradient(to top,#1A237E 0%,#3F51B5 100%);
    }
    .pop-cat-3 {
    background: #FF5722;
    background-image: linear-gradient(to top,#BF360C 0%,#FF5722 100%);
    }
    .pop-cat-4 {
    background: #4CAF50;
    background-image: linear-gradient(to top,#1B5E20 0%,#4CAF50 100%);
    }
    На сегодня всё, следите за нашими новостями и до новых встреч.