CMS OpenCart 3.0 переделка стандартного шаблона (4 часть)

Всем привет, продолжаем дорабатывать шапку стандартного шаблона CMS OpenCart, сегодня мы немного поработаем над внешним видом главного меню, доработаем номер телефона в шапке сайта и улучшим код наших кнопок в корзину, закладки и сравнение товаров.

1. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вместо этих строк:

#menu {
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    background-repeat: repeat-x;
    border-color: #1f90bb #1f90bb #145e7a;
    min-height: 40px;
}

вставим эти:

#menu {
    background: #3F51B5;
    min-height: 40px;
}
#menu .fa {
    font-size: 10px;
    color: #C5CAE9;
}
#menu a {
    font-weight: bold;
    text-transform: uppercase;
}

P.S. — Мы немного изменили стили основного меню, на мой взгляд так симпатичнее.

2. Откроем файл ../catalog/view/theme/default/template/common/header.twig и вместо этой строки:

<div class="col-sm-3"><i class="fa fa-phone"></i> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></div>

вставим эту:

<div class="col-sm-3"><p class="my-phone"><i class="fa fa-phone"></i> {{ telephone }}</p></div>

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

.my-phone {
    padding-top: 10px;
    font-size: 14px;
}

P.S. — Мы немного изменили номер телефона (увеличили размер, добавили отступ).

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

<li class="hicon"><a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
<li class="hicon"><a href="{{ compare }}" id="compare-total" title="{{ text_compare }}"><i class="fa fa-exchange"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_compare }}</span></a></li>

вставим эти:

<li class="hicon"><a href="{{ wishlist }}" id="wishlist-total" title="{{ title_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a></li>
<li class="hicon"><a href="{{ compare }}" id="compare-total" title="{{ title_compare }}"><i class="fa fa-exchange"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_compare }}</span></a></li>

5. Откроем файл ../catalog/view/theme/default/template/common/cart.twig и вместо этой строки:

<button type="button" data-toggle="dropdown" data-loading-text="{{ text_loading }}" class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">{{ text_items }}</span></button>

вставим эту:

<button type="button" data-toggle="dropdown" data-loading-text="{{ text_loading }}" class="btn btn-inverse btn-block btn-lg dropdown-toggle" title="{{ title_cart}}"><i class="fa fa-shopping-cart"></i> <span id="cart-total">{{ text_items }}</span></button>

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

$_['text_wishlist']      = 'Закладки (%s)';
$_['text_compare']       = 'Сравнение (%s)';

вставим эти:

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

7. Откроем файл ../catalog/language/ru-ru/common/cart.php и вместо этой строки:

$_['text_items']     = 'Товаров %s (%s)';

вставим эти:

$_['title_cart']     = 'Корзина';
$_['text_items']     = '%s';

P.S. — Мы поработали над кнопками в корзину, в закладки и сравнением товаров.

Кнопки работают как надо пока мы не добавим в них товары, этот косяк мы сейчас и исправим.

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

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

вставим эту:

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

9. Откроем файл ../catalog/language/ru-ru/checkout/cart.php и вместо этой строки:

$_['text_items'] = 'Товаров %s  (%s)';

вставим эту:

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

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

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

вставим эту:

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

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

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

вставим эти:

$('#compare-total span').html(json['total']);
$('#compare-total').attr('title', json['total']);

P.S. — Обязательно чистим все кеши (и кеш браузера в том числе)!

На сегодня всё, вступайте в нашу группу в ВК и следите за выходом новых статей.

Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru