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

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

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

Приступим:

1.  Преимущества моего магазина:

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

2.  Мои картинки:

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

P.S.: Если не понятно смотрим эту статью: https://moushe.ru/nashi-stati/opencart-moi-stati/opencart-2-3-delaem-rekomenduemye-kategorii-html-modul/

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;
}

На этом всё, следите за нашими новостями и до новых встреч.