Moushe.ru

Блог обо всём

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



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

OpenCart-20_thumb.jpg

До:

popcat_02

После:

pop_cat_03

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

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

Приступим:

1. Откроем админку:

Дополнения –> Модули -> HTML Содержимое > Популярные категории –> Редактировать –> Исходный код и изменим весь код:

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

на этот:

<div class="row">

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

</div>

(P.S.Мы присвоили каждому блоку свой отдельный класс, чтобы присвоить каждому элементу свой css стиль)

2. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вместо этих строк (759-776):

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

вставим эти:

/* popular category */
.pop_cat_1, .pop_cat_2, .pop_cat_3, .pop_cat_4 {
border: 1px solid #fff;
text-align: center;
padding: 10px 0;
border-radius: 3px;
min-height: 200px;
}
.pop_cat_1:hover, .pop_cat_2:hover, .pop_cat_3:hover, .pop_cat_4:hover {
opacity: 0.9;
}
.pop_cat_1 span, .pop_cat_2 span, .pop_cat_3 span, .pop_cat_4 span {
display: block;
padding-bottom: 10px;
color: #fff;
}
.pop_cat_1 {
background: #FF5252;
background-image: linear-gradient(to top,#FF5252 0%,#B71C1C 100%);
}
.pop_cat_2 {
background: #2196F3;
background-image: linear-gradient(to top,#2196F3 0%,#1A237E 100%);
}
.pop_cat_3 {
background: #7E57C2;
background-image: linear-gradient(to top,#7E57C2 0%,#311B92 100%);
}
.pop_cat_4 {
background: #4CAF50;
background-image: linear-gradient(to top,#4CAF50 0%,#33691E 100%);
}
.pop_cat_1 img, .pop_cat_2 img, .pop_cat_3 img, .pop_cat_4 img {
display: block;
margin: 0 auto;
}
.pop_cat_1:hover img, .pop_cat_2:hover img, .pop_cat_3:hover img, .pop_cat_4:hover img {
margin-top: 2px;
position: relative;
margin-bottom: 5px;
}

Результат:

pop_cat_03

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

2 Комментария

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

    • Берём программиста и платим ему за качественный php код, который будет в случайном порядке брать категории и выводить их так как вам нужно, думаю за 5-7 тыс. руб. вам сделают такой индивидуальный модуль. Хотя расценки у прогеров разные, может стоить как дешевле так и дороже.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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