Headless Sitecore Commerce with Sitecore JSS – Part 2

In Part one https://mysitecore.blog/2019/09/27/wooli-headless-commerce-with-sitecore-jss-part-1/ we have covered how to install the Headless Sitecore Commerce Accelerator/StarterKit.

In part 2 I would like to cover how does Sitecore Commerce work with Sitecore JSS.

First let’s cover the communication from Storefront to the Sitecore with the help of the layout service we are able to display all the content as well as the placeholders.

Sitecore Commerce + Sitecore JSS

So static data is coming from the layout service and as you can see on the screenshot above we are able expand our Inspector and see the details.

Next lets go ahead and explore the items that are in the store, when we visit the site the request is being made to the retrieve /shop/Phones

sitecore/api/layout/render/jss?item=%2Fshop%2FPhones&sc_lang=en&sc_apikey={API_Key}
Sitecore Commerce + Sitecore JSS

And as you can see on the screenshot above you can see the route and placeholder information, as well as component names “Product List” and “Product Filters”

Also as you can see on the screenshot below Analytics cookie is present and interaction is being tracked “SC_ANALYTICS_GLOBAL_COOKIE”, so you can personalize your visitor’s experience.

Sitecore Commerce + Sitecore JSS

Also there is another call that is being made /apix/client/commerce/cart/get/ to check if there is anything in the cart, so this is the custom implementation. This is the communication between Storefront and Sitecore Commerce.

Next let’s go ahead and the item to the cart and process the order and see if it appears in the Sitecore Commerce.

Sitecore Commerce + Sitecore JSS

Here is the custom implementation of the add functionality, so you can explore the rest of the CartController in the Github Repo

https://github.com/epam/sitecore-headless-commerce-accelerator/blob/master/src/Feature/Checkout/code/Controllers/CartController.cs

Once we add the item to the Cart, lets visit the cart and see what calls are being made now:

Sitecore Commerce + Sitecore JSS

So we will have Layout Service “jss?item=cart”, that will display our components, and a custom api call “apix/client/commerce/cart/get” that will get what is in the cart.

Next we will checkout, enter the address and credit information and see if the order appears in Commerce.

Order has been submitted now. BTW Credit Card processing is handled by BrainTree

Sitecore Commerce + Sitecore JSS

So we log in into the Business Tools > Orders

Sitecore Commerce Orders

And search for our order “3TLMTCVUCP4DW0S5BOO6GHREX”

Sitecore Commerce + Sitecore JSS

We can see that the journey from Storefront has made it all the way to the Sitecore Commerce.

Sitecore Commerce + Sitecore JSS
Here is high level diagram of how Storefront interacts with Sitecore and Sitecore Commerce

If you have any questions please do not hesitate to reach out to me on twitter and or at the #sitecoreSYM in Orlando.

You can book a 30 minute session with me and Kelly at the Symposium 2019 in Orlando Nov 4th – 8th.