How to Reload Total Using JS on Cart / Checkout Page in Magento 2

If you are looking for a way to reload the total summary of the cart and checkout page in Magento 2 using JS, then you are in a right place. In this article we'll explain you how to reload the totals summary using JS on Cart / Checkout Page in Magento 2

Let's get started!!

Step 1: You need to add following code in your js file.

saveCopyzoom_out_map
define(
    [
        'ko',
        'jquery',
        'Magento_Checkout/js/model/cart/totals-processor/default',
        'Magento_Checkout/js/model/cart/cache'
    ],
    function (ko, $, defaultTotal, cartCache) {
        'use strict';
        return Component.extend({
        	initialize: function () {
        	 	this._super();
            	this.reloadTotal();
        	},
            reloadTotal:function () {
                cartCache.set('totals',null);
                defaultTotal.estimateTotals();
            }
        });
    }
);

In above code, you can see we've defined the below JS file. So, you need to define the same on your js file.

saveCopyzoom_out_map
'Magento_Checkout/js/model/cart/totals-processor/default',
'Magento_Checkout/js/model/cart/cache'

Furthermore, you can see in the above code we've create the reloadTotal function and call it on initialize function. You can call the reloadTotal function as per your requirements in your file.

Or you can add the below lines on your code where you want to reload the total summary.

saveCopyzoom_out_map
cartCache.set('totals',null);
defaultTotal.estimateTotals();

Step 2: Run the below commands.

saveCopyzoom_out_map
php bin/magento setup:upgrade

Bingo!! we are done.

I hope this article helped you to find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other questions on that.

P.S. Do share this article with your team.