Правки шаблона OpenCart 3 (2 часть)

Всем привет сегодня продолжим работать над стандартным шаблоном нашего интернет магазина сделанного на CMS OpenCart, сегодня немного поработаем с меню категорий, хлебными крошками и шириной стандартного шаблона на мониторах с высоким разрешением.

1. Откроем файл ../catalog/view/theme/default/template/common/menu.twig и вместо этой строки:

<li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }}</a>

вставим эту:

<li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle">{{ category.name }}</a>

а вместо этой:

<a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a> </div>

вставим эту:

</div>

По умолчанию чтобы попасть в основную категорию нам нужно навести курсор на категорию и потом нажать ссылку «показать все», на мой взгляд это не удобно, я хочу нажать на название категории и сразу перейти в товары, именно это мы и сделали. Нечего наматывать на мышке лишние километры. 🙂

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

#menu {
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    background-repeat: repeat-x;
    border-color: #1f90bb #1f90bb #145e7a;
    min-height: 40px;
}
#menu .nav > li > a {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    padding: 10px 15px 10px 15px;
    min-height: 15px;
    background-color: transparent;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
    background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-menu {
    padding-bottom: 0;
}
#menu .dropdown-inner {
    display: table;
}
#menu .dropdown-inner ul {
    display: table-cell;
}
#menu .dropdown-inner a {
    min-width: 160px;
    display: block;
    padding: 3px 20px;
    clear: both;
    line-height: 20px;
    color: #333333;
    font-size: 12px;
}
#menu .dropdown-inner li a:hover {
    color: #FFFFFF;
}
#menu .see-all {
    display: block;
    margin-top: 0.5em;
    border-top: 1px solid #DDD;
    padding: 3px 20px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 3px 3px;
    font-size: 12px;
}
#menu .see-all:hover, #menu .see-all:focus {
    text-decoration: none;
    color: #ffffff;
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    background-repeat: repeat-x;
}
#menu #category {
    float: left;
    padding-left: 15px;
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menu .btn-navbar {
    font-size: 15px;
    font-stretch: expanded;
    color: #FFF;
    padding: 2px 18px;
    float: right;
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    background-repeat: repeat-x;
    border-color: #1f90bb #1f90bb #145e7a;
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
    color: #ffffff;
    background-color: #229ac8;
}

вставим эти:

#menu {
    background-image: linear-gradient(to right, #1976D2 0%, #64B5F6 100%);
    margin: 0;
    border: none;
    border-radius: 0;
}
#menu .nav > li > a {
    color: #fff;
    padding: 15px 10px;
    font-size: 14px;
    font-weight: 600;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
    background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-menu {
    padding-bottom: 0;
}
#menu .dropdown-inner {
    display: table;
}
#menu .dropdown-inner ul {
    display: table-cell;
}
#menu .dropdown-inner a {
    min-width: 240px;
    display: block;
    padding: 10px;
    clear: both;
    line-height: 20px;
    font-size: 14px;
    color: #000;
}
#menu .dropdown-inner li a:hover {
    background: #f2f2f2;
}
#menu #category {
    float: left;
    padding: 15px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
#menu .btn-navbar {
    font-size: 15px;
    font-stretch: expanded;
    color: #FFF;
    padding: 5px 20px;
    float: right;
    background: #f2f2f2;
    color: #000;
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
    color: #ffffff;
    background-color: #000;
}

Смотрим результат:

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

3. Мне не нравится стандартная ширина шаблона на экранах с большой шириной (FullHD и выше), уж очень много пустого пространства с правой и левой стороны, давайте увеличим ширину с 1170px до 1400px, для этого добавим в конец файла: ../catalog/view/theme/default/stylesheet/stylesheet.css эти строки:

@media (min-width: 1920px) {
    .container {
        width: 1400px;
    }
}

Разумеется вы можете задать и другую ширину, хоть в пикселях, хоть в процентах.

4. Откроем файл: ../catalog/language/ru-ru/ru-ru.php и вместо этой строки:

$_['text_home'] = '<i class="fa fa-home"></i>';

вставим эту:

$_['text_home'] = 'Главная';

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

5. Откроем файл: ../catalog/view/theme/default/stylesheet/stylesheet.css и вместо этих строк:

.breadcrumb {
    margin: 0 0 20px 0;
    padding: 8px 0;
    border: 1px solid #ddd;
}
.breadcrumb i {
    font-size: 15px;
}
.breadcrumb > li {
    text-shadow: 0 1px 0 #FFF;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
}
.breadcrumb > li + li:before {
    content: '';
    padding: 0;
}
.breadcrumb > li:after {
    content: '';
    display: block;
    position: absolute;
    top: -3px;
    right: -5px;
    width: 26px;
    height: 26px;
    border-right: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
html[dir=rtl] .breadcrumb > li::after {
  top: -3px;
  left: -5px;
  width: 26px;
  height: 26px;
  border-left: 1px solid #DDD;
  border-top: 1px solid #DDD;
  right: unset;
  border-right: unset;
  border-bottom:unset;

}

вставим эти:

.breadcrumb {
    margin-bottom: 20px;
    padding: 0;
    border-radius: 0;
    background: #f2f2f2;
}
.breadcrumb a {
    color: #000;
    padding: 10px;
    display: inline-block;
}
.breadcrumb a:hover {
    color: #2196F3;
}

Вроде неплохо получилось, на сегодня всё, встретимся в следующей статье.

Живой пример: op34.moushe.ru (Обновляется одновременно с выходом новых статей).