1

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.

0

4 Answers 4

6

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.

2
  • 2
    thanks man its work for me also Apr 17, 2019 at 12:21
  • After i added the code in minicart section product name and images removed, how to add a proper way?
    – zus
    Mar 26, 2021 at 8:49
0

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

0

For ajax increment and decrement quantity in minicart you can use the below extension.

https://github.com/kirtinariya1/MinicartAjaxQtyIncrementDecrement

0

@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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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