{"id":1686,"date":"2021-04-03T03:59:19","date_gmt":"2021-04-03T03:59:19","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/update-total-using-js-file-in-magento-2\/"},"modified":"2025-07-17T09:29:05","modified_gmt":"2025-07-17T03:59:05","slug":"update-total-using-js-file-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/update-total-using-js-file-in-magento-2\/","title":{"rendered":"How to Update Total Using JS File in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">While working with the cart page and checkout page, the total automatically updates when you enter a correct coupon code or discount code in the default behavior of\u00a0Magento 2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What if you want to apply that same behavior in your custom discount method,&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/what-is-magento-2-store-credit\/\">Magento 2 store credit<\/a>, or rewards? You can<strong><em>&nbsp;update total using JS file in Magento 2,&nbsp;<\/em><\/strong>the&nbsp;same as in the default Magento 2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s bad practice to reload the whole page to update the total on modifying any field, and it results in a bad user experience too!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The users need not wait while the page reloads to proceed to place the order. Hence, use the below solution to automatically update total using JS file in Magento 2 cart page and checkout page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to&nbsp;Update Total Using JS File in Magento 2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use the below code in&nbsp;<strong>.js file<\/strong>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">define([\n    'jquery',\n    'Magento_Checkout\/js\/action\/get-totals'\n], function ($, getTotalsAction) {\n    'use strict';\n\n    var deferred = $.Deferred();\n    getTotalsAction([], deferred);\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Feel free to share the solution with Magento Community via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank You.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While working with the cart page and checkout page, the total automatically updates when you enter a correct coupon code or discount code in the&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1686","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1686","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1686"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1686\/revisions"}],"predecessor-version":[{"id":18150,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1686\/revisions\/18150"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}