Sitecore Experience Commerce: How to Add Cart Information on Checkout Pages for Any Website Analytics Tool

Adding JSON formatted data regarding page content has become more and more common nowadays. From Google’s structured data requirements, to Google Tag Manager, and to others, developers and product owners have complied in the hopes of making their pages easier to crawl, track and/or minimize incorrect data being indexed or analyzed.

In one of my projects, I was asked to make cart information easily available to tracking programs and as an additional challenge, expose the promo code used for each line item in the cart if any. As we all know, each promo code may or may not apply to 1 or more items in the cart. The line item promo information is also not automatically provided out-of-the-box (OOTB), so it is up to us to find a good solution to this challenge.

Read on!

The Challenge

On each step of the checkout process, the information on figure 1 is required to be present. This contains details about the current cart and its content as well as the possible order to be created at the end. Information will be added as it becomes available while progressing through the checkout process (e.g. tax / shipping cost).

Figure 1: Target cart information structure in JSON format

The Solution

Here is a high-level itemized list of what we need to do in order to solve this challenge:

1. Create classes need to that will model our target JSON data structure
2. Get customer cart and map data to our model
3. Generate JSON based on model on views where needed (cart page, billing page, shipping page, etc.)

Note: Some images were taken from actual project files. Some names have been covered for privacy purposes.

The Container Classes

To start things off, we need a class that will model our target data structure. Figure 2 shows our model and includes JsonProperty attributes for the properties. The attribute is added so we can specify the name of the property once it is converted to JSON. This way, we can have a more descriptive and natural name during development while being able to comply with much shorter names in the JSON document.  

Figure 2: Main Container Class for Cart Info

Figure 3 shows the model for our cart line items. It is represented as a collection in the main model.

Figure 3: Product Container Class for Cart Line Info

One important thing to note here is the necessity to initialize the properties to make sure they won’t have null values. Having null values will trigger an exception error during JSON conversion.

Populating the Container

Once we retrieve the cart object being used by the user, it is then processed in our GetShoppingCartData method that returns a populated ShoppingCartDataModel object. This object will contain the data needed to be rendered as JSON in the checkout pages.

On Figure 4, we see our Cart Manager class containing our processing method. This is best called when we are generating the model for our view. One thing to note here is that on Line 842, we accessed a custom line property called “PromoCodes” to get all promo codes applied to a cart line. This is not out of the box and is explained further in the next section.

Figure 4: GetShoppingCardData method to map data

Mapping the Promo Codes to Line Items

For us to add our custom cart property, we will need to override the default Carts.TranslateCartToEntity and replace it with a custom one. This way, we can add an additional translation method that will add the custom property.

On Figure 5, we created TranslateCouponComponent that will check for all promotions applied to a line item and create a list of all promo codes applied as comma-separated values. There are a few assumptions made in order to make this work.

1. All coupons are line level only. No cart level coupons or promotions applied
2. The promotion should have the same Name, Display Name and Description values
   1. This is needed since the line level adjustment is using the display name as name while the cart level promotion object uses the actual name. In order to map it correctly, we would have to make them hold the same value.

Figure 5: Custom Translate Cart to Entity Processor with Coupon Processing Method

Figure 6 shows our config that replaces the default processor with our custom one.

Figure 6: Custom Processor Config

Rendering the JSON on the View

Once the backend pipeline is created to get the data, we will need to add the actual JSON rendering on the view. Figure 7 shows our Razor code that will output the data model as JSON.

Figure 7: Cart page control rendering view

Figure 8 shows our rendered cart data model in the Cart page. Notice that we have shipping and tax as 0.00 since we have not yet progressed to those sections in the checkout process. Also note that the applied promo code is present to show where the discount is coming from.

Figure 8: Cart page displaying rendered data in JSON format

Summary

Sitecore XP and Sitecore Experience Commerce and its very extensible and customizable platform makes it very easy for us to implement most of the business requirements from clients. In our article, we were able to generate a JSON representation of our cart data so it can be read easily by analytics tools and provide our clients much needed information and analysis for their future business decisions.