Skillbox

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

Так получилось, что срочно возникла необходимость создать интернет-магазин на 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;}
 Конечный результат можно увидеть на скриншоте:

Не забываем обновлять кэш модификаторов и кэш браузера.

Так же через header.twig можно отредактировать верхнее меню, перенести строку поиска и корзину, но об этом в следующих статьях.

 

Добавить комментарий

Ваш e-mail не будет опубликован.