CMS OpenCart 3.0 небольшие доработки (2 часть)

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

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

1. Работаем с файлом menu.twig (../catalog/view/theme/default/template/common/menu.twig)
2. Работаем с файлом category.twig (../catalog/view/theme/default/template/extension/module/category.twig)
3. Работаем с файлом category.twig (../catalog/view/theme/default/template/product/category.twig)
4. Работаем с файлом stylesheet.css (../catalog/view/theme/default/stylesheet/stylesheet.css)

Приступим:

1. Откроем файл menu.twig и вместо этой строки (20):

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

вставим эту:

</div>

а вместо этой строки (11):

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

P.S. — Мы убрали строку показать все, и при нажатии основной категории (с выпадающим списком подкатегорий) мы будем переходить в эту категорию.

2. Откроем файл category.twig и вместо этих строк (1-17):

<div class="list-group">
  {% for category in categories %}
  {% if category.category_id == category_id %} 
  <a href="{{ category.href }}" class="list-group-item active">{{ category.name }}</a> 
  {% if category.children %}
  {% for child in category.children %}
  {% if child.category_id == child_id %}
  <a href="{{ child.href }}" class="list-group-item active">&nbsp;&nbsp;&nbsp;- {{ child.name }}</a> 
  {% else %} 
  <a href="{{ child.href }}" class="list-group-item">&nbsp;&nbsp;&nbsp;- {{ child.name }}</a>
  {% endif %}
  {% endfor %}
  {% endif %}
  {% else %} <a href="{{ category.href }}" class="list-group-item">{{ category.name }}</a>
  {% endif %}
  {% endfor %}
</div>

вставим эти:

<h3 class="center-h"><i class="fa fa-bars"></i> {{ heading_title }}</h3>
 <div class="list-group">
  {% for category in categories %}
  {% if category.category_id == category_id %} 
  <a href="{{ category.href }}" class="list-group-item active">{{ category.name }}</a> 
  {% if category.children %}
  {% for child in category.children %}
  {% if child.category_id == child_id %}
  <a href="{{ child.href }}" class="list-group-item active">&nbsp;&nbsp;&nbsp;- {{ child.name }}</a> 
  {% else %} 
  <a href="{{ child.href }}" class="list-group-item">&nbsp;&nbsp;&nbsp;- {{ child.name }}</a>
  {% endif %}
  {% endfor %}
  {% endif %}
  {% else %} <a href="{{ category.href }}" class="list-group-item">{{ category.name }}</a>
  {% endif %}
  {% endfor %}
</div>

3. Откроем файл category.twig и вместо этой строки (30):

<div class="row">

вставим эти:

<div class="row category-list">

а вместо этой строки (40):

<div class="row">{% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}

вставим эту:

<div class="row category-list">{% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}

4. Откроем файл stylesheet.css и удалим эти строки (345-378):

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

В самый конец файла добавим эти строки:

.center-h,
.center-h .fa {
  font-size: 18px;
  text-align: center;
  color: #fff;
}
.center-h .fa {
  padding: 0 5px;
}
.center-h {
  border: 1px solid #ddd;
  background: #0288D1;
  padding: 15px 0px;
  border-radius: 3px;
}

P.S. — это стили для заголовка категорий в левой колонке.

Ниже добавим эти строки:

.category-list ul {
  list-style: none;
  padding:0;
}
.category-list ul li + li {
  margin-top: 10px;
}
.category-list ul li a {
  border: 1px solid #ddd;
  color: #000;
  width: 100%;
  display: inline-block;
  padding: 5px 15px;
}
.category-list ul li a:hover {
  border: 1px solid #0288d1;
  color: #0288d1;
}

P.S. — это стили списка подкатегорий на страницах основных категорий.

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

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

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