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.

Headless Sitecore Commerce with Sitecore JSS – Part 1

In this blog series I will cover for you how you can create Headless Commerce Solution on the Sitecore Experience Platform by utilizing Sitecore JSS.

WOOLI has been in the EPAM lab since the JSS Technical Preview. So now EPAM is ready to share it with the Sitecore community, and that is simply great.

This is what you need in order to follow my tutorial:

  1. Sitecore Experience Commerce 9.1 (https://dev.sitecore.net/Downloads/Sitecore_Commerce/91/Sitecore_Experience_Commerce_91_Initial_Release.aspx)
  2. Sitecore JSS – 11.1.0 (https://dev.sitecore.net/Downloads/Sitecore_JavaScript_Services/120/Sitecore_JavaScript_Services_1200.aspx)
  3. NodeJS – 10.15.3 (https://nodejs.org/dist/v10.15.3/)
  4. WOOLI – https://github.com/epam/sitecore-headless-commerce-accelerator

First let’s start our Sitecore Instance and make sure that everything is operating and Commerce is loading and our certificates are in place.

Lets make sure that we can load Sitecore Commerce

Lets make sure that we can load Sitecore Content Editor

All Right now, is the fun time, let’s go ahead and install NODEJS and Sitecore JSS. Using choco lets install nodejs

choco install nodejs

What is Choco? It is a package manager for Windows. Here is how to get it.
https://chocolatey.org/docs/installation

Okay so by now we have node installed, let’s go ahead and install Sitecore JSS. If you don’t know how to install Sitecore JSS, here is the link to my other blog.

How to Install Sitecore JSS

So far everything was smooth. Make sure you are installing the JSS version that is compatible with XC 9.1.

And When you are creating an API Key, you need to be in the Master DB.

Now it is time for the easy task to build and deploy WOOLI to the Sitecore.

These are the following operation that you will need to perform in order to continue:

  1. Run npm install in the folder to install all the node_modules
  2. Add Nuget Packages Sources
  3. Restore Nuget Packages
  4. Execture scr/build.ps1

If you don’t do that, this is what you will get:

Make sure you add the appropriate Package Sources as it is highlighted in the repository readme

So once you run the build.ps1, all your code will build and deploy.

Lets Open the Content Editor and we will see Wooli has been deployed to our Sitecore Instance, where Sitecore Commerce is also installed.

Change the Catalog

Don’t forget to Rebuild Indexes

Make sure you have the appropriate bindings set up and load up http://wooli.local/

If you have any questions or problems reach out to me on Twitter or LinkedIn, or you can create an issue in GitHub, that will be the best way to do, you can be helping other as well https://github.com/epam/sitecore-headless-commerce-accelerator/issues

Stay tuned for the next blog about Headless Sitecore Commerce with Sitecore JSS