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

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

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

<ul class="nav navbar-nav">

вставим эту:

<ul class="nav navbar-nav col-sm-3 row">

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

</div>
{{ menu_link }}

вставим эти:

  <ul class="nav navbar-nav col-sm-9 row">      
    {{ menu_link }}
  </ul>    
</div>

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

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

вставим эту:

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

Теперь переходим в админку: Система – Настройка – Редактировать – Ссылки в главном меню и заполняем:

<li><a href="ваша ссылка">Акции</a></li>
<li><a href="ваша ссылка">Услуги</a></li>
<li><a href="ваша ссылка">Блог</a></li>
<li><a href="ваша ссылка">Бренды</a></li>
<li><a href="ваша ссылка">Как купить</a></li>
<li><a href="ваша ссылка">Компания</a></li>
<li><a href="ваша ссылка">Контакты</a></li>

2. Теперь нам необходимо переименовать строку Показать все Каталог, сделать это очень просто, откроем файл: ../catalog/language/ru-ru/common/menu.php и вместо этой строки:

$_['text_all'] = 'Показать все';

вставим эту:

$_['text_all'] = 'Показать весь';

3. Откроем файл ../catalog/view/theme/default/template/common/header.twig и после этих строк:

</head>
<body>

вставим эту:

{{ cart }}

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

<div class="col-sm-3">{{ cart }}</div>

вставим эту:

<div class="col-sm-3"><i class="fa fa-phone"></i> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></div>

и удалим эту строку:

<li><a href="{{ contact }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></li>

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

Как видим кнопка корзины переместилась в верхнюю часть сайта, а номер телефона занял место корзины, отлично, теперь нам необходимо переместить корзину в боковую колонку, сделать это довольно просто, вместо этой строки:

{{ cart }}

вставим эти:

<ul class="nav head-button">
    {{ cart }}
</ul>

и немного дополним файл стилей. Сделаем это в следующем шаге.

4. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки:

.head-button {
    position: fixed;
    right: 2px;
    top: 20%;
    z-index: 99;
}

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

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

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

Комментарии

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