Sitecore commerce sxa OOTB ProductList component always have variants property as NULL in ProductEntity class

Hello People,

It has been little time till my last blog post, project priorities and lot to learn, It has been now 6 months I am working on core Sitecore  and I am loving the challenges and digging into nitty gritty of it.

Recently, we started working on Sitecore commerce project which had lot of customization needed to achieve what we want to achieve from what commerce and sxa provides OOTB (Out of the box).

OOTB commerce and sxa provides lot of components for storefront where authors can see product list, can have promoted products and much more

I would suggest to make the "dotPick" friend of your lifetime, as you will need to look into some important DLLs to troubleshoot or to extend the functionalities depending on your need.

Today, I would like to share one instance where we need to show some information from variant (not from a product), sounds simple right? but issue soon started as we started configuring OOTB "Product List" component.

Scenario (The 'ASK')

We wanted to have some information from variant like we wanted to show the lowest price and highest price from the variant on that each product.

Very first thing we did was to find out if anything like this exists OOTB, and as we guessed as it is our specific implementation, It was not possible OOTB, so next was to find out what needs to be done to achieve this.

So, we took help of our friend dotPick and started looking into classes and repositories which deals with getting the product list component and renders it, following is the list of it

• ProductListRepository (In Sitecore.Commerce.XA.Feature.Catalog DLL)
• ProductListJsonResult (In Sitecore.Commerce.XA.Feature.Catalog DLL)
• ProductList.cshtml view (Resides in View->Commerce->Catalog folder)

What you need to override depends on what you need to change, here in our case we wanted to show variant prices on the view so we had to override the cshtml view, Click Here to know how to override OOTB view and its html and customize it.

Now because we want to show lowest and highest price for each variant we need to write custom code so that we can loop through all products and find variant underneath it and get the price and update the model with it and read them in a view so we can show them on the site.

so we needed to override ProductListRepository and create "override" function GetProductListJsonResult so we can write our code in it

Now further dotPicking showed that "ProductListJsonResult" has a property called "ChildProducts" which has all products inside it and it is of type "ProductSummaryViewModel" which has the property "Variants" and we were interested in getting that property so we can loop through all the variant and find its list price

but as soon we override it and debug it the Variants property was always NULL

see the last line where we are doing model.ChildProducts in that "PopulateProductsData()" we were always getting variants as NULL in ProductSummaryViewModel

ChildProducts is of type ICollection<ProductSummaryViewModel>

We expected that property generally gets filled out automatically, further investigation showed following

1) ProductEntity class has Variants property
2) In above code when this.AdjustProductPriceAndStockStatus is called, in that function the Variants are always passed as NULL (see below AdjustProductPriceAndStockStatus method screen shot)
3) Because Variants are passed as NULL in initialize method of ProductEntity, it will set Variants to NULL.
3) Because variants are always passed as null, model.Intitialize in above code is called the ProductEntity values are copied to ProductSummaryViewModel
3) But because ProductEntity class always initialize variants as NULL in its constructor, hence ProductSummaryViewModel will always have Variants as NULL

ProductEntity.cs

Above class has variant list properties and this should be set, if this is set correctly in initialize method, the ProductSummaryViewModel.cs will automatically get the Variants property.

but if you see below the code shown from dotPick

AdjustProductPriceAndStockStatus()

As you can see, because of this ProductEntity will always have Variants as NULL and hence ProductSummaryViewModel will always have NULL in variants

Solution

Now we knew that if we pass right List<Variants> instead of NULL in AdjustProductPriceAndStatus function, we will get the variants property filled out, so we change the code like following

As expected, Everything was filled out, ProductSummaryViewModel now had the Variants property filled out with correct variants and now we were able to get variant details and manipulate view as per our wish

Hope this will help, If you get yourself into something like this :)