Правим шапку CMS OpenCart 4 (2 часть)

Всем привет в одной из прошлых статей мы с вами начали работать над шапкой нашего интернет магазина созданного на CMS OpenCart 4, а в этой статье продолжим доработку — добавим нашим элементам шапки оформление.

1. Открываем файл: ../public_html/catalog/view/stylesheet/stylesheet.css и после этих строк:

#search .btn-lg {
  font-size: 15px;
  line-height: 18px;
  padding: 0.57rem 35px;
  text-shadow: 0 1px 0 #FFF;
}

добавим эти:

.my-block {
    margin:0;
    padding: 0;
    text-align: center;
    letter-spacing: 0.04em;
}
.my-block i {
    font-size: 15px;
}
.my-block a {
    color: #000;
}
.my-block a:hover {
    color: #2196F3
}
.headicons .counter {
    padding-left: 5px;
}

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

Вроде неплохо, при наведении курсором мыши иконка и надпись меняют свой цвет на синий, при желании можно немного переписать код и стили и тогда при наведении будет меняться и цвет иконок и фон. Интересно? Тогда делаем!

2. Открываем файл: ../public_html/catalog/view/template/common/header.twig и вместо этих строк:

 <div class="col-md-3">
      <div class="row my-block">
           <div class="dropdown col-sm-3">
               <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">
         <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">
         <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 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>

3. Откроем файл: ../public_html/catalog/view/stylesheet/stylesheet.css и вместо этих строк:

.my-block {
    margin:0;
    padding: 0;
    text-align: center;
    letter-spacing: 0.04em;
}
.my-block i {
    font-size: 15px;
}
.my-block a {
    color: #000;
}
.my-block a:hover {
    color: #2196F3
}
.headicons .counter {
    padding-left: 5px;
}

вставим эти:

.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: #f00;
    border-radius: 15px;
}
.my-link:hover {
    background: #2196F3;
    color: #fff;
}
.my-link:hover a {
    color: #fff;
}
.my-link:hover .headicons .counter {
    background: #fff;
    color: #000
}
.my-link:hover > ul a {
    color: #000;
}

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

Вроде неплохо смотрится, конечно можно содержимое счётчика поместить в синий кружок вместо красного:

.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;
}

Чистим кеши и смотрим:

Неплохо, но кнопка корзины требует доработки, можно прикрепить её к правой стороне экрана (сделать плавающей), сделать в стиле Входа, Сравнения товаров и Закладок или просто увеличить высоту кнопки (сделать размером с Вход, Сравнение, Закладки — при наведении курсором мыши) и перекрасить фон в чёрный (ну и можно убрать закругления)…

В общем к следующей статье решу что делать. 🙂

Демонстрационный сайт: demo.moushe.ru (демо сайт обновляется вместе с выходом новых статей).

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