How to Display Order Summary in Shipping Step of Checkout in Magento 2- magento source24

How to Display Order Summary in Shipping Step of Checkout in Magento 2- 

Hello magento friends todays in this blog post im share with you to How to Display Order Summary in Shipping Step of Checkout in Magento 2. Displaying an order summary in the shipping step of the checkout process in Magento 2 can enhance the user experience and help customers review their order before finalizing it. Here's how you can achieve this:

 ➤ Create a Custom Module (➛if not already done):

If you don't have a custom module already, you need to create one. This involves creating the necessary directory structure, registration files, and module configuration.

 ➤ Create a Layout XML File:

In your custom module, create a layout XML file in the path app/code/YourVendor/YourModule/view/frontend/layout/checkout_index_index.xml. This file will define the layout structure of the checkout page.

➤ Create JavaScript Component:

Next, you need to create the JavaScript component that will render the order summary. Create the file app/code/YourVendor/YourModule/view/frontend/web/js/view/summary.js.

➤ Create Template File:

Create the HTML template file for rendering the order summary. Create the file app/code/YourVendor/YourModule/view/frontend/web/template/summary.html.

➤ Clear Cache and Deploy Static Content:

After creating the necessary files, clear the Magento cache and deploy static content:

➤ Test the Checkout:

Navigate to your Magento store and test the checkout process. The order summary should now be displayed in the shipping step of the checkout.

Remember to replace YourVendor and YourModule with your actual vendor and module names. This is a basic example, and you can further customize the appearance and content of the order summary according to your requirements.