Customize Commerce product default URL

In this blog, I will discuss how to modify URL of the product details page of Sitecore commerce product.

Default installation of commerce storefront will have a url which contains shop, category, sub category and product name and product sku. Most of the times during the implementations of the sitecore commerce, the requirement will be to maintain a generic SEO friendly URL or retain existing product page URLs for example. For modification of the URL, we need to customize commerce default configuration.

As an example, we need to change the URL of commerce product page https://sxa.storefront.com/shop/Televisions%3dhabitat_master-televisions/HabitatDynamix65%E2%80%9D4KLEDUltraHDTelevisionwithHDR%3d6042270 or https://sxa.storefront.com/product/HabitatDynamix65%E2%80%9D4KLEDUltraHDTelevisionwithHDR%3d6042270 to https://sxa.storefront.com/product/6042270

The above URLs are accessed by default Sitecore wildcard mappings and  pages are configured in sitecore content path location  -  /Sitecore/content/Sitecore/Storefront/Home/product/* and /sitecore/content/Sitecore/Storefront/Home/Shop/*

Behind the scenes, here is how sitecore will resolve the commerce item when showing product details page

1. Implement the Item resolver by inheriting the HttpRequestProcessor.
2. Get the catalog Item id from URL (GetCatalogItemIdFromUrl method)
3. Resolve the catalog item by passing catalog Item id from the URL(ResolveCatalogItem)
4. Once the catalog Item is found, set the current catalog Item of the sitecore context (SiteContext.CurrentCatalogItem) to the found catalog Item.

For implementing the custom url for the sitecore commerce product, we will need to implement the same way sitecore is implementing behind the scenes.So here is the code and steps for implementing the same.

1. Inherit HttpRequestProcessor - public class CatalogProductItemResolver : HttpRequestProcessor
2. Override theprocess method of the override HttpRequestProcessor

void Process(HttpRequestArgs args)

3. Get the catalog Item

In this method, we can find the catalog item id from the sku id or any custom name of catalog item passed through URL.

Code

private string GetCatalogItemIdFromUrl()        {            if (this.IsGiftCardPageRequest())                return this.StorefrontContext.CurrentStorefront.GiftCardProductId;            string commerceItemId = string.Empty;            string rawUrl = HttpContext.Current.Request.RawUrl;            int num = rawUrl.LastIndexOf("/", StringComparison.OrdinalIgnoreCase);            if (num > 0)            {                //get the sku of the product passed in query string                string skuOfItem = rawUrl.Substring(num + 1);                //find the sitecore item using                 CommerceStorefront currentStorefront = StorefrontContext.CurrentStorefront;				//get the sitecore commerce catalog item id from SKU which is passed in the query string.replace GetCustomCatalogItemIdBySku with your customization                 commerceItemId =  GetCustomCatalogItemIdBySku(skuOfItem, currentStorefront, SearchManager);            }            return commerceItemId;        }

4. Resolve the catalog Item – This is where we can write our custom implementation of finding the catalog item by using SKU ID.

Here is the code

//get the item id and search the item in sitecore commerce      protected Item ResolveCatalogItem(      string itemId,      string catalogName,      bool isProduct)        {            Item obj = (Item)null;            if (!string.IsNullOrEmpty(itemId) && !string.IsNullOrEmpty(catalogName))                obj = !isProduct ? this.SearchManager.GetCategory(itemId, catalogName) : this.SearchManager.GetProduct(itemId, catalogName);            return obj;        }

5. Once the sitecore item has been resolved,assign that sitecore item(commerce product id) as sitecore context current catalog Item

Code - this.SiteContext.CurrentCatalogItem = obj;

Once the code is in place, register the configuration to sitecore with the following code

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">  <sitecore>    <pipelines>      <httpRequestBegin>        <processor type="Horizontal.Commerce.Foundation.Catalog.Pipelines.CatalogProductItemResolver, Horizontal.Commerce.Foundation.Catalog" patch:before= "processor[@type='Sitecore.Pipelines.HttpRequest.ItemResolver, Sitecore.Kernel']" />      </httpRequestBegin>    </pipelines>  </sitecore></configuration>

The full code of the custom URL product page is available at https://github.com/ramakrishnaila/sitecore-commerce/blob/master/CatalogProductItemResolver.cs

Conclusion

The URL re generation of the sitecore commerce product pages can be customized using sitecore custom resolver pipelines without changing the sitecore configuration and existing storefront default pages in sitecore.