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

Комментарии

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

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

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

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

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

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

Вот здесь:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кроме $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 в шаблоне шапки

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

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

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

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

Спасибо!

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

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

У вордпресса все практически так же, только файлы шаблона редактируются по пути /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;

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

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

У меня в 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 но тогда прозрачным становится весь сайт.

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

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