Добавляем адрес и телефон в шапку сайта на Opencart

Практически для любого сайта важнейшей частью является шапка и информация, размещенная в ней, ведь это первое, на что обращает внимание посетитель, попавший на сайт. В шапке сайта может быть размещен абсолютно любой текст, например, адрес магазина, телефон и другие контакты, время работы, либо просто приветственное сообщение. Рассмотрим самый простой способ добавления текста в шапку Opencart.

Для данного способа достаточно отредактировать файлы шаблона header.tpl и файл стилей stylesheet.css. Есть и другие способы, например, вывод адреса и телефона из информации о магазине, которая редактируется в админке, но у такого способа, на мой взгляд, есть минусы — текст, выведенный таким образом нельзя оформить, выделив отдельные слова html тегами.

Перейдем непосредственно к добавлению текста в шапку сайта. Откроем файл шаблона шапки — header.tpl. Он находится по следующему пути: catalog/view/theme/default/template/common/header.tpl. Если вы используете не стандартный шаблон default, то надо изменять файл header.tpl в папке с названием своего шаблона.

Добавим новый блок, назовем его header_text и вставим после блока welcome перед строкой <div class=»links»>, на скриншоте вставленный блок выделен серым:

Содержание блока header_text в данном примере будет таким:

<div class="header_text">
<div class="header_adr"><b>Адрес:</b> Название города<br />
Название улицы, дом №3</div>
<div class="header_phone"><b>Телефон:</b> (909)123456789</div>
</div>

Как видим, он состоит из основного контейнера header_text и двух дополнительных header_adr — для адреса и header_phone для телефона. Заголовки Адрес и Телефон выделены жирным (теги <b></b>), в адресе после названия города стоит переход на новую строку с помощью <br />. У вас текст и оформление блока могут быть абсолютно любыми, но для примера оставим их такими.

Сохраним файл header.tpl, не забыв проверить кодировку, она должна быть UTF-8, а еще лучше, UTF-8 без BOM, так как мы используем русский текст в файле, другие кодировки лучше не использовать.

Теперь откроем файл таблиц стилей stylesheet.css. Он расположен по адресу catalog/view/theme/default/stylesheet/stylesheet.css.

Для начала изменим высоту шапки, чтобы было где разместить адрес и телефон: найдем строку #header (примерно 92 строка) и изменим значение высоты height: 190px;

Теперь добавим описание стилей нашего нового блока. Добавлять будем после #header #welcome (примерно 299 строка):

.header_text {
position: absolute;
top: 100px;
left: 20px;
font-size: 12pt;
font-family: verdana;
font-style: italic;
color: #333;
border: 1px dashed #38B0E3;
padding: 10px;
}
.header_adr {
background: url('../image/adres.png') no-repeat left center;
padding-left: 40px;
}
.header_phone {
background: url('../image/phone.png') no-repeat left center;
padding-left: 40px;
}

Подробнее о том, что мы добавили:

header_text — абсолютное позиционирование position: absolute; позволяет размещать блок в любом месте главного контейнера с помощью указания координат. В данном примере координаты указаны top:100px; left: 20px; изменяя эти значения в большую или меньшую сторону, можно разместить блок в любом месте шапки. Далее указаны настройки шрифта для блока: размер 12pt, семейство шрифта Verdana, наклон шрифта — italic. Цвет шрифта — темно-серый #333. Рамка вокруг блока толщиной 1px, пунктирная, голубого цвета, отступ между текстом и рамкой 10px.

.header_adr и .header_phone оформлены с помощью картинок. Изображения положить в папку catalog/view/theme/default/image . Padding-left задает отступ от картинки, если вы захотите установить свою картинку другого размера, то следует изменить значение padding-left в зависимости от размера изображения.

---

Или еще один метод:

Давайте приступим.

Открываем файл: /catalog/controller/common/header.php и добавляем в него следующий код. Добавлять нужно в том месте, где подключаются аналогичные переменные, в формате — $this->data и так далее.

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

Переходим в файл шаблона по адресу: /catalog/view/theme/ВАША_ТЕМА/template/common/header.tpl и в нужном блоке добавляем вывод переменных.

<?php echo $address; ?>
<?php echo $telephone; ?>
<?php echo $email; ?>

На этом все. Метод проверенный и работает на 100% корректно.

Есть небольшой нюанс – это ограничение вводимых символов в поле телефон там лимит в 32 символа, получается, ввести всего два телефона. Чтобы исправить этот момент открываем файл:
admin/controller/setting/setting.php. В нем проводим поиск по числу 32 и находим строчку:

if ((utf8_strlen($this->request->post['config_telephone']) < 3) || (utf8_strlen($this->request->post['config_telephone']) > 32)) {
            $this->error['telephone'] = $this->language->get('error_telephone');
        }

Выставляем нужное значение, например 200 и проверяем полученный результат. На этом сегодня все, надеюсь, этот материал вам будет полезен. Подписывайтесь на обновления блога справа в сайдбаре.