Opencart 3.x - Выводим Преимущества Магазина (1 Вариант)

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

  1. TopicStarter Overlay
    Offline

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

    Сообщения:
    2.733
    Симпатии:
    130.115
    Репутация:
    215
    Всем привет, я уже делал статью по выводу блоков с преимуществами магазина для OpenCart 2.3, но недавно меня попросили сделать тоже самое для новой версии движка, раз просите – делаю.
    opencart-3-0-preim-02.jpg
    Список задач на сегодня:
    1. Подбираем преимущества магазина
    2. Подбираем картинки для преимуществ
    3. Закидываем иконки на сайт (FTP)
    4. Работаем с модулем: Текстовый блок – HTML
    5. Выводим преимущества на главную страницу сайта
    6. Работаем с файлом стилей (CSS)
    Приступим:

    1. Сначала подбираем своему магазину преимущества, в идеале указывать уникальные преимущества отличающие ваш магазин и вашу фирму от конкурентов, но для примера я возьму стандартные:
    • Большой ассортимент
    • Опытные продавцы
    • Скидки постоянным клиентам
    • Различные способы оплаты
    2. Теперь подберём на фотостоках иконки, обычно я пользуюсь этим сайтом: www.flaticon.com, для примера я выбрал вот такие иконки:
    2018-06-24_120308.png
    3. Заходим на хостинг через ftp менеджер и переходим в эту папку: ../public_html/image/ и забрасываем в неё наши иконки (при желании вы можете создать дополнительную папку для этих изображений, но тогда ваши ссылки к изображениям будут чуть-чуть отличаться от ссылок в моей статье), запоминаем названия своих иконок – они вам понадобятся. В моём случае это:
    • point-of-service.png
    • piggy-bank.png
    • customer-service.png
    • online-shop.png
    4. Заходим в админку вашего магазина и переходим:

    Админка –> Модули / Расширения –> Модули / Расширения –> Текстовый блок – HTML –> Активировать –> Редактировать и заполняем:

    Название модуля: Преимущества

    Заголовок: Наши преимущества

    Статус: Включено

    Текст –> просмотр кода (Code View, иконка </>) и заполняем:

    Код:
    <div class="row preim">
    <div class="product-layout col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <div class="product-thumb transition">
    <div class="image"><img src="image/point-of-service.png"></div>
    <div class="caption">Различные способы оплаты</div>
    </div>
    </div>
    <div class="product-layout col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <div class="product-thumb transition">
    <div class="image"><img src="image/online-shop.png"></div>
    <div class="caption">Большой ассортимент</div>
    </div>
    </div>
    <div class="product-layout col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <div class="product-thumb transition">
    <div class="image"><img src="image/customer-service.png"></div>
    <div class="caption">Опытные продавцы</div>
    </div>
    </div>
    <div class="product-layout col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <div class="product-thumb transition">
    <div class="image"><img src="image/piggy-bank.png"></div>
    <div class="caption">Скидки постоянным клиентам</div>
    </div>
    </div>
    </div>
    После вставки нашего кода вновь нажимаем иконку </> и только после этого нажимаем кнопку Сохранить (иначе результат вашей работы не сохранится).

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

    Админка –> Дизайн –> Макеты –> Home –> Редактировать –> Верх страницы –> Добавить –> Преимущества –> Сохранить

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

    opencart-3-0-preim-01.jpg

    6. Заходим на ftp и переходим: ../public_html/catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавляем этот код:

    Код:
    .preim img {
    padding: 10px 0;
    }
    .preim .caption {
    min-height: 50px;
    text-align: center;
    font-size: 15px;
    }
    Обязательно чистим кеш браузера и смотрим что у нас получилось:
    opencart-3-0-preim-02.jpg
    (P.S.При желании можно поработать со стилями и оформить преимущества покрасивее)

    Как видим всё отлично, на сегодня всё, до скорой встречи в новых статьях.
     
    tekeevth нравится это.