Всем привет, продолжим работать над шапкой стандартного шаблона, сегодня мы доделаем меню навигации, переместим кнопку в корзину в боковую колонку, а номер телефона переместим к строке поиска (вместо корзины).
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/
На сегодня всё, продолжим в следующей статье.
