{"id":16503,"date":"2025-06-09T11:15:30","date_gmt":"2025-06-09T05:45:30","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=16503"},"modified":"2025-06-10T12:33:27","modified_gmt":"2025-06-10T07:03:27","slug":"admin-create-order-page-in-magento-2-using-js","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/admin-create-order-page-in-magento-2-using-js\/","title":{"rendered":"Dynamically Reload Totals on Admin Create Order Page in Magento 2 Using JavaScript"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/meetanshi.com\/blog\/create-order-in-magento-2-admin-panel\/\">Creating orders from the Magento 2 admin panel<\/a> is one of the most commonly feature store admins use. As developers, there is a high need to customize or extend this functionality to meet specific business needs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When building custom features, there\u2019s a frequent need to update specific sections of the order creation page \u2014 such as totals, taxes, discounts, or shipping costs without refreshing the entire page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Refreshing the entire page generally causes the below issues:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adds unnecessary server load<\/li>\n\n\n\n<li>Disrupts the admin\u2019s workflow<\/li>\n\n\n\n<li>Reduces the performance and user experience<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s why reloading only the affected block is the best and recommended practice.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A dynamic reload totals on admin create order page in Magento 2 using JavaScript is needed in below cases:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The totals are recalculated<\/li>\n\n\n\n<li>Shipping and tax rules are correctly applied<\/li>\n\n\n\n<li>Discounts or custom changes reflect accurately<\/li>\n\n\n\n<li>Refreshing totals display<\/li>\n\n\n\n<li>Update any related UI elements<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Dynamically Reload Totals on Admin Create Order Page in Magento 2 Using JavaScript?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Integrate the below solution in your js file to reload the total block on the admin create page.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>window.order.loadArea(&#91;'specify_total_block_name', 'totals'], true);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Where window.order refers to a global JavaScript object provided by Magento&#8217;s admin UI (specifically in order creation\/edit views).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Simply, use this solution to ensure data accuracy, better performance, and a smoother admin experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Reloading only the necessary sections like totals using JavaScript is always a smart approach when working with the admin order page in Magento 2.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating orders from the Magento 2 admin panel is one of the most commonly feature store admins use. As developers, there is a high need&#8230;<\/p>\n","protected":false},"author":5,"featured_media":16550,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-16503","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/16503","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=16503"}],"version-history":[{"count":1,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/16503\/revisions"}],"predecessor-version":[{"id":16504,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/16503\/revisions\/16504"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/16550"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=16503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=16503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=16503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}