Как добавить адреса и телефоны в шапку OpenCart?

6079

Так получилось, что срочно возникла необходимость создать интернет-магазин на OpenCart.
При этом практического опыта работы с этой CMS до начала проектирования сайта у меня не было.
В арсенале были знания css3 и html5, немного php и javascript, а из популярных систем управления я был знаком только с joomla.
Но отступать было некуда — задача была поставлена и рабочий процесс закипел.

Первая проблема, с которой я столкнулся, это добавление информации о магазине (адреса, телефоны и т.д.) в шапку сайта.

После непродолжительных поисков контроллера, отвечающего за вывод шапки в OpenCart, в файловой структуре на хостинге был найден файл header.twig, который, как выяснилось, необходимо править не через сервер, а через админ-панель.
Там он расположен по адресу: дизайн→редактор шаблона→common→header.twig.

1. Открываем файл в редакторе, и после контейнера:

<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>

в строке 76 вставляем следующий код:

<div class="col-sm-3">
<div class="adress">
<p><i class="fa fa-map-marker"></i> Адрес: {{storeaddress}}</p>
<p><i class="fa fa-phone"></i>Телефон: {{ telephone }}</p>
</div>
</div>

Так же необходимо сократить в размерах контейнеры, содержащие логотип и строку поиска.

Для этого в строках 71 и 83 <div class="col-sm-4"> переименовываем в <div class="col-sm-3">.

2. В контроллер, расположенный по адресу public_html/catalog/controller/common/header.php

в строке 79 (зависит от вашей темы) после

$data['contact'] = $this->url->link('information/contact');

добавляем, если отсутствует, такую переменную:

$data['storeaddress'] = html_entity_decode($this->config->get('config_address'), ENT_QUOTES, 'UTF-8');

3. В css-файл, расположенный по адресу:
../public_html/catalog/view/theme/default/stylesheet.css, где «default» — название вашей темы, прописываем следующее:

.adress i {
font-size: 17px;
margin-right: 7px;
color: #2199c7;}
.adress p {
font-size: 15px;
text-align: center;}

Конечный результат можно увидеть на скриншоте: