Всем привет, сегодня мы с вами выведем в шапку нашего интернет магазина контакты, стоит отметить что контакты будут прописываться не в файле шаблона, а в админке и они будут поддерживать html теги. Статья точно будет вам полезна!
Список задач на сегодня:
- Работаем с файлом setting.twig (admin/view/template/setting/setting.twig)
- Работаем с файлом setting.php (admin/controller/setting/setting.php)
- Работаем с файлом setting.php (admin/language/ru-ru/setting/setting.php)
- Работаем с файлом header.twig (catalog/view/theme/default/template/common/header.twig)
- Работаем с файлом header.php (catalog/controller/common/header.php)
Приступим:
1. Откроем файл setting.twig и после этих строк (130-135):
<div class="form-group"> <label class="col-sm-2 control-label" for="input-geocode"><span data-toggle="tooltip" data-container="#tab-general" title="{{ help_geocode }}">{{ entry_geocode }}</span></label> <div class="col-sm-10"> <input type="text" name="config_geocode" value="{{ config_geocode }}" placeholder="{{ entry_geocode }}" id="input-geocode" class="form-control" /> </div> </div>
вставим эти:
<div class="form-group"> <label class="col-sm-2 control-label" for="input-head-contacts">{{ text_head_contacts }}</label> <div class="col-sm-10"> <textarea name="config_head_contacts" placeholder="{{ entry_head_contacts }}" rows="5" id="input-head-contacts" class="form-control">{{ config_head_contacts }}</textarea> </div> </div>
2. Откроем файл setting.php и после этих строк (238-242):
if (isset($this->request->post['config_geocode'])) { $data['config_geocode'] = $this->request->post['config_geocode']; } else { $data['config_geocode'] = $this->config->get('config_geocode'); }
вставим эти:
if (isset($this->request->post['config_head_contacts'])) { $data['config_head_contacts'] = $this->request->post['config_head_contacts']; } else { $data['config_head_contacts'] = $this->config->get('config_head_contacts'); }
3. Откроем файл setting.php и после этой строки (21):
$_['text_contact'] = 'Контакты';
вставим эту:
$_['text_head_contacts'] = 'Контакты в шапке';
после этой строки (46):
$_['entry_geocode'] = 'Geocode';
вставим эту:
$_['entry_head_contacts'] = 'Контакты для шапки магазина, стандартный шаблон';
Чистим кеш модификаторов и проверяем что у нас получилось (админка > система > настройки > магазин):
Вводим любой текст для проверки и нажимаем кнопку сохранить, если всё сделано правильно при повторном открытии ваш текст должен отображаться в текстовом окне:
С админкой закончили, переходим к витрине нашего магазина.
4. Откроем файл header.twig и вместо этих строк (69-80):
<div class="container"> <div class="row"> <div class="col-sm-4"> <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %} <h1><a href="{{ home }}">{{ name }}</a></h1> {% endif %}</div> </div> <div class="col-sm-5">{{ search }}</div> <div class="col-sm-3">{{ cart }}</div> </div> </div> </header>
вставляем эти:
<div class="container"> <div class="row"> <div class="col-sm-4"> <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %} <h1><a href="{{ home }}">{{ name }}</a></h1> {% endif %}</div> </div> <div class="col-sm-4">{{ head_contacts }}</div> <div class="col-sm-4"> {{ search }} {{ cart }} </div> </div> </div> </header>
5. Откроем файл header.php и после этой строки (72):
$data['telephone'] = $this->config->get('config_telephone');
вставим эту:
$data['head_contacts'] = html_entity_decode($this->config->get('config_head_contacts'), ENT_QUOTES, 'UTF-8');
Проверим работу, чистим все кеши и переходим на витрину нашего магазина:
Отлично, всё работает, теперь переходим в админку (в созданное нами поле) и пробуем добавить в наш текст html теги и иконки:
<i class="fa fa-phone" aria-hidden="true"></i> Телефон<br> <i class="fa fa-clock-o" aria-hidden="true"></i> часы работы<br> <i class="fa fa-envelope" aria-hidden="true"></i> почта
Вновь переходим к витрине и проверяем:
Отлично, всё работает как положено. На сегодня всё, вступайте в нашу группу в ВК и следите за выходом наших новых материалов.
Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru
11 комментариев
Классно! Спасибо за статью. В этой версии статьи более понятно как сделать красивую шапку профиля. Мне нравится!
Подскажите как сделать номер телефона и email кликабельными? Если вводить
то кликабельной становится вся надпись. Сайт expertdveri.com
Ссылку закрываете? Напишу в следующей статье.
Спасибо! Буду ждать! Реально полезные статьи!
А, сам разобрался. Я закрывающий тег не поставил. Теперь все работает! Спасибо!
Владислав, подскажите, как сделать логотип шире?
Логотип у вас надписью или картинкой?
Картинкой.
Пытаюсь менять размер блоков, но результата с картинкой нет.
Поменяйте col-sm-3 на col-sm-4 (в обёртке логотипа) в header.twig и уменьшите значение col-sm-6 на col-sm-5 в обёртке поиска, потом почистите все кеши, если картинка логотипа небольшая по ширине — увеличьте ширину. Комментарии не поддерживают код, поэтому код присылайте в ВК.
После обновления сайта (движка) , я так понял, все слетает и надо заново делать?
Да, всё верно.