CMS OpenCart 3.0 выводим преимущества магазина на домашнюю страницу (2 вариант)

Всем привет, в этой статье мы вновь будем работать с преимуществами нашего интернет магазина на CMS OpenCart 3.0, но в этот раз мы немного изменим дизайн — сделаем блок преимуществ компактнее и немного изменим оформление с помощью CSS стилей.

1. Для подбора иконок я использую этот ресурс: https://www.flaticon.com, для статьи я использую вот такие иконки:

Открываем свой файловый менеджер (к примеру FileZilla) и переходим в папку: ../image/catalog, теперь перемещаем в эту папку наши иконки.

(P.S.у меня уже есть иконка delivery-truck.png — из прошлой статьи по преимуществам нашего магазина, поэтому я её переименовываю в delivery-truck-new.png)

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

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

Поле ввода Текст переключаем в режим Code View ( иконка </> ) и заполняем:

<div class="row preim-2">
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
   <div class="product-thumb transition">
    <div class="image col-sm-4"><img src="image/catalog/chat.png" class="img-responsive"></div>
    <div class="caption col-sm-8"><h4>Грамотные консультанты</h4></div>
   </div>
  </div>
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
   <div class="product-thumb transition">
    <div class="image col-sm-4"><img src="image/catalog/circular-clock.png" class="img-responsive"></div>
    <div class="caption col-sm-8"><h4>Работаем 7 дней в неделю!</h4></div>
   </div>
  </div>
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
   <div class="product-thumb transition">
    <div class="image col-sm-4"><img src="image/catalog/delivery-truck-new.png" class="img-responsive"></div>
     <div class="caption col-sm-8"><h4>Бесплатная доставка при заказе от <b>5.000р.</b></h4></div>
   </div>
  </div>
  <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
   <div class="product-thumb transition">
    <div class="image col-sm-4"><img src="image/catalog/banking.png" class="img-responsive"></div>
    <div class="caption col-sm-8"><h4>Скидки и акции для постоянных покупателей</h4></div>
   </div>
  </div>
</div>

После заполнения вновь нажимаем кнопку Code View и только после этого нажимаем кнопку Сохранить.

3. Теперь необходимо вывести преимущества на витрину нашего интернет магазина, переходим в админке: Дизайн > Макеты > Home > Редактировать > Верх страницы: Преимущества (2 вариант) > Добавить ( иконка + ) > кнопка Сохранить

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

.preim-2 .product-thumb {
  border: 1px solid #00BCD4;
  border-radius: 3px;
}
.preim-2 img {
  margin: 10px auto;
}
.preim-2 .product-thumb .caption {
  min-height: 80px;
}
.preim-2 .product-thumb:hover {
  background: #FAFAFA;
}

Чистим все кеши и проверяем результат нашей работы:

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

На сегодня всё, вступайте в нашу группу в ВК и следите за выходом наших новых материалов.

Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru

6 комментариев

  1. Добрый день! Подскажите пожалуйста, очень нуждаюсь в Ваших старых статьях для Опенкарт, если я оставлю свою электронку, не могли бы Вы скинуть статьи, либо каким-либо удобным для Вас способом. Я новичок в этом деле, у меня установлена Опенкарт 2 и я всё делала по Вашим статьям, а теперь я просто в растерянности, пожалуйста поделитесь старыми статьями, они очень нужны, спасибо.

    • fly911 Ответить

      Добрый день, старый сайт удалён полностью — и файловый архив, и база данных.Старых материалов больше не существует (некоторые сайты копировали материалы моего блога и вы их можете найти), мелкие вопросы вы можете задавать мне в личку в ВК или в группу, если же требуются серьёзные доработки или правки то возможна помощь на платной основе.

  2. Пробовала сделать всё как описано в этой статье, но ничего не работает в ОКСтор 2.1.0.1 — не подскажите в чём причина? Вставляю код в Code View ( иконка ), но ничего не срабатывает.

    • fly911 Ответить

      После вставки кода опять Code View нажимали?
      Плюс в Дизайн — Схемах нажимали?
      Кнопка Включено нажата?
      Кеши чищены?

      Дайте ссылку на свой сайт и доступ в админку (vk.com/mag1987)

  3. Все отлично, но в мобильной версии значки огромные и располагаются по одному в строку. А как сделать по два в строку?

Оставить комментарий

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания применять.

Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Меню навигации