CMS OpenCart 3.0 переделываем шапку магазина (1 часть)

Всем привет, сегодня мы с вами выведем в шапку нашего интернет магазина контакты, стоит отметить что контакты будут прописываться не в файле шаблона, а в админке и они будут поддерживать html теги. Статья точно будет вам полезна!

Список задач на сегодня:

  1. Работаем с файлом setting.twig (admin/view/template/setting/setting.twig)
  2. Работаем с файлом setting.php (admin/controller/setting/setting.php)
  3. Работаем с файлом setting.php (admin/language/ru-ru/setting/setting.php)
  4. Работаем с файлом header.twig (catalog/view/theme/default/template/common/header.twig)
  5. Работаем с файлом header.php (catalog/controller/common/header.php)

Приступим:

1. Откроем файл setting.twig и после этих строк (130-135):

<div class="form-group">
  <label class="col-sm-2 control-label" for="input-geocode"><span data-toggle="tooltip" data-container="#tab-general" title="{{ help_geocode }}">{{ entry_geocode }}</span></label>
  <div class="col-sm-10">
    <input type="text" name="config_geocode" value="{{ config_geocode }}" placeholder="{{ entry_geocode }}" id="input-geocode" class="form-control" />
  </div>
</div>

вставим эти:

              <div class="form-group">
                <label class="col-sm-2 control-label" for="input-head-contacts">{{ text_head_contacts }}</label>
                <div class="col-sm-10">
                  <textarea name="config_head_contacts" placeholder="{{ entry_head_contacts }}" rows="5" id="input-head-contacts" class="form-control">{{ config_head_contacts }}</textarea>
                </div>
              </div>

 

2. Откроем файл setting.php и после этих строк (238-242):

if (isset($this->request->post['config_geocode'])) {
  $data['config_geocode'] = $this->request->post['config_geocode'];
} else {
  $data['config_geocode'] = $this->config->get('config_geocode');
}

вставим эти:

if (isset($this->request->post['config_head_contacts'])) {
  $data['config_head_contacts'] = $this->request->post['config_head_contacts'];
} else {
  $data['config_head_contacts'] = $this->config->get('config_head_contacts');
}

3. Откроем файл setting.php и после этой строки (21):

$_['text_contact']                   = 'Контакты';

вставим эту:

$_['text_head_contacts']             = 'Контакты в шапке';

после этой строки (46):

$_['entry_geocode']                  = 'Geocode';

вставим эту:

$_['entry_head_contacts']            = 'Контакты для шапки магазина, стандартный шаблон';

Чистим кеш модификаторов и проверяем что у нас получилось (админка > система > настройки >  магазин):

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

С админкой закончили, переходим к витрине нашего магазина.

4. Откроем файл header.twig и вместо этих строк (69-80):

  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
      </div>
      <div class="col-sm-5">{{ search }}</div>
      <div class="col-sm-3">{{ cart }}</div>
    </div>
  </div>
</header>

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

  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
      </div>
      <div class="col-sm-4">{{ head_contacts }}</div>
      <div class="col-sm-4">
       {{ search }}
       {{ cart }}
      </div>
    </div>
  </div>
</header>

5. Откроем файл header.php и после этой строки (72):

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

вставим эту:

$data['head_contacts'] = html_entity_decode($this->config->get('config_head_contacts'), ENT_QUOTES, 'UTF-8');

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

Отлично, всё работает, теперь переходим в админку (в созданное нами поле) и пробуем добавить в наш текст html теги и иконки:

<i class="fa fa-phone" aria-hidden="true"></i> Телефон<br>
<i class="fa fa-clock-o" aria-hidden="true"></i> часы работы<br>
<i class="fa fa-envelope" aria-hidden="true"></i> почта

Вновь переходим к витрине и проверяем:

Отлично, всё работает как положено. На сегодня всё, вступайте в нашу группу в ВК и следите за выходом наших новых материалов.

Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru

11 комментариев

  1. Классно! Спасибо за статью. В этой версии статьи более понятно как сделать красивую шапку профиля. Мне нравится!

  2. Подскажите как сделать номер телефона и email кликабельными? Если вводить
    то кликабельной становится вся надпись. Сайт expertdveri.com

    • Поменяйте col-sm-3 на col-sm-4 (в обёртке логотипа) в header.twig и уменьшите значение col-sm-6 на col-sm-5 в обёртке поиска, потом почистите все кеши, если картинка логотипа небольшая по ширине — увеличьте ширину. Комментарии не поддерживают код, поэтому код присылайте в ВК.

  3. После обновления сайта (движка) , я так понял, все слетает и надо заново делать?

Оставить комментарий

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания применять.

Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Меню навигации