Magento2 update minicart using custom ajax

Question

I have a scenario to update quantity using the +/- button in the magento2 mini-cart. I override MagentoCheckout to my theme and edited minicart/items/default.html and made the changes, now I need to make an auto-update of price and quantity change on click of the +/- button.

My ajax call on a click

function plus(idvl)
        {                  
        fieldName = idvl;                       
        fieldName = fieldName.slice(1);             
        var currentVal = parseInt($('#cart-item-'+fieldName+'-qty').val());                          
        var currentVal = parseInt($('#cart-item-'+fieldName+'-qty').val());        
        if (!isNaN(currentVal)) {                        
            $('input[name='+fieldName+']').val(currentVal + 1);                 
            
        vr=new Object();
        vr["item_id"]  = fieldName;
        vr["item_qty"] = currentVal;
        vr["form_key"] = '<?php echo $FormKey->getFormKey();?>';            
            $.ajax({
                url: '<?php echo $this->getBaseUrl(); ?>checkout/sidebar/updateItemQty/',
                dataType: 'json',
                type : 'post',
                data: vr,
                success: function(data){
                    console.log(JSON.stringify(data));                      
                }
            });         
            
        } else {            
            $('input[name='+fieldName+']').val(0);
        } 
        }

Now the ajax call works and it returns status 200K {success: true} but the contents are not updated. is there any way to achieve it?

After updateItemQty ajax call, there is another call which works if I directly clicking on the update button in the mini cart like

customer/section/load/?sections=cart%2Cmessages&update_section_id=true&_=12

But I'm not sure how this one is triggered in the core code. Any help is appreciated thanks in advance.

Answer 1

The cart should be automagically updated due to the 'ajaxComplete' event (listened for in the customer-data.js file). Can you check if this js module is loaded? If this is triggered, verify in the sectionConfig.getAffectedSections(settings.url) method if the response contains the cart section.

Otherwise you can update the minicart manually like this:

if (res.minicart) {
    $(self.options.minicartSelector).replaceWith(res.minicart);
    $(self.options.minicartSelector).trigger('contentUpdated');
}