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

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

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

  • 1. Работаем с файлом theme_default.tpl
  • 2. Работаем с файлом theme_default.php (перевод)
  • 3. Работаем с файлом theme_default.php (контроллер)
  • 4. Работаем с файлом header.tpl
  • 5. Работаем с файлом header.php (контроллер)
  • 6. Учимся заполнять ссылки (админка)
  • 7. Работаем с файлом header.tpl (оформляем ссылки)
  • 8. Работаем с файлом header.php (перевод)
  • 9. Работаем с файлом header.php (контроллер)
  • 10. Работаем с файлом stylesheet.css (стили)

Приступим:

1. Откроем файл ../admin/view/template/extension/theme/theme_default.tpl и после этих строк (226-241):

<div class="form-group required">
<label class="col-sm-2 control-label" for="input-image-location"><?php echo $entry_image_location; ?></label>
<div class="col-sm-10">
<div class="row">
<div class="col-sm-6">
<input type="text" name="theme_default_image_location_width" value="<?php echo $theme_default_image_location_width; ?>" placeholder="<?php echo $entry_width; ?>" id="input-image-location" class="form-control" />
</div>
<div class="col-sm-6">
<input type="text" name="theme_default_image_location_height" value="<?php echo $theme_default_image_location_height; ?>" placeholder="<?php echo $entry_height; ?>" class="form-control" />
</div>
</div>
<?php if ($error_image_location) { ?>
<div class="text-danger"><?php echo $error_image_location; ?></div>
<?php } ?>
</div>
</div>

вставим эти:

<div class="form-group">
<label class="col-sm-2 control-label" for="input-links-header"><?php echo $entry_links_header; ?></label>
<div class="col-sm-10">
<textarea name="theme_default_config_links_header" rows="5" placeholder="<?php echo $entry_links_header; ?>" class="form-control"><?php echo $theme_default_config_links_header; ?></textarea>
</div>
</div>

Результат:

2. Откроем файл ../admin/language/ru-ru/extension/theme/theme_default.php и после этой строки (30):

$_['entry_height']                     = 'Высота';

вставим эту:

$_['entry_links_header']               = 'Ссылки в шапке';

P.S. – Если вы используете в админке другой язык администратора то произведите аналогичную правку для своего языка.

3. Откроем файл ../admin/controller/extension/theme/theme_default.php и после этой строки (44):

$data['entry_height'] = $this->language->get('entry_height');

вставим эту:

$data['entry_links_header'] = $this->language->get('entry_links_header');

а после этих строк (349-355):

if (isset($this->request->post['theme_default_image_location_height'])) {
$data['theme_default_image_location_height'] = $this->request->post['theme_default_image_location_height'];
} elseif (isset($setting_info['theme_default_image_location_height'])) {
$data['theme_default_image_location_height'] = $setting_info['theme_default_image_location_height'];
} else {
$data['theme_default_image_location_height'] = 50;
}

вставим эти:

if (isset($this->request->post['theme_default_config_links_header'])) {
$data['theme_default_config_links_header'] = $this->request->post['theme_default_config_links_header'];
} else {
$data['theme_default_config_links_header'] = $this->config->get('theme_default_config_links_header');
}

Результат:

P.S. – Вписываем в поле любой текст и нажимаем кнопку сохранить, повторно открываем страничку и если всё сделано правильно набранный текст должен сохраниться в вашем поле.

P.P.S. – Для совсем новичков, путь к странице управления темой:

Админка > Дополнения > Дополнения > Шаблоны

Проверили и всё работает? Переходим к следующему шагу.

4. Откроем файл ../catalog/view/theme/default/template/common/header.tpl и вместо этой строки (93):

<div class="col-sm-3"><?php echo $cart; ?></div>

вставим эту:

<div class="col-sm-8"><?php echo $links_header; ?></div>

а после этой строки (112):

<a href="<?php echo $compare; ?>" id="compare-total" title="<?php echo $title_compare; ?>"><i class="fa fa-exchange"></i> <span class="total"><?php echo $text_compare; ?></span></a>

вставим эту:

<?php echo $cart; ?>

Результат:

Как видим появилась ошибка, исправим её в следующем шаге.

5. Откроем файл ../catalog/controller/common/header,php и после этой строки (96):

$data['telephone'] = $this->config->get('config_telephone');

вставим эту:

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

Результат:

Отлично, вывод настроен, теперь можно нормально заполнить и оформить.

6. Заходим в админку и переходим:

Админка > Дополнения > Дополнения > Шаблоны > Редактировать > Ссылки в шапке

и заполняем нужными вам ссылками, вот такой простой конструкцией:

<li><a href="SEO URL">название пункта</a></li>

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

<li><a href="/">Главная</a></li>
<li><a href="about_us">О компании</a></li>
<li><a href="brands">Бренды</a></li>
<li><a href="contact_us">Контакты</a></li>

P.S. – Только не копируйте мой код, а вбивайте ссылки своими ручками (или замените кавычки в ссылках), а то при переходе по моим ссылкам может выдавать ошибку – страница не найдена.

Результат:

7. Вновь откроем файл ../catalog/view/theme/default/template/common/header.tpl и вместо этой строки (93):

<div class="col-sm-8"><?php echo $links_header; ?></div>

вставим эти:

<nav class="navbar navbar-default col-sm-8 menu-header">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-span"><?php echo $text_menu_header; ?></span>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<?php echo $links_header; ?>
</ul>
</div>
</nav>

Результат:

Вроде неплохо, но на мобильной версии появилась ошибка, исправим её в следующем шаге.

8. Откроем файл ../catalog/language/ru-ru/common/header.php и после этой строки (20):

$_['text_page']          = 'страница';

вставим эту:

$_['text_menu_header']   = 'Ссылки';

Естественно можете переименовать на свой вкус.

9. Откроем файл ../catalog/controller/common/header.php и после этой строки (80):

$data['title_compare'] = $this->language->get('title_compare');

вставим эту:

$data['text_menu_header'] = $this->language->get('text_menu_header');

10. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и добавим в конец файла эти строки:

/* Header menu Fix */
@media (min-width: 768px) {
.menu-header {
border: none !important;
background: #fff !important;
}
.menu-header ul li a {
font-size: 14px !important;
color: #263238 !important;
text-transform: uppercase;
font-weight: 500;
}
.menu-header ul li a:hover {
color: #00BCD4 !important;
}
.menu-header ul li+li:after {
content: '';
display: block;
position: absolute;
top: 14px;
width: 0px;
height: 20px;
border-right: 1px solid #DDD;
}
}
@media (max-width: 768px) {
.menu-header {
margin: 0;
}
.navbar-span {
padding: 14px 0;
font-size: 14px;
}
}

Результат:

На сегодня всё, продолжим в следующей части статьи.