Moushe.ru

Блог обо всём

OpenCart 2.3 переделываем верхнее меню



Всем привет, в этой статье мы с вами изменим верхнее меню (где расположены телефон, личный кабинет, закладки, корзина, оформление покупки), так как оно мне не очень нравится – слишком громоздкое, хочу сделать его в виде выпадающего списка + перемещу туда сравнение товара, на мой взгляд будет симпатичнее и удобнее.

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

1. Работаем с файлом header.tpl

2. Работаем с файлом header.php (контроллер)

3. Работаем с файлом header.php (перевод)

4. Работаем с файлами:

  • category.tpl
  • manufacturer_info.tpl
  • search.tpl
  • special.tpl

5. Работаем с файлом stylesheet.css

Приступим:

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

<ul class="list-inline">
<li><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md"><?php echo $telephone; ?></span></li>
<li class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_account; ?></span> <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-right">
<?php if ($logged) { ?>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
<li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
<li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
<li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>
<?php } else { ?>
<li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>
<li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>
<?php } ?>
</ul>
</li>
<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>
<li><a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_shopping_cart; ?></span></a></li>
<li><a href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_checkout; ?></span></a></li>
</ul>

вставим эти:

<ul class="list-inline">
<li class="dropdown"><a href="<?php echo $contact; ?>" title="<?php echo $text_contacts; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-phone"></i><span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header"><?php echo $text_phone; ?></li>
<li><span class="contact_header"><?php echo $telephone; ?></span></li>
</ul>
</li>
<li class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i><span class="caret"></span></a>
<ul class="dropdown-menu">
<?php if ($logged) { ?>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
<li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
<li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
<li><a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a></li>
<li><a href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>"><?php echo $text_checkout; ?></a></li>
<li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>
<?php } else { ?>
<li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>
<li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>
<li><a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a></li>
<li><a href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>"><?php echo $text_checkout; ?></a></li>
<?php } ?>
</ul>
</li>
<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>
<li><a href="<?php echo $compare; ?>" id="compare-total" title="<?php echo $text_compare; ?>"><i class="fa fa-exchange"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_compare; ?></span></a></li>
</ul>

После этого у вас появится пара ошибок в шапке сайта, не волнуйтесь, всё так и должно быть.

Скриншот того что у нас с вами получилось:

Переходим ко второму шагу.

2. Откроем файл ../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));

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

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

вставим эти:

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

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

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

вставим эту:

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

Проверим что у нас получилось? Опа, ошибки пропали:

но надписи какие то нерусские, исправим их в третьем шаге.

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

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

вставим эти строки:

$_['text_compare']       = 'Сравнение товара (%s)';
$_['text_phone']         = 'Наш телефон';
$_['text_contacts']      = 'Наши контакты';

Результат:

Теперь нам необходимо удалить со страниц не нужные нам больше кнопки сравнить (в категориях, результатах поиска, товарах производителя, акциях), переходим к следующему шагу.

4. Откроем файл ../catalog/view/theme/default/template/product/category.tpl и удалим эти строки (63-67):

<div class="col-md-3 col-sm-6">
<div class="form-group">
<a href="<?php echo $compare; ?>" id="compare-total" class="btn btn-link"><?php echo $text_compare; ?></a>
</div>
</div>

из за удаления этих строк немного сместились сортировки товаров и выбор количества товаров на странице, для исправления этого косяка нужно вместо этой строки (57):

<div class="col-md-2 col-sm-6 hidden-xs">

вставить эту:

<div class="col-md-4 col-sm-6 hidden-xs">

а вместо этой (77):

<div class="col-md-3 col-xs-6">

вставить эту:

<div class="col-md-4 col-xs-6">

Результат:

Точно также редактируем эти файлы:

  • ../catalog/view/theme/default/template/product/manufacturer_info.tpl
  • ../catalog/view/theme/default/template/product/search.tpl
  • ../catalog/view/theme/default/template/product/special.tpl

Номера строк отличаются, но изменения не сложные.

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

.contact_header {
display: block;
text-align: center;
}

Финальный результат наших работ:

На этом всё, следите за нашими новостями и до новых встреч.

1 Комментарий

  1. Алексей

    25.07.2017 at 14:11

    Большое Спасибо! Как приятно иметь дело с человеком который понимает для кого он пишет и кому помогает в своем блоге!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

CAPTCHA image
*

© 2017 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика