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

Категория: 

Практически для любого сайта важнейшей частью является шапка и информация, размещенная в ней, ведь это первое, на что обращает внимание посетитель, попавший на сайт. В шапке сайта может быть размещен абсолютно любой текст, например, адрес магазина, телефон и другие контакты, время работы, либо просто приветственное сообщение. Рассмотрим самый простой способ добавления текста в шапку 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 в зависимости от размера изображения. Сохраняем файл stylesheet.css и видим следующее:

Возможно, вам также будут интересны статьи:

Tags: 

Комментарии

Аватар пользователя alexidi

Спасибо за статью!! Я написал в другой статье комментарий с вопросом, но потом увидел эту статью, и подумал что уместней сюда было бы задать его. Как можно добавить счетчик в шапку сайта? Заранее спасибо!

Аватар пользователя Asterial

А у вас счетчик - это модуль для opencart или просто скрипт?

Аватар пользователя alexidi

У меня ничего нет. У вас есть идеи по этому поводу?

Аватар пользователя Asterial

Вариантов много может быть. Вот, например, http://www.opencart.com/index.php?route=extension/extension/info&extensi... модуль счетчика обратного отсчета, но там явно нужна будет работа со стилями, чтобы оформить его. Можно просто добавить готовый скрипт сразу в код шапки, http://www.jqueryscript.net/plus/search.php?keyword=count+down&searchtyp... вот тут неплохие скрипты на мой взгляд. Но и в том, и в другом случае просто поставить и включить не получится, придется многое доделывать.

Аватар пользователя Рома

Спасибо большое за хороший урок!

Аватар пользователя olga

Здравствуйте! А как перенести слева направо? у меня вставка заехала на логотип-если перенести на др сторону может получиться оч симпатично.Спасибо)

Аватар пользователя Asterial

Вот здесь:

.header_text {
position: absolute;
top: 100px;
left: 20px;

поменять left: 20px на right: 20px

Тогда надпись будет справа с отступом 20px. Меняя значение 20 можно увеличивать или уменьшать размер отступа. Если отступ не нужен, можно поставить right: 0px

Аватар пользователя koks

Здравствуйте, как в повернуть в правый угол? бусвояж.р у меня блок по умолчанию стоит слева.

Аватар пользователя Asterial

Как и написано выше, надо поменять left: 20px на right: 20px
Получится:

.header_text {
position: absolute;
top: 100px;
right: 20px;

Аватар пользователя olga

Спасибо большое! Все получилось просто здорово!

Аватар пользователя Илона

Скажите как поменять местами слайдер и меню в шаблоне? Мне нужно чтобы меню выводилось под слайдером...

Аватар пользователя Asterial

Просто так их не поменять местами, надо добавлять новую позицию в шапке для модуля слайдера

Аватар пользователя олег

а если вместо кириллицы появляется абракадабра (знаки вопроса в треугольничках)? смена кодировки на koi8-ru не помогает...

Аватар пользователя Asterial

скачайте бесплатный редактор Notepad++ и в нем перекодируйте файл в utf-8 без BOM (пункт меню Кодировки - Преобразовать в UTF-8 без BOM), и в будущем тоже всегда проверяйте кодировку файла, если пишете в них что-нибудь кириллицей

Аватар пользователя Efim

А у меня шапка верхнее меню накрыла.

Аватар пользователя Asterial

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

Аватар пользователя Олег

Спасибо за урок. Поменял картинки, убрал рамки - получилось очень красиво.

Аватар пользователя Pavluha.net

Это, конечно, хорошо, но как добавить в шапку тот адрес магазина, который устанавливается в админке в настройках магазина на вкладке "Общие" и выводится на странице "Связаться с нами"? Простое копирование переменной $address из шаблона contact.tpl ничего не дало

Аватар пользователя Asterial

Кроме $address в шаблоне, надо добавить в файле header.php в папке catalog/controller/common объявление этой переменной, например, после строки $this->data['checkout'] = $this->url->link('checkout/checkout', '', 'SSL'); добавить:

$this->data['address'] = $this->config->get('config_address'); для адреса
$this->data['telephone'] = $this->config->get('config_telephone'); для телефона

и тогда уже можно использовать переменные $address и $telephone в шаблоне шапки

Аватар пользователя Павлуха

Спасибо, уже нашёл нечто подобное, но этот вариант мне нравится больше - сделаю так.

Аватар пользователя Mike

Как меню растянуть в длину ,в одну полоску, а то из-за этой формы, пустое пространство слева осталось? Спасибо!

Аватар пользователя Asterial

какое именно меню? Их же там два как минимум, если в стандартном шаблоне

Аватар пользователя Юрий

Подскажите, как сделать шапку и главное меню как здесь: http://deliri.ru/demoshop/# ???

Спасибо!

Аватар пользователя Asterial

А что именно в шапке интересует, ведь в ней ничего сложного нет? Все элементы как раз и можно расположить, используя абсолютное позиционирование из данной статьи

Аватар пользователя Александр

Здравствуйте! Не могли-бы вы тоже самое с вордпрессом описать))) Как добавить инфу в шапку...
Спасибо!

Аватар пользователя Asterial

У вордпресса все практически так же, только файлы шаблона редактируются по пути /wp-content/themes/ваша тема/

Добавляете блок в файл header.php

<div class="header_text">

<div class="header_adr"><b>Адрес:</b> Название города<br />

Название улицы, дом №3</div>

<div class="header_phone"><b>Телефон:</b> (909)123456789</div>

</div>

Kуда-нибудь после тэга body, или еще лучше внутри тэга header, если он есть.

Стили прописываете в файле style.css . Он может называться немного по-другому, зависит от темы.
Картинки можно положить в папку image или подобную ей, если нет папки с картинками, то создать ее. Если название или путь к папке с картинками будет другой, надо поменять путь в строках
background: url('../image/adres.png') no-repeat left center;
и
background: url('../image/phone.png') no-repeat left center;

Аватар пользователя Butch

Спасибо!! подробно и доступно все описали..то что надо нам чайникам)) а можно вопросы позадавать попутно?))

Аватар пользователя Asterial

Если есть вопросы, пишите мне на почту или через форму контактов

Аватар пользователя Вадим

У меня в header CSS

width: 950px; /* Ширина блока */
background: #79a0c1; /* Цвет фона */

margin-top: 19px;
padding: 5px 5px 5px 5px; /* Поля вокруг текста */
border: 0px solid #ccc; /* Параметры рамки */

height: 140px;
margin-bottom: 7px;
padding-bottom: 4px;
position:absolute;
z-index: 99;

когда вставляю код, то он закрывается background:
Убрать его не могу, нужен цвет. То есть адрес выведен, но его не видно. Он как бы заднем фоне получается. Что можно сделать?
пробовал установить прозрачность для header но тогда прозрачным становится весь сайт.

Аватар пользователя Asterial

Попробуйте для .header_text дописать стиль z-index: 100;

Аватар пользователя Александр Борис

А как в таком случае менять контакты из админки?