How to update minicart view using AJAX?

Question

Is there any way to update the mini cart view?

Now I'm using:

      require([
            'Magento_Customer/js/customer-data'
        ], function (customerData) {

            alert("hola");
            var sections = ['cart'];
            customerData.invalidate(sections);
        });

But it only refreshes the view by updating the page.

I'm looking for ways to make the changes reflect without having to reload the page. Any ideas?

Answer 1

You can try the below code.

require([
           'Magento_Customer/js/customer-data'
        ], function (customerData) {
            var sections = ['cart'];
            customerData.invalidate(sections);
            customerData.reload(sections, true);
        });

Answer 2

Faced the same issue, used single line in ajax success to update mini cart.

require('Magento_Customer/js/customer-data').reload();

Full Ajax code:

<script type="text/javascript">    
    require([ 'jquery', 'jquery/ui'], function($){ 
        $('#ck-quick-qosubmit').click(function(){
            $.ajax({
                    url:"/quickadd/quick",
                    method:"POST",

                    data:{
                       sku: $('#ck-quick-sku').val(),
                       qty: $('#ck-quick-qty').val(),
                    },
                    success:function(response) {
                        $('#ck-quickbuy-response').html(response);
                        require('Magento_Customer/js/customer-data').reload();
                   },
                   error:function(){
                     console.log('error');
                   }

              });

        }); 
    });     

</script>

Hope this will help someone in future :)

Answer 3

The right way of doing this (usually it's enough) is adding your action to section.xml. See example in Magento_Checkout:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
<action name="checkout/cart/add">
    <section name="cart"/>
</action>

Actually after that magento will do the same as @suresh-chikani showed on ajaxComplete event