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

[Anastasiya96]

подскажите пожалуйста,как сделать в иконке корзины маленький кружочек, в котором бы отображалось количество товаров в корзине? опенкарт 2.3

 

[Andruxa28]

Так это же есть в дефолтном шаблоне есть же

<span id="cart-total"><?php echo $text_items; ?></span>

ну и стили для кружочка добавить, например вот такие

#cart-total {
border-radius: 100%;
padding:5px;
color:#ffffff;
background-color: #000000;
}

 

[Anastasiya96]

Так это же есть в дефолтном шаблоне есть же

у меня почему то нет. это для мобильной версии подойдёт?

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

<span id="cart-total"><?php echo $text_items; ?></span>

 

[Andruxa28]

есть в default-шаблоне этот счетчик (во вложении скрин).
catalog\view\theme\default\template\common\cart.tpl - 2 строка.

 

[Anastasiya96]

этот счётчик то есть. но мне надо чтоб в мобильной версии было вот так

 

[Andruxa28]

Как вариант можно реализовать вот так
в файл 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" прописать

 

[Anastasiya96]

немного не поняла за common.js , там добавлять эти строки или заменять? и в стилях что нужно прописать?

 

[Andruxa28]

Найдите три строки

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

. Во внутрь функции
По стилям, это все зависит от вашего дизайна, кружок это будет или квадрат, красный или синий и т. д.

 

[Anastasiya96]

Найдите три строки

вот так сделать?
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;
}
правильно я поняла?)

 

[Andruxa28]

да верно, только стили не для id, а для класса ( .cart_item_total ) и позиционировать его нужно будет еще