Sitecore commerce AddToCart component quantity issue in catalog-productquantity.js

December 10, 2020 ·

Sitecore commerce AddToCart component quantity issue in catalog-productquantity.js

Hello Friends,

There is an OOTB component AddToCart for commerce which comes with input box to enter quantity and Add To Cart button

It also has + and - button so you can manually increase and decrease quantity and the textbox will show quantity as per that




Problem

While working on the component i found out that when we enter the quantity manually into the box and if i try to increase and decrease its value using + and -, it was malfunctioning and not updating the quantity which was strange as without touching the textbox, it was working just fine

Solution

Well, Because of some of the code in javascript it was not working and, following is the old code which caused the issue and will also paste the new code which was changed and after that it started working


We will need to edit catalog-productquantity.js full path of this item is /sitecore/media library/Base Themes/Commerce Components Theme/Scripts/Catalog/catalog-productquantity item
, So go to this item in Sitecore, download it and make below change

Old Code
$(quantityInput).attr('value', currentValue);
Above is the code which was causing the issue so you just need to find this line in JS and replce it with following

New Code
$(quantityInput).val(currentValue);

After making this change upload this file back to the Sitecore path shown above and publish.

The issue should have been resolved for you now.

NOTE: Sitecore was also able to reproduced this behavior on their end and above is the solution for it.
Sitecore Commerce ProductList getting variant prices for a product

December 10, 2020 ·

Sitecore Commerce ProductList getting variant prices for a product

Hello Sitecore Lovers !!!!

Today i will talk little about sitecore commerce OOTB component "Product List", if you have used existing storefront site and observe the list, it looks something like below



So far so good, now i will talk about the actual issue we run into

Problem
Most of the storefront OOTB component works on a product level, but in our case we needed prices from a variant and not from a product, Sitecore commerce has a pricing manager but it was always returning NULL for variant prices and was only returning prices for a product and not variant underneath it.

Details
Now because we knew that this component is using ProductListRepository.cs and if we override it, we could see what pricing logic is written and we can tweak it to get the variant price, but before that we wanted to find why it is not considering variants and only considering a product, Logically it should also fetch its variant prices too

So i started digging by looking into ProductListRepository.cs and found below code which actually is responsible to get prices on a product and a variant level.

if you observe below code in ProductListRepository.cs



 

There is one thing to note here
When ProductEntity is initialized using mode.Initialize method, VariantEntity list is passed null, now because it is passed as null, Variant list will always be empty from the model initialize method, see below



Setting up VariantEntityList is important because other wise no OOTB methods will fill out variant prices.

Now it was time to modify, ProductListRepository to have VariantList to fill and use existing pricing manager to fill variant prices like following


  protected override ICollection<ProductEntity> AdjustProductPriceAndStockStatus(
      IVisitorContext visitorContext,
      SearchResults searchResult,
      Item currentCategory,
      StringPropertyCollection propertyBag = null)
        {
            CommerceStorefront currentStorefront = this.StorefrontContext.CurrentStorefront;
            List<ProductEntity> productEntityList = new List<ProductEntity>();
            string str = "Category/" + currentCategory.Name;
            if (this.SiteContext.Items[(object)str] != null)
                return (List<ProductEntity>)this.SiteContext.Items[(object)str];
            if (searchResult.SearchResultItems != null && searchResult.SearchResultItems.Count > 0)
            {
                foreach (Item searchResultItem in searchResult.SearchResultItems)
                {
                    List<VariantEntity> variantEntityList = new List<VariantEntity>();
                    if (searchResultItem != null && searchResultItem.HasChildren)
                    {

                        foreach (Item child in searchResultItem.Children)
                        {
                            VariantEntity variantModel = this.ModelProvider.GetModel<VariantEntity>();
                            variantModel.Initialize(child);
                            variantEntityList.Add(variantModel);
                        }
                    }
                    ProductEntity model = this.ModelProvider.GetModel<ProductEntity>();
                    model.Initialize(currentStorefront, searchResultItem, variantEntityList);
                    productEntityList.Add(model);
                }
                this.CatalogManager.GetProductBulkPrices(currentStorefront, visitorContext, productEntityList);
                this.InventoryManager.GetProductsStockStatus(currentStorefront, productEntityList, currentStorefront.UseIndexFileForProductStatusInLists);
                using (List<ProductEntity>.Enumerator enumerator = productEntityList.GetEnumerator())
                {
                    while (enumerator.MoveNext())
                    {
                        ProductEntity productEntity = enumerator.Current;
                        Item obj = searchResult.SearchResultItems.FirstOrDefault<Item>((Func<Item, bool>)(item =>
                        {
                            if (item.Name == productEntity.ProductId)
                                return item.Language == Sitecore.Context.Language;
                            return false;
                        }));
                        //if (obj != null)
                        // productEntity.set_CustomerAverageRating(this.CatalogManager.GetProductRating(obj));
                    }
                }
                this.BulkManager.GetProductPricesAndStockInformation(currentStorefront, (IEnumerable<ProductEntity>)productEntityList, false, propertyBag, (string[])null);
            }
            this.SiteContext.Items[(object)str] = (object)productEntityList;
            return (ICollection<ProductEntity>)productEntityList;
        }
 
As you see now, We have initialized VariantEntityList and also we are now calling OOTB method to fill variant prices which is

 this.CatalogManager.GetProductBulkPrices(currentStorefront, visitorContext, productEntityList);

 
We used this method initially and found out that, until this productEntityList does not have the variant list initialized, it will not will not fill any prices for variant and hence VariantEntityList code is introduced  

It took some time to figure out this but DotPeek is your best friend while working with sitecore commerce, Specially when you want to do customization   

Happy troubleshootings !!!