Контакты в шапке opencart с картинкой через админ-панель (учимся думать). Контакты в шапке в opencart

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

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

<div> <div><b>Адрес:</b> Название города<br /> Название улицы, дом №3</div> <div><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 и видим следующее:

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

asterial.ru

Контакты в шапке opencart с картинкой через админ-панель (учимся думать) | Мелочи для RAMStudio

14.05.2016 HELP, Opencart изменения 1,240 Просмотры

Сегодня заканчиваем статью-урок о «Контакты в шапке opencart с картинкой через админ-панель». Сначала планировал сделать два или три урока по этой тебе, но в результате получилось одним уроком и очень даже не сложный.В основе лежит прошлый урок. В этом уроке мы добавим возможность загружать изображение к контакту. Именно загружать, а не указывать пусть к изображению. Приступим.

1. Для начала сделаем верстку и выведем все нужные нам кнопки и формы в нужное место для контактов в шапке opencart. Первый будет файл шаблона шапки сайта catalog\view\theme\default\template\common\header.tpl:

Находим <div> … </div> Удаляем все что есть в этом блоке и вставляем: <?php if ($phone1) {?> <div> <?php if ($cont_1) {?> <img src="<?php echo $cont_1; ?>" /> <?php }?> <?php echo $phone1;?></div> <?php }?> <?php if ($phone2) {?> <div> <?php if ($cont_2) {?> <img src="<?php echo $cont_2; ?>" /> <?php }?> <?php echo $phone2;?></div> <?php }?> <?php if ($phone3) {?> <div> <?php if ($cont_3) {?> <img src="<?php echo $cont_3; ?>" /> <?php }?> <?php echo $phone3;?></div> <?php }?>

Находим

Удаляем все что есть в этом блоке и вставляем:

<?php if ($phone1)

vseprosto.top

"OpenCart 3.0 Выводим свои страницы в шапку сайта и дорабатываем преимущества" заблокирована OpenCart 3.0 Выводим свои страницы в шапку сайта и дорабатываем преимущества

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

Живой пример: about-all.ru

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

Создаём информационные страницы
Выводим ссылки на страницы в шапку сайта
Добавляем преимуществу магазина свою ссылку

Приступим:

1. Открываем админку нашего магазина и переходим:

Каталог –> Статьи –> Добавить –> Заполняем, к примеру так:

Запоминаем seo url вашей страницы, в моём случае это: oplata (3 вкладка SEO)

Так-же заполняем страницу Доставка (если у вас её нет после установки cms), у меня эта страница уже есть, её seo url: delivery

2. Заходим на ftp вашего сайта и переходим: ../public_html/catalog/view/theme/default/template/common/header.twig и после этих строк (41-43):

<nav><div>{{ currency }}{{ language }}

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

<div><ul><li><a href="oplata">Оплата</a></li><li><a href="delivery">Доставка</a></li></ul></div>

При необходимости можно подобрать разные иконки к нашим ссылкам, как всегда берём иконки здесь: fontawesome.com/v4.7.0/icons/, я выбрал вот такую стрелу:

и добавлю её к обоим нашим ссылкам, вместо этих строк (44-49):

<div><ul><li><a href="oplata">Оплата</a></li><li><a href="delivery">Доставка</a></li></ul></div>

я вставляю эти:

<div><ul><li><a href="oplata"><i aria-hidden="true"></i> Оплата</a></li><li><a href="delivery"><i aria-hidden="true"></i> Доставка</a></li></ul></div>

Почистим кеш:

Админка –> Панель управления –> Настройки разработчика (синий плюс в правой части, под кнопкой выход) –> нажимаем обе кнопки обновить.

Смотрим результат:

3. У нашего магазина есть преимущество Различные способы оплаты, будет логично прикрепить этому блоку ссылку на страницу Оплата – там у нас будет информация о том как оплатить заказ и какие способы доступны.

Открываем админку и переходим:

Модули / Расширения –> Модули / Расширения –> Преимущества –> Редактировать –> Вид: Код (Code View – Иконка </>) и вместо этого кода (3-6):

<div><div><img src="image/point-of-service.png"></div><div>Различные способы оплаты</div></div>

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

<a href="oplata"><div><div><img src="image/point-of-service.png"></div><div>Различные способы оплаты</div></div></a>

Вновь нажимаем кнопку Вид: Код и нажимаем кнопку Сохранить.

Результат:

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

moushe.ru