Количество товаров над иконкой корзины

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

 

Для начала надо вывести само кол-во товара.
Для этого в файле \catalog\controller\common\cart.php

перед

Код:

$data['text_loading'] = $this->language->get('text_loading');

добавим

Код:

$data['count'] = $this->cart->countProducts();

а в файле шаблона \catalog\view\theme\default\template\common\cart.tpl
добавим в нужное место, например

Код:

<div class="count"><?php echo $count; ?></div>

А далее стилями как душе угодно...

 

Vlad вдохновил, зачесались "криворуки"))

берем catalog\controller\common\cart.php
эту строку

PHP:

$data['text_items'] = sprintf($this->language->get('text_items'), $this->cart->countProducts() + (isset($this->session->data['vouchers']) ? count($this->session->data['vouchers']) : 0), $this->currency->format($total));

меняем на эту

PHP:

$data['count'] = $this->cart->countProducts();

берем catalog\view\theme\default\template\common\cart.tpl
эту строку

HTML:

<button type="button" data-toggle="dropdown" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total"><?php echo $text_items; ?></span></button>

меняем на эту

HTML:

 <button type="button" data-toggle="dropdown" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-inverse btn-block btn-lg dropdown-toggle"><img src="catalog/view/theme/default/image/cart.png"><?php if ($count > 0) { ?><span class="count"><?php echo $count; ?></span><?php } ?></button>

берем catalog\controller\checkout\cart.php
в трех местах эту строку

PHP:

$json['total'] = sprintf($this->language->get('text_items'), $this->cart->countProducts() + (isset($this->session->data['vouchers']) ? count($this->session->data['vouchers']) : 0), $this->currency->format($total));

меняем на эту

PHP:

$json['count'] = $this->cart->countProducts();

берем catalog\view\theme\default\template\product\product.tpl
эту строку

HTML:

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

меняем на эту

HTML:

$('#cart > button').html('<img src="catalog/view/theme/default/image/cart.png"><span class="count"> ' + json['count'] + '</span>');

берем catalog\view\javascript\common.js
в этом куске

Спойлер

HTML:

// Cart add remove functions
var cart = {
    'add': function(product_id, quantity) {
        $.ajax({
            url: 'index.php?route=checkout/cart/add',
            type: 'post',
            data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
            dataType: 'json',
            beforeSend: function() {
                $('#cart > button').button('loading');
            },
            complete: function() {
                $('#cart > button').button('reset');
            },           
            success: function(json) {
                $('.alert, .text-danger').remove();

                if (json['redirect']) {
                    location = json['redirect'];
                }

                if (json['success']) {
                    $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                   
                    // Need to set timeout otherwise it wont update the total
                    setTimeout(function () {
                        $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
                    }, 100);
               
                    $('html, body').animate({ scrollTop: 0 }, 'slow');

                    $('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            }
        });
    },
    'update': function(key, quantity) {
        $.ajax({
            url: 'index.php?route=checkout/cart/edit',
            type: 'post',
            data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
            dataType: 'json',
            beforeSend: function() {
                $('#cart > button').button('loading');
            },
            complete: function() {
                $('#cart > button').button('reset');
            },           
            success: function(json) {
                // Need to set timeout otherwise it wont update the total
                setTimeout(function () {
                    $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
                }, 100);

                if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
                    location = 'index.php?route=checkout/cart';
                } else {
                    $('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            }
        });
    },
    'remove': function(key) {
        $.ajax({
            url: 'index.php?route=checkout/cart/remove',
            type: 'post',
            data: 'key=' + key,
            dataType: 'json',
            beforeSend: function() {
                $('#cart > button').button('loading');
            },
            complete: function() {
                $('#cart > button').button('reset');
            },           
            success: function(json) {
                // Need to set timeout otherwise it wont update the total
                setTimeout(function () {
                    $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
                }, 100);
                   
                if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
                    location = 'index.php?route=checkout/cart';
                } else {
                    $('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            }
        });
    }
}

меняем эти три строки

HTML:

$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

первая и вторая

HTML:

$('#cart > button').html('<img src="catalog/view/theme/default/image/cart.png"><span class="count">' + json['count'] + '</span>');

третья

HTML:

if (json['count'] != 0) {
                        $('#cart > button').html('<img src="catalog/view/theme/default/image/cart.png"><span class="count">' + json['count'] + '</span>');
                    } else {
                        $('#cart > button').html('<img src="catalog/view/theme/default/image/cart.png">');
                    }

берем catalog\view\theme\default\stylesheet\stylesheet.css
переписываем стили

Спойлер

HTML:

/* cart */
#cart {
    margin-bottom: 10px;
}
#cart > .btn {
    font-size: 12px;
    line-height: 18px;
    color: #FFF;
}
#cart.open > .btn {
    background-image: none;
    background-color: #FFFFFF;
    border: 1px solid #E6E6E6;
    color: #666;
    box-shadow: none;
    text-shadow: none;
}
#cart.open > .btn:hover {
    color: #444;
}

както так

Спойлер

HTML:

/* cart */
#cart {
    margin-bottom: 10px;
}
#cart img {
    width: 50px;
    height: 40px;
}
#cart .count {
    color: #660000;
    position: absolute;
    margin: 2px 10px 20px -25px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    height: 20px;
    width: 20px;
    background: yellow;

}
#cart > .btn {
    font-size: 12px;
    line-height: 18px;
    color: #FFF;
}
#cart button.btn.btn-inverse {
    background: none;
    border: 0px;
}
#cart.open > .btn {
    background-image: none;
    background-color: none;
    border: 0px;
    color: #FFF;
    box-shadow: none;
    text-shadow: none;
}
#cart.open > .btn:hover {
    color: #FFF;
}

в итоге у меня получилось так

 

Спасибо, очень помогло. Я новичок и мучатся, пришлось бы долго. ))) Еще раз спасибо.

 

Если бы это кто-нить в OCMOD перевел)

 

Из разряда свободного творчества (гулять, так гулять...)

А не вдохновитесь ли ещё разок (например, в честь месячника "Борьбы за трезвость") шоб после попадания товара в Корзину вместо кругляшков с цифирками менялся цвет самой корзины, скажем из серого она бы превращалась в ярко-красный (я так думаю, шо для этого нужна будет вторая корзина, красная, но это уже мелочи...)

 

На 2.1.0.2 (rs1) не работает...
Если корзина пустая, на кнопке пишет Undefined. (фото 1)
Если добавить товар в корзину - кнопка пропадает, а вместо нее появляется еле видный силуэт обычной fa-fa-shoping cart и старого вида кнопка также с надписью undefined (фото 2.)
А если просто обновить страницу, то вместо надписи undefined пишет ошибку:
Undefined variable: text_items в файле cart.tpl

у меня в этом файле, по инструкции:

Код:

<div id="cart" class="btn-group btn-block">
<button type="button" data-toggle="dropdown" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-inverse btn-block btn-lg dropdown-toggle"><img src="catalog/view/theme/default/image/cart.png"><?php if ($count > 0) { ?><span class="count"><?php echo $count; ?></span><?php } ?></button>
  <ul class="dropdown-menu pull-right">

Тема дефолт, без изменений (только установленная), добавил все, по инструкции...

 

Я смотрю все хотят халявы) Знайте что все эти знания были получены учась и проводя опыты, это все время, а время очень дорого стоит.

Это уже js найти 2 скрипта отвечающий за добавления товара в корзину и если json вернул "succes" то присвоить корзине новый класс, для которого прописан цвет.

 

Я не халявщик и никогда им не был, если это и меня касается...Также, как и немногие, потихоньку осваиваю код...Может пока знаний недостаточно, но не всё сразу...Задал вопрос, потому как в вашей инструкции, после установки выдало ошибку...Не более...

 

Это не вам было адресовано. Инструкция не моя.

У вас старая версия, я не вижу смысла пытаться все это поставить на 2.1.0.2 (rs1) лучше выберете 2.3

 

Ребята подскажите как быть что то я уже запутался !!
ситуация вроде как простая но не разберусь как поправить!!!
Установлена тема http://opencart.templatemela.com/OPC08/OPC080198/OPC6/
вроде все настроил только вот есть перекосы как поправить http://vizitm.com/
Где что менять чтоб значок корзина была такой же как на шаблоне (убрать текст)

 

На форуме где то есть ответ.
1. Поменять текст в languages/название языка/common/cart.php файле
2. Убрать в контроллере и подправить js

 

пробовал найти нашел только вас!!!! я не совсем понимаю пока в ОС но надеюсь вы мне подскажете!!!

 

Я задавал этот вопрос давно, когда столкнулся с задачей, вот тема.

 

Сейчас в языках поправил стало как нужно но стоит добавить товар и все надпись снова вылазит

Там в твоей теме рекомендует править
\catalog\controller\common\cart.php
\catalog\controller\checkout\cart.php

смотреть на
$data['text_items'] =
$json['total'] =

что конкретно там нужно сделать (удалять или что то редактировать???

 

Читайте тему до конца.
Найдите в common/cart.php
$data['text_items'] и сделайте так чтобы она была равна

PHP:

$data['text_items'] = $this->cart->countProducts();

 

Если добавить в корзину товар, то добавляется в желтом кружочке количество товара. Но если удалить товар из корзины, то появляется текст null. Не пойму, как это поправить, может кто уже исправлял?

 

Пытался проделать то же самое на opencart 2.3.0.2 сразу при добавлении в корзину undefined, а после перезагрузки показывается правильное количество. Подскажите, пожалуйста, в чем проблема.

 

проблема в js скрипте. Нужно смотреть по месту или у себя все это делать и потом вам давать ответ.

 

Думаю да, так как изначально в нем отличаются строки, о которых говорится.
Скрипт common.js до изменений
загрузил c расширением txt, а то не знал, как добавить