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

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

https://github.com/kirtinariya1/MinicartAjaxQtyIncrementDecrement