Всем привет, в прошлой статье мы поработали над оформлением Личного кабинета, Сравнением товара и Закладками, сегодня немного изменим вёрстку шапки и доработаем оформление.
1. Откроем файл: ../public_html/catalog/view/template/common/header.twig и вместо этих строк:
<div class="container">
<div class="row">
<div class="col-md-3">
<div id="logo">
{% if logo %}
<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-fluid"/></a>
{% else %}
<h1><a href="{{ home }}">{{ name }}</a></h1>
{% endif %}
</div>
</div>
<div class="col-md-6">{{ search }}</div>
<div class="col-md-3">
<div class="row my-block">
<div class="dropdown col-sm-3 my-link">
<a href="{{ account }}" class="dropdown-toggle" data-bs-toggle="dropdown"><div class="headicons"><i class="fa-solid fa-user"></i></div> <span class="d-none d-md-inline">{{ text_account }}</span> <i class="fa-solid fa-caret-down"></i></a>
<ul class="dropdown-menu dropdown-menu-right">
{% if not logged %}
<li><a href="{{ register }}" class="dropdown-item">{{ text_register }}</a></li>
<li><a href="{{ login }}" class="dropdown-item">{{ text_login }}</a></li>
{% else %}
<li><a href="{{ account }}" class="dropdown-item">{{ text_account }}</a></li>
<li><a href="{{ order }}" class="dropdown-item">{{ text_order }}</a></li>
<li><a href="{{ transaction }}" class="dropdown-item">{{ text_transaction }}</a></li>
<li><a href="{{ download }}" class="dropdown-item">{{ text_download }}</a></li>
<li><a href="{{ logout }}" class="dropdown-item">{{ text_logout }}</a></li>
{% endif %}
</ul>
</div>
<div class="col-sm-3 my-link">
<a href="{{ compare }}" id="compare-total" title="{{ text_comparelabel }}"><div class="headicons"><i class="fa-solid fa-arrow-right-arrow-left"></i><span class="counter">{{ text_compare }}</span></div> <span class="d-none d-md-inline">{{ text_comparelabel }}</span></a>
</div>
<div class="col-sm-3 my-link">
<a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlistlabel }}"><div class="headicons"><i class="fa-solid fa-heart"></i><span class="counter">{{ text_wishlist }}</span></div> <span class="d-none d-md-inline">{{ text_wishlistlabel }}</span></a>
</div>
<div class="col-sm-3" id="header-cart">{{ cart }}</div>
</div>
</div>
</div>
</div>
вставим эти:
<div class="container">
<div class="row">
<div class="col-lg-3">
<div id="logo">
{% if logo %}
<img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-fluid"/>
{% else %}
<h1>{{ name }}</h1>
{% endif %}
</div>
</div>
<div class="col-lg-6">{{ search }}</div>
<div class="col-lg-3">
<div class="row my-block">
<div class="dropdown col-sm-3 my-link">
<a href="{{ account }}" class="dropdown-toggle" data-bs-toggle="dropdown"><div class="headicons"><i class="fa-solid fa-user"></i></div> <span class="d-none d-md-inline">{{ text_account }}</span></a>
<ul class="dropdown-menu dropdown-menu-right">
{% if not logged %}
<li><a href="{{ register }}" class="dropdown-item">{{ text_register }}</a></li>
<li><a href="{{ login }}" class="dropdown-item">{{ text_login }}</a></li>
{% else %}
<li><a href="{{ account }}" class="dropdown-item">{{ text_account }}</a></li>
<li><a href="{{ order }}" class="dropdown-item">{{ text_order }}</a></li>
<li><a href="{{ transaction }}" class="dropdown-item">{{ text_transaction }}</a></li>
<li><a href="{{ download }}" class="dropdown-item">{{ text_download }}</a></li>
<li><a href="{{ logout }}" class="dropdown-item">{{ text_logout }}</a></li>
{% endif %}
</ul>
</div>
<div class="col-sm-3 my-link">
<a href="{{ compare }}" id="compare-total" title="{{ text_comparelabel }}"><div class="headicons"><i class="fa-solid fa-arrow-right-arrow-left"></i><span class="badge rounded-pill">{{ text_compare }}</span></div> <span class="d-none d-md-inline">{{ text_comparelabel }}</span></a>
</div>
<div class="col-sm-3 my-link">
<a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlistlabel }}"><div class="headicons"><i class="fa-solid fa-heart"></i><span class="badge rounded-pill">{{ text_wishlist }}</span></div> <span class="d-none d-md-inline">{{ text_wishlistlabel }}</span></a>
</div>
<div class="col-sm-3 my-link" id="header-cart">{{ cart }}</div>
</div>
</div>
</div>
</div>
P.S. — Мы убрали у логотипа ссылку на главную страницу, подкорректировали отображение элементов шапки на средних разрешениях экранов,убрали стрелку у кнопки Личный кабинет (Вход), изменили обёртку у счётчиков (товары в сравнениях, закладки).
2. Откроем файл: ../public_html/catalog/view/template/common/cart.twig и вместо этой строки:
<button type="button" data-bs-toggle="dropdown" class="btn btn-lg btn-inverse btn-block dropdown-toggle"><i class="fa-solid fa-cart-shopping"></i> {{ text_items }}</button>
вставим эти:
<a href="{{ cart }}" data-bs-toggle="dropdown" title="{{ text_cartlabel }}"><div class="headicons"><i class="fa-solid fa-cart-shopping"></i> <span class="badge rounded-pill">{{ text_items }}</span></div> <span class="d-none d-md-inline">{{ text_cartlabel }}</span></a>
Отлично, теперь у нас всё в одном стиле (чистим кеши, смотрим результат):
О пропавших счётчиках не беспокоимся — мы поменяли их css обёртку, сейчас всё вернём на место. 😉
3. Откроем файл: ../public_html/catalog/view/stylesheet/stylesheet.css и вместо этих строк:
.my-block {
text-align: center;
}
.my-link {
margin: 0 auto;
padding: 5px 0;
}
.my-link i {
font-size: 15px;
}
.my-link a {
color: #000;
}
.headicons .counter {
margin-left: 5px;
padding: 2px 5px;
color: #fff;
background: #2196F3;
border-radius: 15px;
}
.my-link:hover {
background: #2196F3;
color: #fff;
}
.my-link:hover a {
color: #fff;
}
.my-link:hover > ul a {
color: #000;
}
вставим эти:
.my-block {
text-align: center;
}
.headicons {
font-size: 15px;
}
.my-link a {
color: #000;
}
.my-link a:hover {
color: #607D8B;
}
.my-block .badge {
margin-left: 5px;
background: #2196F3;
font-size: 10px;
}
Ниже удалим эти строки:
#header-cart {
margin-bottom: 10px;
}
Чистим кеши, смотрим результат:
Демонстрационный сайт: demo.moushe.ru (демо сайт обновляется вместе с выходом новых статей).
На сегодня всё, продолжим в следующих статьях.
Нажимая эту кнопку я соглашаюсь с условиями политики конфиденциальности.