С левой части экрана на главной странице магазины выведем категории с товарами для opencart2.
Для этого у пункта меню макеты редактируем нашу страницу home и добавляем левую колонку с категориями.
Вывод категории на странице будет возле слайдера .
Как добавить категорию прочитаем тут.
Переопределим список категорий, как мы хотим.
- Для всей цепочки list-group-item сделаем отступы padding: 15px 20px.
- Уберем все полосы между элементами задав border-bottom: 1px transparent solid и top.
- Зададим фиолетовый цвет бордюру.
- Для первого &:first-child добавим border-top: 1px #b641b0 solid.
- Наводим мышку на главной странице на вывод категорий и переходим посмотреть код, копируем все классы в sublime text.
- При наведении на категорию будем менять цвет на синий.
- Цвет текста будет белый.
- Добавим отступ у текста свойством text-indent: 10px.
6. У активной категории затемним синий цвет background-color: darken (#1f62e9, 10%) и оставим отступ от остальных на десять пикселей.
Код в stylesheet.sass
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.list-group-item padding: 15px 20px border-color: #b641b0 transition: all .5s border-bottom: 1px transparent solid border-top: 1px transparent solid &:first-child border-radius: 0 border-top: 1px #b641b0 solid &:last-child border-radius: 0 border-bottom: 1px #b641b0 solid a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover background-color: #1f62e9 border-color: #b641b0 color: #fff text-indent: 10px .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover background-color: darken(#1f62e9, 10%) text-indent: 10px |
Итог отображения в браузере категорий товаров на главной странице opencart.
Seo описание для категорий.
- При добавление категории описание должно быть уникальным.
- Количество символов должно быть от 1500 до 2500.
- Одно точное вхождение название категории в описании.
- Использовать синонимы категории.
Html тег title заполняется модулем autourl.ocmod.xml.
Подробно об установки модуля можно прочитать в статье начальная настройка магазина.