CMS OpenCart 3.0 переделка стандартного шаблона (3 часть)

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

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

Комментарии

Меню навигации