CMS OpenCart 3.0 переделываем шапку магазина (4 часть)

Продолжаем работать с шапкой нашего интернет магазина на CSM OpenCart 3.0, в этой статье мы доработаем иконки избранных товаров и сравнений товаров, изменим стили корзины, сравнений, избранных и увеличим окно поиска.

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

1. Работаем с файлом header.twig (../catalog/view/theme/default/template/common/header.twig)
2. Работаем с файлом header.php (../catalog/language/ru-ru/common/header.php)
3. Работаем с файлом cart.php (../catalog/language/ru-ru/common/cart.php)
4. Работаем с файлом cart.php (../catalog/language/ru-ru/checkout/cart.php)
5. Работаем с файлом wishlist.php (../catalog/language/ru-ru/account/wishlist.php)
6. Работаем с файлом compare.php (../catalog/language/ru-ru/product/compare.php)
7. Работаем с файлом common.js (../catalog/view/javascript/common.js)
8. Работаем с файлом header.twig (../catalog/view/theme/default/template/common/header.twig)
9. Работаем с файлом stylesheet.css (../catalog/view/theme/default/stylesheet/stylesheet.css)

Приступим:

1. Откроем файл header.twig и вместо этих строк (85-86):

<a href="{{ compare }}" id="compare-total" data-toggle="tooltip" title="{{ text_compare }}"><i class="fa fa-sliders"></i> {{ text_compare }}</a>
<a href="{{ wishlist }}" id="wishlist-total" data-toggle="tooltip" title="{{ text_wishlist }}"><i class="fa fa-star"></i> {{ text_wishlist }}</a>

вставим эти:

<a href="{{ compare }}" id="compare-total" data-toggle="tooltip" title="{{ text_title_compare }}"><i class="fa fa-sliders"></i> {{ text_compare }}</a>
<a href="{{ wishlist }}" id="wishlist-total" data-toggle="tooltip" title="{{ text_title_wishlist }}"><i class="fa fa-star"></i> {{ text_wishlist }}</a>

2. Откроем файл header.php и вместо этих строк (4-5):

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

вставим эти:

$_['text_wishlist']       = '%s';
$_['text_compare']        = '%s';
$_['text_title_wishlist'] = 'Избранное';
$_['text_title_compare']  = 'Сравнение';

3. Откроем файл cart.php и вместо этой строки (3):

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

вставим эту:

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

4. Откроем файл cart.php и вместо этой строки (6):

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

вставим эту:

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

5. Откроем файл wishlist.php и вместо этой строки (8):

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

вставим эту:

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

6. Откроем файл compare.php и вместо этой строки (19):

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

вставим эту:

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

7. Откроем файл common.js и вместо этой строки (300):

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

вставим эту:

$('#wishlist-total').html('<i class="fa fa-star"></i> ' + json['total']);

а вместо этой строки (328):

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

вставим эти:

$('#compare-total').html('<i class="fa fa-sliders"></i> ' + json['total']);

Чистим все кеши (в том числе и браузера)! И смотрим что у нас получилось:

Мы убрали надписи у иконок в сравнение и избранное и убрали у счётчиков товаров скобки (). Без надписей иконки занимают намного меньше места, поэтому немного изменим вёрстку шапки (увеличим ширину панели поиска).

8. Вновь откроем файл header.twig и вместо этих строк (82-83):

<div class="col-sm-6">{{ search }}</div>
<div class="col-sm-3">

вставим эту:

<div class="col-sm-7">{{ search }}</div>
<div class="col-sm-2 my-icons">

Чистим все кеши.

9. Откроем файл stylesheet.css и в конец файла добавим эти строки:

.my-icons {
  text-align: center;
  padding-top: 10px;
}
.my-icons .fa {
  font-size: 20px;
  color: #2196F3;
  padding: 0 5px;
}
.my-icons .fa:hover {
  color: #000;
}
.my-icons a {
  font-size: 14px;
  color: #000;
}

Чистим все кеши и проверяем результат, если устраивает оставляем как есть, либо немного доработаем оформление, пропишем вот такие строки:

.my-icons {
  text-align: center;
  padding-top: 10px;
}
.my-icons .fa {
  font-size: 18px;
  color: #2196F3;
}
.my-icons a {
  font-size: 14px;
  color: #000;
  border: 1px solid #ddd;
  padding: 9px 10px 10px;
}
.my-icons a:hover {
  background: #2196F3;
  color: #fff;
}
.my-icons a:hover .fa {
  color: #fff;
}

Чистим все кеши и смотрим финальный результат:

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

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