Moushe.ru

Блог обо всём

OpenCart 2.1 html модуль (2 часть) – популярные категории



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

OpenCart-20.jpg

Этот материал разделён на две части, сегодня мы сделаем популярные блоки в минималистическом дизайне, а в следующей части статьи сделаем каждому блоку красивый фон.

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

1. Работаем с изображениями

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

3. Работаем с CSS

Приступим:

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

beats gamer laptop sysblock

(формат изображений PNG, фон – прозрачный, размеры 130px x 130px)

1.1. Закидываем наши картинки в папку image вашего шаблона, в моём случае это стандартный шаблон (default):

../catalog/view/theme/default/image/

(запоминаем название своего шаблона, оно нам скоро понадобится)

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

Дополнения > Модули > HTML Содержимое > Редактировать:

  • Название: Популярные категории
  • Заголовок: Популярные категории
  • Статус: Включено

Описание (переключаемся на исходный код) и начинаем работать:

Сначала сделаем обёртку блоков:

<div class="row">
</div>

теперь добавим четыре колонки:

<div class="row">

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
</div>

</div>

Теперь в колонки нужно поместить наши картинки:

<div class="row">

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="pop_cat">
<img src="/catalog/view/theme/default/image/sysblock.png">
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="pop_cat">
<img src="/catalog/view/theme/default/image/laptop.png">
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="pop_cat">
<img src="/catalog/view/theme/default/image/beats.png">
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="pop_cat">
<img src="/catalog/view/theme/default/image/gamer.png">
</div>
</div>

</div>

Теперь добавим заголовки и ссылки на категории:

<div class="row">

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="pop_cat">
<a href="ссылка на категорию"><span>Компьютеры и комплектующие</span>
<img src="/catalog/view/theme/default/image/sysblock.png">
</a>
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="pop_cat">
<a href="ссылка на категорию"><span>Ноутбуки</span>
<img src="/catalog/view/theme/default/image/laptop.png">
</a>
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="pop_cat">
<a href="ссылка на категорию"><span>Наушники и гарнитуры</span>
<img src="/catalog/view/theme/default/image/beats.png">
</a>
</div>
</div>

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="pop_cat">
<a href="ссылка на категорию"><span>Игровые устройства</span>
<img src="/catalog/view/theme/default/image/gamer.png">
</a>
</div>
</div>

</div>

(вместо ссылка на категорию прописываем чпу юрл нужных вам категорий)

нажимаем кнопку Сохранить.

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

Админка > Дизайн > Схемы > Главная > Редактировать > Добавить модуль:

  • Модуль: HTML содержимое > Популярные категории
  • Расположение: Вверху страницы
  • Порядок сортировки: 3

Нажимаем кнопку Сохранить.

Проверка:

popcat_01

3. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вставим в него эти строки (можно в самый конец файла):

/* popular category */
.pop_cat {
border: 1px solid #ddd;
text-align: center;
padding: 10px 0;
border-radius: 3px;
}
.pop_cat:hover {
border: 1px solid #23527c;
}
.pop_cat span {
display: block;
padding-bottom: 10px;
}
.pop_cat img {
display: block;
margin: 0 auto;
}

Результат:

popcat_02

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

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

1 Комментарий

  1. ОЧЕНЬ полезные статьи! Прошу Вас продолжать писать подобные вещи, и хотелось бы почаще!
    Спасибо Вам огромное!

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика