4

I want to add Quantity increment / decrement buttons in header minicart.
For that I have added divs as follows

                  <div class="more">+</div>
                    <input data-bind="attr: {
                           id: 'cart-item-'+item_id+'-qty',
                           'data-cart-item': item_id,
                           'data-item-qty': qty,
                           'data-cart-item-id': product_sku
                           }, value: qty"
                           type="number"
                           size="4"
                           class="item-qty cart-item-qty"
                           maxlength="12"/>
                    <div class="less">-</div>

in file Magento_Checkout/web/template/minicart/item/default.html in my custom theme.
I have created the javascript

jQuery('.more, .less').on("click",function(){
                var obj = jQuery(this);
                var currentQty = obj.siblings('.cart-item-qty').val();
                var iid = obj.siblings('.update-cart-item').attr('data-cart-item');

                if(obj.hasClass('more')){
                    var newAdd = parseInt(currentQty)+parseInt(1);
                    obj.siblings('.cart-item-qty').val(newAdd);
                    obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
                    jQuery('#update-cart-item-'+iid).click();
                }else{
                   var newAdd = parseInt(currentQty)-parseInt(1);
                    obj.siblings('.cart-item-qty').val(newAdd); 
                    obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
                    jQuery('#update-cart-item-'+iid).click();
                }
            });

But I am not sure where to add this script and how to call it. The script is working fine when I am executing it from browser console.
I have tried adding the script in default.html, minicart.phtml but it is not working.
My query here is how and where I can add this script to make it work?

  • You have to keep in minicart.phtml file and check also remove from html file – Rakesh Jesadiya Oct 18 '17 at 11:14
  • See this lesson youtube.com/… It will help you to resolve this task. – Gia Phu Oct 7 '18 at 11:34
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Rama Chandran M Oct 7 '18 at 14:02
4

In minicart.phtml file at last insert below script,

<script>
jQuery('body').on("click",".more, .less",function(){
    var obj = jQuery(this);
    var currentQty = obj.siblings('.cart-item-qty').val();
    var iid = obj.siblings('.update-cart-item').attr('data-cart-item');

    if(obj.hasClass('more')){
        var newAdd = parseInt(currentQty)+parseInt(1);
        obj.siblings('.cart-item-qty').val(newAdd);
        obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
        jQuery('#update-cart-item-'+iid).click();
    }else{
       var newAdd = parseInt(currentQty)-parseInt(1);
        obj.siblings('.cart-item-qty').val(newAdd); 
        obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
        jQuery('#update-cart-item-'+iid).click();
    }
});
</script>
  • This is not working and throwing error message ReferenceError: body is not defined – Anshu Mishra Oct 18 '17 at 11:34
  • i have updated my answer plz check. Missing single quote for body. – Rakesh Jesadiya Oct 18 '17 at 11:41
  • Script is working but it is not appearing correctly, what I am seeing is, suppose I am clicking on + (add) button it is incrementing +2 but after the update ajax script is executed it is showing +1 as needed. Do you know what can be the probable reason for this? – Anshu Mishra Oct 18 '17 at 11:50
  • are you using ajax script for this? – Rakesh Jesadiya Oct 18 '17 at 11:54
  • I am using only the shared script. And clicking on update button of default Magento using js to run the update – Anshu Mishra Oct 18 '17 at 11:57
1

In following file Magento_Checkout\web\template\minicart\item to change in template default.html.

Write below code

Setp1:-

<div class="details-qty qty">
                <label class="label" data-bind="i18n: 'Qty', attr: {
                       for: 'cart-item-'+item_id+'-qty'}"></label>
                <a href="#" data-bind="attr: {'data-cart-item': item_id}"
                   class="action decrease-qty">
                    <span>-</span>
                </a>

                <input data-bind="attr: {
                       id: 'cart-item-'+item_id+'-qty',
                       'data-cart-item': item_id,
                       'data-item-qty': qty,
                       'data-cart-item-id': product_sku
                       }, value: qty"
                       type="number"
                       size="4"
                       class="item-qty cart-item-qty"
                       maxlength="12"/>
                <a href="#" data-bind="attr: {'data-cart-item': item_id}"
                   class="action increase-qty">
                    <span>+</span>
                </a>

                <button data-bind="attr: {
                       id: 'update-cart-item-'+item_id,
                       'data-cart-item': item_id,
                       title: $t('Update')
                       }"
                        class="update-cart-item"
                        style="display: none">
                    <span data-bind="i18n: 'Update'"></span>
                </button>
            </div>

Magento_Checkout\web\js\view to add new button event define in minicart.js.

'button': {
            'checkout': '#top-cart-btn-checkout',
            'remove': '#mini-cart a.action.delete',
            'increacseqty':'#mini-cart a.action.increase-qty',
            'decreaseqty':'#mini-cart a.action.decrease-qty',
            'close': '#btn-minicart-close'
        },

step3:- Magento_Checkout\web\js to add new function _increaseItemQty() and _decreaseItemQty in sidebar.js file.

events['click ' + this.options.button.increacseqty] = function (event) {
            self._increaseItemQty($(event.currentTarget));
        };
events['click ' + this.options.button.decreaseqty] = function (event) {
            self._decreaseItemQty($(event.currentTarget));
        };

_increaseItemQty: function (elem) {
        var itemId = elem.data('cart-item');
        var obj = $('#cart-item-' + itemId + '-qty');
        var currentQty = obj.val();
        var newAdd = parseInt(currentQty) + parseInt(1);
        obj.val(newAdd);
        obj.attr('data-item-qty', newAdd);           
    },
    _decreaseItemQty: function (elem) {
        var itemId = elem.data('cart-item');
        var obj = $('#cart-item-' + itemId + '-qty');
        var currentQty = obj.val();
        if (currentQty > 1) {
            var newAdd = parseInt(currentQty) - parseInt(1);
            obj.val(newAdd);
            obj.attr('data-item-qty', newAdd);
        }
    },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.