Tuesday 15 February 2022

Sitecore Commerce :: Checkout forms validation

 If you're working or planning to work on Sitecore Commerce, you will definitely run into this issue while working on the checkout process and to be specific in the forms entry steps, either the shipping/delivery step or the payment step, if you have the OOTB SXA storefront  you would notice that the validation/error messages not working as expected, when you click the submit button you should receive/see error messages for the required fields, but this is not happening, want to know how to resolve this, keep reading the solution is simple!  



As you can see from the above screenshot, once you click on [View Shipping options] you would notice a JavaScript error in the console tab about a component is no defined, to be specific [DeliveryDataViewModel], lets dive deep and see where is the coming from.


 If you're new to Sitecore Commerce and want to know more about how the commerce components works together (using Event Broker Theme) and get familiar with the different commerce base themes in addition to information about Knockout JS, I would suggest to go through 10 minutes read blog post:
 
https://www.rbaconsulting.com/blog/understanding-the-sitecore-commerce-javascript-architecture/ 

After reading the above, I bit you're more familiar now with Sitecore Commerce components, and with a little bit diffing in, you will notice that code logic for the checkout process exists in Commerce Components Theme under base themes in media library, following is the Sitecore Path:

/sitecore/media library/Base Themes/Commerce Components Theme/Scripts/Cart


All what you need to do is to download the following script: 
/sitecore/media library/Base Themes/Commerce Components Theme/Scripts/Cart/cart-checkout-delivery-model

and update the following line (as you can see form the following snippet, line 659, 660): 


Notice that the above also apply to the payment step, you would need to download the related file and apply the same thing, Hope this help someone! 


No comments:

Post a Comment