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.

3

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
    thanks man its work for me also – Rohit Chauhan Apr 17 at 12:21
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

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.