Всем привет, продолжаем работать с шапкой нашего интернет магазина на CMS OpenCart 3.0, сегодня мы переместим в шапку сравнение товаров (со страницы категорий), переделаем корзину и закладки.
Список задач на сегодня:
- Работаем с файлом header.twig (../catalog/view/theme/default/template/common/header.twig)
- Работаем с файлом cart.twig (../catalog/view/theme/default/template/common/cart.twig)
- Работаем с файлом header.php (../catalog/language/ru-ru/common/header.php)
- Работаем с файлом cart.php (../catalog/language/ru-ru/common/cart.php)
- Работаем с файлом header.php (../catalog/controller/common/header.php)
- Работаем с файлом compare.php (../catalog/language/ru-ru/product/compare.php)
- Работаем с файлом common.js (../catalog/view/javascript/common.js)
- Работаем с файлом cart.php (../catalog/language/ru-ru/checkout/cart.php)
- Работаем с файлом category.twig (../catalog/view/theme/default/template/product/category.twig)
Приступим:
1. Откроем файл header.twig и вместо этой строки (85):
<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>
вставим эти:
<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>
P.S. — мы вывели к закладкам сравнение товаров, добавили симпатичные подсказки при наведении на ссылки (чёрный блок со стрелкой, как у кнопок) и изменили иконку закладок (звёздочка вместо сердца).
2. Откроем файл cart.twig и вместо этих строк (1-51):
<div id="cart" class="btn-group btn-block"> <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> <ul class="dropdown-menu pull-right"> {% if products or vouchers %} <li> <table class="table table-striped"> {% for product in products %} <tr> <td class="text-center">{% if product.thumb %} <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-thumbnail" /></a> {% endif %}</td> <td class="text-left"><a href="{{ product.href }}">{{ product.name }}</a> {% if product.option %} {% for option in product.option %} <br /> - <small>{{ option.name }} {{ option.value }}</small> {% endfor %} {% endif %} {% if product.recurring %} <br /> - <small>{{ text_recurring }} {{ product.recurring }}</small> {% endif %}</td> <td class="text-right">x {{ product.quantity }}</td> <td class="text-right">{{ product.total }}</td> <td class="text-center"><button type="button" onclick="cart.remove('{{ product.cart_id }}');" title="{{ button_remove }}" class="btn btn-danger btn-xs"><i class="fa fa-times"></i></button></td> </tr> {% endfor %} {% for voucher in vouchers %} <tr> <td class="text-center"></td> <td class="text-left">{{ voucher.description }}</td> <td class="text-right">x 1</td> <td class="text-right">{{ voucher.amount }}</td> <td class="text-center text-danger"><button type="button" onclick="voucher.remove('{{ voucher.key }}');" title="{{ button_remove }}" class="btn btn-danger btn-xs"><i class="fa fa-times"></i></button></td> </tr> {% endfor %} </table> </li> <li> <div> <table class="table table-bordered"> {% for total in totals %} <tr> <td class="text-right"><strong>{{ total.title }}</strong></td> <td class="text-right">{{ total.text }}</td> </tr> {% endfor %} </table> <p class="text-right"><a href="{{ cart }}"><strong><i class="fa fa-shopping-cart"></i> {{ text_cart }}</strong></a> <a href="{{ checkout }}"><strong><i class="fa fa-share"></i> {{ text_checkout }}</strong></a></p> </div> </li> {% else %} <li> <p class="text-center">{{ text_empty }}</p> </li> {% endif %} </ul> </div>
вставим эту:
<a href="{{ cart }}" id="cart" data-toggle="tooltip" data-loading-text="{{ text_loading }}" title="{{ text_cart }}"><i class="fa fa-shopping-cart"></i> <span id="cart-total">{{ text_items }}</span></a>
3. Откроем файл header.php и вместо этой строки (4):
$_['text_wishlist'] = 'Закладки (%s)';
вставим эти:
$_['text_wishlist'] = 'Избранное (%s)'; $_['text_compare'] = 'Сравнение (%s)';
4. Откроем файл cart.php и вместо этой строки (3):
$_['text_items'] = 'Товаров %s (%s)';
вставим эту:
$_['text_items'] = '(%s)';
5. Откроем файл header.php и после этих строк (48-55):
// 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));
а после этой строки (63):
$data['wishlist'] = $this->url->link('account/wishlist', '', true);
вставим эту:
$data['compare'] = $this->url->link('product/compare');
6. Откроем файл compare.php и вместо этой строки (19):
$_['text_compare'] = 'Сравнение товаров (%s)';
вставим эту:
$_['text_compare'] = 'Сравнение (%s)';
7. Откроем файл common.js и вместо этой строки (174):
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
вставим эту:
$('#cart').html('<i class="fa fa-shopping-cart"></i> ' + json['total']);
вместо этой (202):
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
вставим эту:
$('#cart').html('<i class="fa fa-shopping-cart"></i> ' + json['total']);
вместо этой (231):
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
вставим эту:
$('#cart').html('<i class="fa fa-shopping-cart"></i> ' + json['total']);
вместо этой (266):
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
вставим эту:
$('#cart').html('<i class="fa fa-shopping-cart"></i> ' + json['total']);
и вместо этой (300):
$('#wishlist-total span').html(json['total']);
вставим эту:
$('#wishlist-total').html(json['total']);
8. Откроем файл cart.php и вместо этой строки (6):
$_['text_items'] = 'Товаров %s (%s)';
вставим эту:
$_['text_items'] = '(%s)';
9. Откроем файл category.twig и удалим эти строки (60-63):
<div class="col-md-3 col-sm-6"> <div class="form-group"><a href="{{ compare }}" id="compare-total" class="btn btn-link">{{ text_compare }}</a></div> </div>
а вместо этой строки (60):
<div class="col-md-4 col-xs-6">
вставим эту:
<div class="col-md-7 col-xs-6">
Обязательно чистим все кеши!
Результат нашей работы:
На сегодня всё, вступайте в нашу группу в ВК и следите за выходом новых материалов.
Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru
2 комментария
Как всегда отлично! Хотелось бы статью по карточке товаров. Стандартная карточка кривовата, хочется дельных советов от профи!
Возможно будет.