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.
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}
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.
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.
Here is the custom implementation of the add functionality, so you can explore the rest of the CartController in the Github Repo
Once we add the item to the Cart, lets visit the cart and see what calls are being made now:
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
So we log in into the Business Tools > Orders
And search for our order “3TLMTCVUCP4DW0S5BOO6GHREX”
We can see that the journey from Storefront has made it all the way to the 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.
