Улучшаем верхнюю панель на CMS OpenCart 4

Всем привет, сегодня мы с вами начнём улучшать верхнюю панель нашего интернет магазина созданного на CMS OpenCart 4.0.2.3. Сегодня я хочу вывести к номеру телефона выпадающий список с дополнительными телефонами, почтой, адресом магазина, часами работы и иконками соц. сетей.

1. Откроем файл: ../public_html/***/view/template/setting/setting.twig и после этих строк:

<div class="row mb-3">
  <label for="input-comment" class="col-sm-2 col-form-label">{{ entry_comment }}</label>
  <div class="col-sm-10">
    <textarea name="config_comment" rows="5" placeholder="{{ entry_comment }}" id="input-comment" class="form-control">{{ config_comment }}</textarea>
    <div class="form-text">{{ help_comment }}</div>
  </div>
</div>

вставим эти:

<fieldset>
  <legend>{{ text_headinfo }}</legend>
<div class="row mb-3">
  <label for="input-headphone1" class="col-sm-2 col-form-label">{{ entry_headphone1 }}</label>
  <div class="col-sm-10">
    <input type="text" name="config_headphone1" value="{{ config_headphone1 }}" placeholder="{{ entry_headphone1 }}" id="input-telephone" class="form-control"/>
  </div>
</div>
<div class="row mb-3">
  <label for="input-headphone2" class="col-sm-2 col-form-label">{{ entry_headphone2 }}</label>
  <div class="col-sm-10">
    <input type="text" name="config_headphone2" value="{{ config_headphone2 }}" placeholder="{{ entry_headphone2 }}" id="input-telephone" class="form-control"/>
  </div>
</div>          
<div class="row mb-3">
  <label for="input-headmail" class="col-sm-2 col-form-label">{{ entry_headmail }}</label>
  <div class="col-sm-10">
    <input type="text" name="config_headmail" value="{{ config_headmail }}" placeholder="{{ entry_headmail }}" id="input-email" class="form-control"/>
  </div>
</div>
<div class="row mb-3">
  <label for="input-headaddress" class="col-sm-2 col-form-label">{{ entry_headaddress }}</label>
  <div class="col-sm-10">
    <input type="text" name="config_headaddress" value="{{ config_headaddress }}" placeholder="{{ entry_headaddress }}" id="input-address" class="form-control"/>
  </div>
</div>
<div class="row mb-3">
  <label for="input-headworktime" class="col-sm-2 col-form-label">{{ entry_headworktime }}</label>
  <div class="col-sm-10">
    <input type="text" name="config_headworktime" value="{{ config_headworktime }}" placeholder="{{ entry_headworktime }}" id="input-open" class="form-control"/>
  </div>
</div>
<div class="row mb-3">
  <label for="input-headsocial" class="col-sm-2 col-form-label">{{ entry_headsocial }}</label>
  <div class="col-sm-10">
    <textarea name="config_headsocial" rows="5" placeholder="{{ entry_headsocial }}" id="input-comment" class="form-control">{{ config_headsocial }}</textarea>
  </div>
</div>
</fieldset>

2. Откроем файл: ../public_html/***/controller/setting/setting.php и после этой строки:

$data['config_image'] = $this->config->get('config_image');

вставим эти:

// Headpanel info
$data['config_headinfo'] = $this->config->get('config_headinfo');
$data['config_headphone1'] = $this->config->get('config_headphone1');
$data['config_headphone2'] = $this->config->get('config_headphone2');
$data['config_headmail'] = $this->config->get('config_headmail');
$data['config_headaddress'] = $this->config->get('config_headaddress');
$data['config_headworktime'] = $this->config->get('config_headworktime');
$data['config_headsocial'] = $this->config->get('config_headsocial');

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

$_['entry_comment']                       = 'Дополнительная информация';

вставим эти:

$_['entry_headphone1']                    = '1 Телефон';
$_['entry_headphone2']                    = '2 Телефон';
$_['entry_headmail']                      = 'Почта';
$_['entry_headaddress']                   = 'Адрес';
$_['entry_headworktime']                  = 'Время работы';
$_['entry_headsocial']                    = 'Соц. сети';

а перед этой строкой:

$_['text_image_size']                     = 'Размер изображений';

вставим эту:

$_['text_headinfo']                       = 'Информация в выпадающем списке';

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

$_['entry_comment']                       = 'Comment';

вставим эти:

$_['entry_headphone1']                    = '1 Phone';
$_['entry_headphone2']                    = '2 Phone';
$_['entry_headmail']                      = 'E-mail';
$_['entry_headaddress']                   = 'Address';
$_['entry_headworktime']                  = 'Work Times';
$_['entry_headsocial']                    = 'Social';

а перед этой строкой:

$_['text_image_size']                     = 'Image Sizes';

вставим эту:

$_['text_headinfo']                       = 'Information in the drop-down list';

5. Открываем админку и переходим: Система > Настройки > Редактировать > Магазин и видим внизу новый блок:

Заполняем нужные вам строки (чтобы меня не забросали спамом свои данные вставляю картинкой):

и нажимаем кнопку Сохранить.

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

<div class="nav float-start">

вставим эти:

 <div class="dropdown">
  <a href="{{ contact }}" class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fa-solid fa-phone"></i> <span class="d-none d-md-inline">{{ telephone }}</span> <i class="fa-solid fa-caret-down"></i></a>
  <ul class="dropdown-menu dropdown-menu-right headmenu">
      <li>{{ headphone1 }}</li>
      <li>{{ headphone2 }}</li>
      <li>{{ headmail }}</li>
      <li>{{ headaddress }}</li>
      <li>{{ headworktime }}</li>
      <li>{{ headsocial }}</li>
  </ul>
</div>

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

<li class="list-inline-item"><a href="{{ contact }}"><i class="fa-solid fa-phone"></i></a> <span class="d-none d-md-inline">{{ telephone }}</span></li>

9. Откроем файл: ../public_html/catalog/controller/common/header.php и после этой строки:

$data['telephone'] = $this->config->get('config_telephone');

вставим эти:

$data['headphone1'] = html_entity_decode($this->config->get('config_headphone1'), ENT_QUOTES, 'UTF-8');
$data['headphone2'] = html_entity_decode($this->config->get('config_headphone2'), ENT_QUOTES, 'UTF-8');
$data['headmail'] = html_entity_decode($this->config->get('config_headmail'), ENT_QUOTES, 'UTF-8');
$data['headaddress'] = html_entity_decode($this->config->get('config_headaddress'), ENT_QUOTES, 'UTF-8');
$data['headworktime'] = html_entity_decode($this->config->get('config_headworktime'), ENT_QUOTES, 'UTF-8');
$data['headsocial'] = html_entity_decode($this->config->get('config_headsocial'), ENT_QUOTES, 'UTF-8');

P.S. — я специально преобразовываю все эти строки в html код (благодаря этому мы можем вставлять иконки, картинки и ссылки).

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

Сильно не ужасаемся, сейчас перейдём к оформлению.

10. Открываем файл: ../public_html/catalog/view/stylesheet/stylesheet.css и в конец файла вставляем эти строки:

/* headpanel dropdown */
.headmenu {
    min-width: 220px;
    padding: 10px 15px;
}
.headmenu li+li {
    padding: 15px 0 0 0;
}
.headmenu i {
    color: #2196F3;
    padding-right: 5px;
}
.headmenu .small {
    font-size: 12px;
    color: #90A4AE;
}

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

Конечно оформление так себе, требуется доработка, но всё равно лучше чем было. 🙂

P.S. — В следующих статьях мы вновь вернёмся к верхней панели (и к шапке сайта — сейчас она мне не слишком симпатична) и улучшим оформление выпадающего списка.

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

На этом всё, надеюсь статья была вам полезна.