Are you a Magento 2 store owner looking for a way to update the checkout summary on selecting a shipping method? The checkout summary plays a crucial role in providing shoppers with a complete overview of their order and the payable amount. However, in some cases, the order summary might fail to reflect the selected shipping charges, which can lead to issues during the checkout process. In this blog post, we will explore a simple solution to address this problem and ensure a smooth shopping experience for your customers.

 

Understanding the Checkout Process: Before diving into the solution, let's first gain a better understanding of the checkout process in Magento 2. Magento 2 offers two methods for the checkout process - the two-step checkout and the single-page checkout theme. In the two-step checkout, shoppers fill in their details in the first step, and the payable amount is calculated and displayed in the second step. On the other hand, the single-page checkout theme displays all the information on a single page without any next button.

 

The Challenge: While the two-step checkout method handles the updating of the checkout summary automatically, the single-page checkout theme may encounter issues in updating the shipping charges selected by the shopper. For example, if the default shipping charges are $5, and the shopper opts for super-fast shipping charges of $10, the checkout summary might still display $5 instead of the updated amount.

 

The Solution: To overcome this challenge and ensure that the order summary reflects the selected shipping charges accurately, you can follow these simple steps:

 

Add the following file to your theme path:

Magento_Checkout/js/action/set-shipping-information

 

Replace the existing code in the file with the updated code shown below:

 

define(['../model/quote', 'Magento_Checkout/js/action/set-shipping-information'], function(quote, setShippingAction) {

  "use strict";

  return function(shippingMethod) {

    quote.shippingMethod(shippingMethod);

    if (shippingMethod !== null) {

      // Update cart total after selecting the shipping method.

      setShippingAction([]);

    }

  };

});

 

By adding this file with the updated code, you trigger an action related to the shipping information, ensuring that the cart total is updated according to the shipping method selected by the shopper.

 

Conclusion:

Updating the checkout summary on selecting a shipping method is essential to provide shoppers with an accurate overview of their order and payable amount. By following the simple solution outlined in this blog post, you can resolve any issues related to shipping charge updates in your single-page checkout theme in Magento 2. Ensuring a smooth and seamless checkout process will lead to greater customer satisfaction and improved conversions for your Jayvion Commerce store.

 

Remember to implement this solution carefully to avoid any conflicts with your existing Magento 2 setup. If you encounter any difficulties or have any questions, don't hesitate to seek assistance from Jayvion Commerce experts or consult relevant Magento documentation.

 

We hope this blog post helps you optimize the checkout experience on your Magento 2 store. 

 

Happy Coding!