Sitecore Commerce :: Extending Checkout Shipping Step Fields

 Recently I worked on a sitecore commerce implementation, and while working on too many extension areas in sitecore commerce one of these areas was working with checkout process, we needed to extend the checkout shipping address steps, in this blog post will highlight the main areas that you would need to be aware of and need to be updated, in addition to best practices while working with Commerce SXA theme items. are you read? keep reading!! 

You probably know that Sitecore Commerce comes with OOTB SXA storefront which you can utilize and based on top off to build your own brand storefront, and to get familiar with it, you would need to get familiar with how Commerce Components are built, and to do that I would suggest to go through the following article:

• Understanding the Sitecore Commerce Javascript Architecture
  

First thing you need to know that all JavaScript related to Sitecore Commerce Checkout exist as sitecore items / SXA theme in Sitecore media library, following is a screenshot where you can find these:

Also, one more thing to do is to find the checkout html to be updated, this can be found as a razor file in case if the shipping step, PS : other Commerce components can be found as SXA variant in type of Scriban, following is the path and a screenshot of where you can find these html files:

 

Now as you know where is all your frontend assets (JS/HTML) can be found; its time to find where is you backend logic exists, the OOTB logic for shipping step exists in the [Sitecore.Commerce.XA.Feature.Cart] binary, so the next step you need to do is to get a de-compiler, open the dll and check it out! 

Here is a step by step what you need to do on each area:

1. HTML

On order to create your own version of the shipping step, you need to create you own delivery controller rendering, the html for it can be found in the following razor file: 

• Views\Commerce\Checkout\Delivery.cshtml

Now in this file, you can add your own fields, known that, following are the fields the sitecore commerce  Party:

• FirstName
• LastName 
• Email 
• Company
• Address1
• Address2
• ZipPostalCode
• City
• State
• Country
• PhoneNumber

One more thing to pay attention to is the Knockout JS syntax that you need to maintain on the fields, that's how commerce components bind data and other attributes like visibility as example.  

2. JavaScript

As I mentioned before, JS logic for all commerce components exist as an sxa theme under sitecore media library, now, in order to apply your changes and as best practices you would need to create your own copy before, them apply your changes there, this is how you maintain your changes on future while ding upgrades as example.

Okay, so what now? now you would need to duplicate the following theme, and make sure to inherit this one to your website storefront theme instead of the default one:

• /sitecore/media library/Base Themes/Commerce Components Theme/Scripts/Cart/cart-checkout-delivery-model

Once you do that, now its time to download the JS files related to our step and update these as needed then re-upload them, as for source control, you could use Sitecore Content Serialization (CLI), to keep these tracked in your source control. 

Here are a list of files/media paths, that contain all the logic for the checkout shipping/delivery step:

• This file contains all the logic for the shipping step, including shipping methods logic, loading data and validation:
• /sitecore/media library/Base Themes/Commerce Components Theme/Scripts/Cart/cart-checkout-delivery-model
• This file contains the data model definition, here where you can add fields to your model:
• /sitecore/media library/Base Themes/Commerce Components Theme/Scripts/Cart/cart-checkout-address-model

3. Backend

Now after you updated your frontend its time to look into backend code, here where you can depends on the reflector to open the default binary mentioned before, and try to look inside and see what need to be customized, for now, we already created a new controller and action for our delivery step, but what next.

You would saw that we need to customize a method called SetShippingMethods which is being called when you want to move to the billing step, this method takes SetShippingMethodsInputModel as parameter which we need to override as it doesn't have all the fields that we want to add. 

once you finish this step, you would definitely realize that you would need to create you own repository to match the Delivery Repository, and from there you would complete you backend customization. 

Hopefully you find this is helpful, feel free to reach out through comments or emails if you have any questions on this topic. also, keep following this blog as I will post more while going through checkout process customization.