Блок преимуществ на CMS OpenCart 4 (2 вариант)

В прошлой статье я показал вам как можно сделать блок преимуществ на главную страницу вашего интернет магазина созданного на CMS OpenCart 4, он неплохо смотрится, но иногда хочется сделать блок преимуществ покомпактнее (иконка слева, текст справа), поэтому я решил сделать второй вариант блока преимуществ, а вы уж сами выберите какой вариант в вашем случае предпочтительнее.

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

P.S. — Единственное изменение это 3 преимущество, я сократил его заголовок (хочу чтобы все заголовки были в одну строку).

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

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

Название модуля: Преимущества 2 вариант
Статус: Включено

В блоке текст нажимаем первую кнопку Источник и вставляем этот код (адреса картинок используйте свои):

<div class="row preim-block-v2">
  
<div class="col-sm-12 col-md-3">
    <div class="row preim-v2">
        <div class="col-sm-3"><img class="img-fluid" src="/image/delivery.png" /></div>
        <div class="col-sm-9">
            <p class="big">Бесплатная доставка</p>
            <p class="small">оперативная доставка любых заказов по России и странам СНГ</p>
        </div>
    </div>
</div>

<div class="col-sm-12 col-md-3">
    <div class="row preim-v2">  
  		<div class="col-sm-3"><img class="img-fluid" src="/image/discount.png" /></div>
        <div class="col-sm-9">
            <p class="big">Бонусная программа</p>
 			<p class="small">начисляем бонусы за каждый ваш заказ, с помощью бонусов можно частично оплатить следующие заказы</p>
        </div>
    </div>
</div>

<div class="col-sm-12 col-md-3">
    <div class="row preim-v2">  
    	<div class="col-sm-3"><img class="img-fluid" src="/image/cart.png" /></div>
    	<div class="col-sm-9">
            <p class="big">Доступные цены</p>
            <p class="small">работаем с ведущими производителями напрямую, без участия посредников</p>
      	</div>
    </div>
</div>

<div class="col-sm-12 col-md-3">
    <div class="row preim-v2">  
    	<div class="col-sm-3"><img class="img-fluid" src="/image/support.png" /></div>
    	<div class="col-sm-9">
            <p class="big">Клиентоориентированность</p>
            <p class="small">оперативно ответим на любой ваш вопрос по ассортименту нашего магазина</p>
        </div>
    </div>
</div>

</div>

Вновь нажимаем кнопку Источник и кнопку Сохранить.

Теперь нужно отобразить наш блок преимуществ на витрине, переходим: Дизайн — Макеты — Главная/Home — Редактировать — Верх страницы — Добавить — Преимущества 2 вариант — Сохранить.

Работаем со стилями

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

/* preim v2 */
.preim-block-v2 {
    margin-bottom: 30px;
}
.preim-v2 {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px 0 0 0;
    min-height: 160px;
}
.preim-v2 img {
    padding-top: 50px;
}
.preim-v2 .big {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: #009fdf;
    padding-top: 20px;
}
.preim-v2 .small {
    font-size: 11px;
}

Чистим кеши и смотрим результат: