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']);

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

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

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

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;
}

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

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

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

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

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

  1. Аватар

    Скажите, а реально корзину вывести картинкой с заменой на другую при попадании туда товара, с сохранением текстовой информации о количестве и стоимости товаров в корзине?

Комментарии

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