0

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

My ajax call on 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 return status 200K {success:true} but the contents are not updated. is there any way to achieve it ?

After updateItemQty ajax call there is a another call which works if i directly clicking on the update button in the minicart 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.

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');
}
  • 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. – ManoharSingh Nov 30 '17 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> – ManoharSingh Nov 30 '17 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 '17 at 11:48

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.