Всем привет, продолжаем работать над шапкой нашего интернет магазина, в этой статье мы немного поработаем над меню навигации, кнопками корзины, закладками и сравнением товаров.
1. Меня не устраивает получившееся у нас с вами меню навигации, поэтому я решил его немного доработать, откроем файл ../catalog/view/theme/default/template/common/menu.twig и вместо этих строк:
{% if categories %}
<div class="container">
<nav id="menu" class="navbar">
<div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav col-sm-3">
{% for category in categories %}
{% if category.children %}
<li class="dropdown col-sm-12 row"><a href="{{ category.href }}" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }}</a>
<div class="dropdown-menu">
<div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
<ul class="list-unstyled">
{% for child in children %}
<li><a href="{{ child.href }}">{{ child.name }}</a></li>
{% endfor %}
</ul>
{% endfor %}</div>
<a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a> </div>
</li>
{% else %}
<li><a href="{{ category.href }}">{{ category.name }}</a></li>
{% endif %}
{% endfor %}
</ul>
<ul class="nav navbar-nav col-sm-9 row">
{{ menu_link }}
</ul>
</div>
</nav>
</div>
{% endif %}
вставим эти:
{% if categories %}
<div class="container">
<nav id="menu" class="navbar">
<div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav nav-pills nav-justified">
{% for category in categories %}
{% if category.children %}
<li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }}</a>
<div class="dropdown-menu">
<div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
<ul class="list-unstyled">
{% for child in children %}
<li><a href="{{ child.href }}">{{ child.name }}</a></li>
{% endfor %}
</ul>
{% endfor %}</div>
<a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a> </div>
</li>
{% else %}
<li><a href="{{ category.href }}">{{ category.name }}</a></li>
{% endif %}
{% endfor %}
{{ menu_link }}
</ul>
</div>
</nav>
</div>
{% endif %}
Чистим все кеши и смотрим на результат:
Не знаю как вам, а мне так нравится гораздо больше чем раньше — все ссылки в одном блоке и имеют одинаковую ширину.
При желании в пункт меню Каталог можно добавить иконку, сделать это очень просто, вместо этой строки:
<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" data-toggle="dropdown"><i class="fa fa-th" aria-hidden="true"></i> {{ category.name }}</a>
естественно можно вставить и другую иконку, я выбрал эту иконку просто для примера.
Если захотите вы можете вставить иконки и другим ссылкам меню навигации, к примеру я добавлю иконку пункту Акции, для этого нам необходимо открыть админку и перейти: Система — Настройки — Редактировать — Ссылки в главном меню и вместо этой строки:
<li><a href="ваша ссылка">Акции</a></li>
вставить эту:
<li><a href="ваша ссылка"><i class="fa fa-star" aria-hidden="true"></i> Акции</a></li>
Смотрим результат:
Вроде неплохо.
2. Откроем файл: ../catalog/view/theme/default/template/common/header.twig и вместо этих строк:
<ul class="nav head-button">
{{ cart }}
</ul>
вставим эти:
<ul class="nav head-button">
{{ cart }}
<li class="hicon"><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
<li class="hicon"><a href="{{ compare }}" id="compare-total" title="{{ text_compare }}"><i class="fa fa-exchange"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_compare }}</span></a></li>
</ul>
и удалим эту строку:
<li><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
3. Откроем файл ../catalog/controller/common/header.php и после этих строк:
// Wishlist
if ($this->customer->isLogged()) {
$this->load->model('account/wishlist');
$data['text_wishlist'] = sprintf($this->language->get('text_wishlist'), $this->model_account_wishlist->getTotalWishlist());
} else {
$data['text_wishlist'] = sprintf($this->language->get('text_wishlist'), (isset($this->session->data['wishlist']) ? count($this->session->data['wishlist']) : 0));
}
вставим эти:
// Compare
$data['text_compare'] = sprintf($this->language->get('text_compare'), (isset($this->session->data['compare']) ? count($this->session->data['compare']) : 0));
а после этой строки:
$data['wishlist'] = $this->url->link('account/wishlist', '', true);
вставим эту:
$data['compare'] = $this->url->link('product/compare');
4. Откроем файл ../catalog/language/ru-ru/common/header.php и после этой строки:
$_['text_wishlist'] = 'Закладки (%s)';
вставим эту:
$_['text_compare'] = 'Сравнение (%s)';
Чистим все кеши и смотрим на результат:
На сегодня всё, вступайте в нашу группу в ВК и следите за выходом новых статей.
Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru
