Refresh minicart in javascript file

Question

I have a javascript file like this:

jQuery(document).ready(function($){
 var mainWindown = top.document;
 test = {
 teesping_vesrion : '1.0.0',
 mainStuff : function(){
 var vars = {};
 this.doStuff();
 //refesh mini cart here
 },
 doStuff : function(){
 ......
 }
 )
})

i want to reload the minicart in my mainStuff function, but i dont know how to integrate the below code to my javascript file, which is to reload minicart:

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

• Rakesh Jesadiya: You can try with, var miniCart = $('[data-block=\'minicart\']'); miniCart.trigger('contentUpdated')

Answer 1

As Rakesh said in the comment you can trigger the content to be updated:

miniCart = $('[data-block=\'minicart\']');
miniCart.trigger('contentUpdated');

You can see this used in minicart.js

Notes

Related tip: To run your script on page load it's better to use domReady! as a dependency rather than use the jquery document ready method. domReady! makes sure other dependant scripts are aware of the dom ready requirement.

• Hunter: when i call the function for the first time it reload the minicart but, when i try run the function for the second time it didn't do anything
• Ben Crook: @Hunter Hmmmm what happens if you extend Magento/Checkout/view/frontend/web/js/view/minicart.js and use miniCart.sidebar('update');?