Update Checkout Summary on Selecting Shipping Method In Magento 2
Are you looking for a way to update checkout summary on selecting shipping method in Magento 2? Then I have a simple solution for you.💡
A checkout summary is an important element in the buying process. The shopper would like to have a complete overview of their order with a proper payable amount. If, as a Magento 2 store owner, you are using the two-step checkout method, then this process is not very complicated.
Since the payable amount shows after the shopper has filled in all the details, and the entire calculation appears after the shopper clicks the next button. Here the first step is filling in the details, and the second step displays the payable amount.
If you are using a single-page checkout theme, all the information displays on a single page without any next button. At times it might happen that the order summary might not update the shipping charges that the shopper might have selected.
Let’s understand this using a small example: Your default shipping charges are $5, and super-fast shipping charges at $10. If your shopper opts for super-fast shipping charges ($10), the checkout summary will still show $5.
The single-page checkout theme fails to update this in the order summary, which might create an issue during the checkout. If you are facing an issue while updating your checkout summary on selecting shipping method, I have found this solution for you!
Update Checkout Summary on Selecting Shipping Method In Magento 2
You will just need to add this file to your theme path:Â ‘Magento_Checkout/js/action/set-shipping-information’
This code:
|
1 2 3 4 5 6 7 8 9 10 11 |
define( [ '../model/quote' ], function (quote) { "use strict"; return function (shippingMethod) { quote.shippingMethod(shippingMethod) } } ); |
Will become this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
define( [ Â Â Â Â '../model/quote', Â Â Â Â 'Magento_Checkout/js/action/set-shipping-information' ], function (quote, setShippingAction) { Â Â Â Â "use strict"; Â Â Â Â return function (shippingMethod) { Â Â Â Â Â Â Â Â quote.shippingMethod(shippingMethod); Â Â Â Â Â Â Â Â if (shippingMethod !== null) { Â Â Â Â Â Â Â Â Â Â Â Â //To update cart total after selecting shipping method. Â Â Â Â Â Â Â Â Â Â Â Â setShippingAction([]); Â Â Â Â Â Â Â Â } Â Â Â Â }; } |
This file will trigger an action related to the shipping information and updates the cart total selected by the shopper. & that’s it. This is all you need to do! Adding this file will get the job done without any hassle. Give it a try.
These days, I have noticed many Magento store owners are opting for single-page checkout as it gathers all the information in one place, helps to reduce the cart abandonment rate, and significantly improves the conversion rate. And adding this file will help you update checkout summary on selecting shipping method in Magento 2 smoothly in your store.
✨ Related read: How to Update Total Using JS File in Magento 2
If you have any doubts about the solution or find any issues doing this process, do let me know in the comment section. I will be happy to help you.
I hope this solution helps!
Prev
10 Best Shopify Apps For YouTube
8 Best Shopify Apps For Product Comparison
Next