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

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

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

  • 1. Работаем с файлом header.tpl
  • 2. Работаем с файлом header.php (перевод)
  • 3. Работаем с файлом header.php (контроллер)
  • 4. Работаем с файлом wishlist.php (перевод)
  • 5. Работаем с файлом compare.php (перевод)
  • 6. Работаем с файлом common.js (скрипты)

Приступим:

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

<?php if ($categories) { ?>
<div class="container">
<nav id="menu" class="navbar">
<div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<?php foreach ($categories as $category) { ?>
<?php if ($category['children']) { ?>
<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
<div class="dropdown-menu">
<div class="dropdown-inner">
<?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
<ul class="list-unstyled">
<?php foreach ($children as $child) { ?>
<li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>
</div>
<a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
</li>
<?php } else { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
</div>
</nav>
</div>
<?php } ?>

вставим эти:

<nav id="top">
<div class="container">
<?php if ($categories) { ?>
<div class="btn-group category-header col-sm-3 col-xs-12">
<button type="button" class="btn btn-navbar" data-toggle="dropdown"><span><?php echo $text_category; ?> <i class="fa fa-bars"></i></span></button>
<ul class="dropdown-menu nav col-sm-12 col-xs-12">
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>
</ul>
</div>
<?php } ?>
</div>
</nav>

Смотрим что у нас получилось:

Неказисто, но мы же только начали!

P.S. – Я вывожу только главные категории, с нормальным выводом под-категорий я так и не разобрался (чтобы были + для открытия подкатегорий и – для закрытия), поэтому сорри – нужна помощь js или php прогера – а у меня таких знакомых увы нет. Как вариант купить подобный модуль — https://codecanyon.net/item/so-mega-menu-responsive-opencart-module/14512166?s_rank=1 , ну возможно позже что-то придумаю или кого то найму для “правильной” реализации подкатегорий, в общем посмотрим.

Теперь нам необходимо переместить поиск, удаляем эти строки (94-95):

<div class="col-sm-5"><?php echo $search; ?>
</div>

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

<?php if ($categories) { ?>
<div class="btn-group category-header col-sm-3 col-xs-12">
<button type="button" class="btn btn-navbar" data-toggle="dropdown"><span><?php echo $text_category; ?> <i class="fa fa-bars"></i></span></button>
<ul class="dropdown-menu nav col-sm-12 col-xs-12">
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>
</ul>
</div>
<?php } ?>

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

<div class="col-sm-6 col-xs-12"><?php echo $search; ?></div>

Результат:

Теперь переместим закладки и добавим сравнение товаров

Удалим эту строку (71):

<li><a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $text_wishlist; ?>"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_wishlist; ?></span></a></li>

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

<div class="col-sm-6 col-xs-12"><?php echo $search; ?></div>

вставим эти:

<div class="col-sm-3 col-xs-12">
<a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $title_wishlist; ?>"><i class="fa fa-heart"></i> <span class="total"><?php echo $text_wishlist; ?></span></a>
<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>
</div>

Результат:

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

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

$_['text_wishlist']      = 'Мои закладки (%s)';

вставим эти:

$_['title_wishlist']     = 'Мои закладки';
$_['text_wishlist']      = '%s';
$_['title_compare']      = 'Сравнение товаров';
$_['text_compare']       = '%s';

аналогично изменим файлы других языков, к примеру ../catalog/language/en-gb/common/header.php (если вы используете несколько языков)

Нам необходимо отредактировать ещё несколько файлов перевода, но мы это сделаем чуть позже.

3. Откроем файл ../catalog/controller/common/header.php и после этих строк (52-59):

// Wishlist
if ($this->customer->isLogged()) {
$this->load->model('account/wishlist');

$data['text_wishlist'] = sprintf($this->language->get('text_wishlist'), $this->model_account_wishlist->getTotalWishlist());
} else {
$data['text_wishlist'] = sprintf($this->language->get('text_wishlist'), (isset($this->session->data['wishlist']) ? count($this->session->data['wishlist']) : 0));
}

вставим эти:

// Compare

$data['text_compare'] = sprintf($this->language->get('text_compare'), (isset($this->session->data['compare']) ? count($this->session->data['compare']) : 0));

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

$data['wishlist'] = $this->url->link('account/wishlist', '', true);

вставим эту:

$data['compare'] = $this->url->link('product/compare', '', true);

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

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

вставим эти:

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

4. Откроем файл ../catalog/language/ru-ru/account/wishlist.php и вместо этой строки (8):

$_['text_wishlist'] = 'Закладки (%s)';

вставим эту:

$_['text_wishlist'] = '%s';

5. Откроем файл ../catalog/language/ru-ru/product/compare.php и вместо этой строки (19):

$_['text_compare']      = 'Сравнение товаров (%s)';

вставим эту:

$_['text_compare']      = '%s';

6. Откроем файл ../catalog/view/javascript/common.js и вместо этой строки (263):

$('#wishlist-total').attr('title', json['total']);

вставим эту:

$('#wishlist-total').attr('title');

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

$('#compare-total').html(json['total']);

добавим эту:

$('#compare-total').attr('title');

P.S. — Это необходимо чтобы при наведении на иконки закладок и сравнения товара после добавления товара в закладки или сравнения при наведении показывался заголовок, а не количество добавленных товаров.

Результат:

Сравниваем до и после:

 

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