Opencart 2.x - Делаем Преимущества Магазина (html Модуль)

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

  1. TopicStarter Overlay
    Offline

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

    Сообщения:
    2.701
    Симпатии:
    125.905
    Репутация:
    215
    Сегодня мы с вами будем делать блок преимуществ нашего магазина над конкурентами, для реализации нам понадобится список который выделяет ваш магазин из массы других, тематические изображения или иконки и стандартный html модуль из OcStore 2.3 (в одной из прошлых статей мы уже работали с ним и реализовали популярные категории товаров).

    2017-08-24_120925.png

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

    1.
    Подбираем список преимуществ
    2. Подбираем изображения
    3. Работаем с админкой магазина
    4. Работаем с файлом стилей

    Приступим:

    1. Преимущества моего магазина:
    • Доставка по Москве от 350 руб.
    • Бесплатный самовывоз заказа
    • Помощь в выборе
    • Наши партнёры
    2. Мои картинки:

    2017-08-24_120935.png 2017-08-24_120945.png 2017-08-24_120953.png 2017-08-24_121002.png

    Создаём в папке картинок (../image) подпапку preim и переносим в неё наши иконки, запоминаем их названия.

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

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

    и заполняем:
    • Название: Наши преимущества
    • Статус: Включено
    • Описание: Исходный код:
    Код:
    <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
    <div class="preim transition">
    <img src="/image/preim/van.png">
    <p>Доставка по Москве от 350 руб.</p>
    </div>
    </div>
    
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
    <div class="preim transition">
    <img src="/image/preim/placeholder.png">
    <p>Бесплатный самовывоз заказа</p>
    </div>
    </div>
    
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
    <div class="preim transition">
    <img src="/image/preim/chat.png">
    <p>Помощь в выборе</p>
    </div>
    </div>
    
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
    <div class="preim transition">
    <img src="/image/preim/network.png">
    <p>Наши партнёры</p>
    </div>
    </div>
    </div>
    P.S. – при необходимости добавляем ссылки

    Переключаемся с исходного кода на обычный и нажимаем кнопку Сохранить.

    3.1. Включаем наш модуль, переходим:

    Админка > Дизайн > Схемы > Главная > Изменить > Вверху страницы > Наши преимущества > Добавить > Сохранить

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

    Код:
    .preim {
    border: 1px solid #ddd;
    text-align: center;
    padding: 10px 0 0;
    }
    .preim p {
    font-size: 14px;
    padding: 10px 0;
    }
    На этом всё, следите за нашими новостями и до новых встреч.
     
    manjul нравится это.