Помощь счётчик товаров на иконке корзины

Anastasiya96

Постоялец
Регистрация
14 Мар 2018
Сообщения
137
Реакции
142
подскажите пожалуйста,как сделать в иконке корзины маленький кружочек, в котором бы отображалось количество товаров в корзине? опенкарт 2.3
 
Так это же есть в дефолтном шаблоне есть же
HTML:
<span id="cart-total"><?php echo $text_items; ?></span>
ну и стили для кружочка добавить, например вот такие
Код:
#cart-total {
border-radius: 100%;
padding:5px;
color:#ffffff;
background-color: #000000;
}
 
Так это же есть в дефолтном шаблоне есть же
у меня почему то нет. это для мобильной версии подойдёт?

и ещё в какой файл вставить эту строку?

<span id="cart-total"><?php echo $text_items; ?></span>
 
Последнее редактирование:
есть в default-шаблоне этот счетчик (во вложении скрин).
catalog\view\theme\default\template\common\cart.tpl - 2 строка.
 

Вложения

  • 112233.jpg
    112233.jpg
    119,7 KB · Просмотры: 34
этот счётчик то есть. но мне надо чтоб в мобильной версии было вот так
 

Вложения

  • _корзина.jpg
    _корзина.jpg
    83,3 KB · Просмотры: 33
Как вариант можно реализовать вот так
в файл catalog\controller\common\header.php
после строк
Код:
$data['language'] = $this->load->controller('common/language');
        $data['currency'] = $this->load->controller('common/currency');
        $data['search'] = $this->load->controller('common/search');
        $data['cart'] = $this->load->controller('common/cart');
добавьте
Код:
$data['cart_item_total']=$this->cart->countProducts();

далее в файле catalog\view\javascript\common.js
строку
Код:
setTimeout(function () {
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
}, 100);
она повторяется три раза (для добавления, обновления и удаления товара из корзины), заменить на
Код:
setTimeout(function () {
 $('#cart-total').html(json['total_items']);   
 $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
  }, 100);
, также три раза

в файле catalog\view\theme\default\сommon\header.tpl
строку
Код:
<li><a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i><span class="hidden-xs hidden-sm hidden-md"><?php echo $text_shopping_cart; ?></span></a></li>
замените например на вот такую
Код:
<li><a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i><span class="visible-xs cart_item_total" id="cart-total"><?php echo $cart_item_total; ?></span><span class="hidden-xs hidden-sm hidden-md"><?php echo $text_shopping_cart; ?></span></a></li>

и стили для класса "cart_item_total" прописать
 
немного не поняла за common.js , там добавлять эти строки или заменять? и в стилях что нужно прописать?
 
Найдите три строки
Код:
setTimeout(function () {
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
}, 100);
и в каждую из них добавте
Код:
 $('#cart-total').html(json['total_items']);
. Во внутрь функции
По стилям, это все зависит от вашего дизайна, кружок это будет или квадрат, красный или синий и т. д.
 
Найдите три строки
вот так сделать?
setTimeout(function () {
$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

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

}, 100);

и вот такой стиль:

#cart_item_total {
border-radius: 100%;
padding:5px;
color:#ffffff;
background-color: #FF0000;
}
правильно я поняла?)
 
да верно, только стили не для id, а для класса ( .cart_item_total ) и позиционировать его нужно будет еще
 
Назад
Сверху