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

4 комментария

  1. Скажите пожалуйста, а такой вид меню будет хорош, если у магазина 2-3-4 подкатегории, и все они спрятаны под КАТАЛОГ ТОВАРОВ?

  2. Вадим Лазарев Ответить

    Владислав Добрый день! Все вполне прилично, но…. В мобильном виде при открытии «каталог» выпадающее меню наслаивается на основное. Срабатывает конечно выпадающее, но не красиво. Есть возможность скрыть основное меню. Подскажите каким образом лучшее.

Оставить комментарий

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания применять.

Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Меню навигации