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

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

  1. TopicStarter Overlay
    Offline

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

    Сообщения:
    2.681
    Симпатии:
    122.397
    Репутация:
    215
    Всем привет, недавно меня попросили рассказать о том как сделать преимущества магазина с выводом: текст слева, картинка справа, если просите – делаем.

    preim-2v-02.jpg

    Список задач на сегодня:
    1. Работаем с HTML модулем
    2. Работаем с CSS
    Приступим:

    1. Переходим: Админка –> Модули/Расширения –> Модули/Расширения –> Текстовый блок – HTML –> Добавить и заполняем:
    • Название модуля: Преимущества 2 вариант
    • Заголовок: Наши преимущества 2 вариант (вы сами подберите название, я дал такое просто для примера)
    • Статус: Включено
    В блоке текст переключаемся на Просмотр кода (Code View – </>) и вставляем этот код:

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

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

    Админка –> Дизайн –> Макеты –> Home –> Редактировать и заполняем:

    Верх страницы: Преимущества магазина 2 вариант –> Добавить –> Сохранить.

    Переходим на витрину магазина и смотрим что же у нас с вами получилось:

    preim-2v-01.jpg

    Выглядит не очень, поэтому немного поработаем над оформлением (CSS стилями).

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

    Код:
    .preimushestva-2 .product-thumb {
    padding: 10px 0;
    }
    .preimushestva-2 .product-thumb .pull-left {
    padding-top: 7%;
    }
    @media (max-width: 768px) {
    .preimushestva-2 .product-thumb .pull-left {
    max-width: 180px;
    padding-top: 0px;
    }
    .preimushestva-2 .img-responsive {
    max-width: 50px;
    }
    }
    Чистим кеш браузера и смотрим результат:

    preim-2v-02.jpg
    Как видим преимущества занимают меньше места и выглядят вполне симпатично и информативно.

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