how to add quantity increment and decreament (+ and - button) in minicart magento 2?

Question

actually i am trying to add quantity increment and decreament (+ and - button) in minicart magento 2.3. If anyone have any idea please guide me.

Answer 1

app/design/frontend/Module/theme/Magento_Checkout/web/template/minicart/item/default.html

<div class="product-item-pricing">
                <!-- ko if: canApplyMsrp -->
                
                <div class="details-map">
                    <span class="label" data-bind="i18n: 'Price'"></span>
                    <span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
                </div>
                <!-- /ko -->
                <!-- ko ifnot: canApplyMsrp -->
                <!-- ko foreach: $parent.getRegion('priceSidebar') -->
                <!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
                
                <div class="details-qty qty">
                    <label class="label" data-bind="i18n: 'Qty', attr: {
                    for: 'cart-item-'+item_id+'-qty'}"></label>
                    <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">
                    
                    <div class="less">-</div>
                    <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>
            </div>
        

app/design/frontend/Module/theme/Magento_Checkout/templates/cart/minicart.phtml

<script type="text/javascript">
require(["jquery"],function($){
$('body').on("click",".more, .less",function(){
    var obj = $(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);
        //$('#update-cart-item-'+iid).click();
        $('.update-cart-item').show();
    } else {
        if(parseInt(currentQty) > 1){
            var newAdd = parseInt(currentQty)-parseInt(1);
            obj.siblings('.cart-item-qty').val(newAdd); 
            obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
            //$('#update-cart-item-'+iid).click();
            $('.update-cart-item').show();
        }
    }
});
});
</script>

Its working fine for me.

Answer 2

Magento 2 using KnockoutJs for render data in Minicart. You can override template: vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

And call to ajax function for update data checkout/sidebar/updateItemQty/

Or use free module: https://github.com/php-cuong/magento2-qty

Answer 3

@hitesh Balpande To set this so you do not need to use the update button which shows when you change the qty I done the following.

I copied the following file and updated:

vendor/module-checkout/view/frontend/web/js/view/sidebar.js

and placed into my theme directory:

app/design/frontend/client-dir/theme-dir/Magento_Checkout/web/js/sidebar.js

Around line 109 you will find the following:

events['keyup ' + this.options.item.qty] = function (event) {
        self._showItemButton($(event.target));
    };

and change it to this:

events['keyup ' + this.options.item.qty] = function (event) {
        self._updateItemQty($(event.currentTarget));
    };

I also added some less css to hide the update button which pops up.

.block-content {
  .minicart-items-wrapper {
    .minicart-items {
      .product {
        &.product-item {
          .product-item-details {
            .product-item-pricing {
              .details-qty {
                button {
                  &.update-cart-item {
                    display: none !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

For me this now updates the price field via ajax when clicking + or -.

Got this little update from: Magento 2 how to do minicart ajax update and is the last entry.

Hope this helps anyone else trying to add this feature to the minicart in the future.

Answer 4

I add obj.siblings('.update-cart-item').show(); to show only the current update button and not all of them

the js should look like this:

require(["jquery"],function($){
$('body').on("click",".more, .less",function(){
    var obj = $(this);
    var currentQty = obj.siblings('.cart-item-qty').val();

    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);
        obj.siblings('.update-cart-item').show();
    } else {
        if(parseInt(currentQty) > 1){
            var newAdd = parseInt(currentQty)-parseInt(1);
            obj.siblings('.cart-item-qty').val(newAdd);
            obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
            obj.siblings('.update-cart-item').show();
        }
    }
});
});