Webkul
Services
Technologies Bagisto QloApps
iOS Android SAP BigCommerce Wix
Trusted by
Samsung Intel Toyota Walmart Disney Nokia Nestlé Decathlon
See all customers
Back to Top
DEV

Update Cart totals by JS on Checkout Page in Magento 2

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.

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