0

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.

1 Answer 1

0

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');
}
3
  • customer-data.js is not loaded in the viewsource of the page. If i included it directly in the Magento_theme js its getting some console error and the minicart stops working. Nov 30, 2017 at 11:43
  • I referred in google that to add this script but not sure in which phtml we need to add it , i tried adding it in footer section but its not working. <script> require([ 'Magento_Customer/js/customer-data' ], function (customerData) { var sections = ['cart']; customerData.invalidate(sections); }); </script> Nov 30, 2017 at 11:43
  • The customer-data.js shouldnt be visible in the source because it is lazy loaded using requirejs. You should see if it is loaded by using the web-inspector. Normally the minicart.js depends on it like this : define([ 'uiComponent', 'Magento_Customer/js/customer-data', 'jquery', 'ko', 'underscore', 'sidebar', 'mage/translate' ], function (Component, customerData, $, ko, _) {
    – Quisse
    Nov 30, 2017 at 11:48

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.