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

Добавляем адрес и телефон в шапку сайта на 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 в данном примере будет таким:

Как видим, он состоит из основного контейнера 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; изменяя эти значения в большую или меньшую сторону, можно разместить блок в любом месте шапки. Далее указаны настройки шрифта для блока: размер 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 и так далее.

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

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

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

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

Про Александр

Здравствуйте, меня зовут Александр Мороз. Профессионально занимаюсь созданием сайтов . Выражаюсь на диалектах PHP, SQL, JavaScript, HTML, CSS, XML, jQuery. Иногда и матом в особо сложных случаях :)

Проверьте также

Подключение к базе данных, CRUD запросы

В этой статье мы рассмотрим, как вы можете использовать базу данных MySQL для выполнения операций …

Один комментарий

  1. В этом что-то есть. Большое спасибо за помощь в этом вопросе, теперь я буду знать.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *