Back to Top

Update Cart totals by JS on Checkout Page in Magento 2

Updated 19 February 2024

If you are working on checkout page functionality, and you are updating the totals by js. After this total is not reflecting/updating on summery block, then to update amount by JS after your request without reloading your page, you can use following process:

you need to add following code in your js file:

/*browser:true*/
/*global define*/
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({
            updateamount:function () {//your function to update amount
                //your code to update amount
                //after successfull execution you need to add these lines.
                cartCache.set('totals',null);
                defaultTotal.estimateTotals();
            }
        });
    }
);

Here, firstly you need to define js

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

after this create objects for the same, i used here defaultTotal and cartCache.

Now, add these lines in your file after which you want to update the totals.

Searching for an experienced
Magento 2 Company ?
Find out More
cartCache.set('totals',null);
defaultTotal.estimateTotals();

cartCache.set(‘totals’, null) : set the cart total to calculate totals again, if not using this line then estimateTotals() returns the totals for cache.

defaultTotal.estimateTotals(): executing the process to calculate totals.

Order total in default process:

after executing code it will be like:

Hope this will help you in manage totals of cart.

I hope this blog will help you with Update Cart totals by JS on Checkout Page in Magento 2. You may also check our wide range of best Magento 2 Extensions.

Please reach out to our team via a support ticket if you have any queries.

Try this and if you have any queries then just comment below ­čÖé

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


1 comments

  • Andres
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home