Правим шапку CMS OpenCart 4.0. (1 часть)

Всем привет, сегодня мы с вами поработаем над шапкой (верхней частью) нашего интернет магазина, созданного на CMS OpenCart 4, мы поработаем над личным кабинетом, корзиной, закладками и сравнением товаров.

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

<header>
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-lg-4">
        <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-5">{{ search }}</div>
      <div id="header-cart" class="col-md-4 col-lg-3 mb-2">{{ cart }}</div>
    </div>
  </div>
</header>

вставляем эти:

<header>
  <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="dropdown">
            <a href="{{ account }}" class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fa-solid fa-user"></i> <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>
      <a href="{{ compare }}" id="compare-total" title="{{ text_compare }}"><i class="fa-solid fa-arrow-right-arrow-left"></i> <span class="d-none d-md-inline">{{ text_compare }}</span></a>
      <a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa-solid fa-heart"></i> <span class="d-none d-md-inline">{{ text_wishlist }}</span></a>
      <div id="header-cart">{{ cart }}</div>
     </div>
    </div>
  </div>
</header>

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

<ul class="list-inline">
  <li class="list-inline-item">
    <div class="dropdown">
      <a href="{{ account }}" class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fa-solid fa-user"></i> <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>
  </li>
  <li class="list-inline-item"><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa-solid fa-heart"></i> <span class="d-none d-md-inline">{{ text_wishlist }}</span></a></li>
  <li class="list-inline-item"><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><i class="fa-solid fa-cart-shopping"></i> <span class="d-none d-md-inline">{{ text_shopping_cart }}</span></a></li>
  <li class="list-inline-item"><a href="{{ checkout }}" title="{{ text_checkout }}"><i class="fa-solid fa-share"></i> <span class="d-none d-md-inline">{{ text_checkout }}</span></a></li>
</ul>

2. Откроем файл ../public_html/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', 'language=' . $this->config->get('config_language') . (isset($this->session->data['customer_token']) ? '&customer_token=' . $this->session->data['customer_token'] : ''));

вставим эту:

$data['compare'] = $this->url->link('product/compare', 'language=' . $this->config->get('config_language') . (isset($this->session->data['customer_token']) ? '&customer_token=' . $this->session->data['customer_token'] : ''));

3. Откроем файл ../public_html/catalog/language/ru-ru/common/header.php и после этой строки:

$_['text_wishlist']      = 'Закладки (%s)';

вставим эту:

$_['text_compare']       = 'Сравнение (%s)';

4. Откроем файл ../public_html/catalog/language/en-gb/common/header.php и после этой строки:

$_['text_wishlist']      = 'Wish List (%s)';

вставим эту:

$_['text_compare']       = 'Compare (%s)';

5. Откроем файл: ../public_html/catalog/view/template/product/category.twig и удалим эти строки:

<div class="col-lg-3">
  <div class="mb-3">
    <a href="{{ compare }}" id="compare-total" class="btn btn-primary d-block"><i class="fa-solid fa-arrow-right-arrow-left"></i> <span class="d-none d-xl-inline">{{ text_compare }}</span></a>
  </div>
</div>

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

<div class="col-lg-1 d-none d-lg-block">

вставим эту:

<div class="col-lg-4 d-none d-lg-block">

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

<div class="col-lg-4 offset-lg-1 col-6">

вставим эту:

<div class="col-lg-4 col-6">

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

<div class="col-lg-3 col-6">

вставим эту:

<div class="col-lg-4 col-6">

Смотрим результат:

Отлично, всё что нужно вывели, теперь необходимо доработать.

6. Откроем файл ../public_html/catalog/language/ru-ru/common/header.php и вместо этих строк:

$_['text_wishlist']      = 'Закладки (%s)';
$_['text_compare']       = 'Сравнение (%s)';
$_['text_shopping_cart'] = 'Корзина';
$_['text_account']       = 'Личный кабинет';

вставим эти:

$_['text_wishlist']      = '%s';
$_['text_wishlistlabel'] = 'Закладки';
$_['text_compare']       = '%s';
$_['text_comparelabel']  = 'Сравнение';
$_['text_shopping_cart'] = 'Корзина';
$_['text_account']       = 'Вход';

7. Откроем файл ../public_html/catalog/language/ru-ru/common/cart.php и вместо этой строки:

$_['text_items']                 = 'Товаров %s (%s)';

вставим эти:

$_['text_items']                 = '%s';
$_['text_cartlabel']             = 'Корзина';

8. Откроем файл ../public_html/catalog/language/en-gb/common/header.php и вместо этих строк:

$_['text_wishlist']      = 'Wish List (%s)';
$_['text_compare']       = 'Compare (%s)';
$_['text_shopping_cart'] = 'Shopping Cart';
$_['text_account']       = 'My Account';

вставим эти:

$_['text_wishlist']      = '%s';
$_['text_wishlistlabel'] = 'Wish List';
$_['text_compare']       = '%s';
$_['text_comparelabel']  = 'Compare';
$_['text_shopping_cart'] = 'Shopping Cart';
$_['text_account']       = 'Account';

9. Откроем файл ../public_html/catalog/language/en-gb/common/cart.php и вместо этой строки:

$_['text_items']                 = '%s item(s) - %s';

вставим эти:

$_['text_items']                 = '%s';
$_['text_cartlabel']             = 'Cart';

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

 <div class="col-md-3">
           <div class="dropdown">
       <a href="{{ account }}" class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fa-solid fa-user"></i> <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>
 <a href="{{ compare }}" id="compare-total" title="{{ text_compare }}"><i class="fa-solid fa-arrow-right-arrow-left"></i> <span class="d-none d-md-inline">{{ text_compare }}</span></a>
 <a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa-solid fa-heart"></i> <span class="d-none d-md-inline">{{ text_wishlist }}</span></a>
 <div id="header-cart">{{ cart }}</div>
</div>

вставим эти:

 <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>

Смотрим результат: