Working with Nice URLs in Sitecore

When building your website and you're linking to categories or products, you want the link to please search engines (Google). Ucommerce comes with a set of OOTB components for grabbing and modifying the URLs. But to be able to extend them in a proper way you'll need to consider a few things that needs to be in place for Ucommerce and Sitecore to function properly.

This article will explain how:

• Ucommerce and Sitecore works together in order to present a product or category page
• How to modify the behaviour of nice URLs for categories and products

There's two sides to the equation

Everything in Sitecore and Ucommerce is context driven meaning that everytime you request a URL both Sitecore and Ucommerce needs to be able to populate the right data. Since Ucommerce integrates into Sitecore as a separate system, Sitecore will have the responsibility to populate pages give the current item we're looking at right now. This means that if we want to display a URL like the following: http://sitecore.ucommerce.net/demo-catalog/tops/formal/black-white-wonderland-mood-slim-fit-signature-shirt-limited-edition-%5b200-pieces%5d/c-24/c-70/p-105 we need to help sitecore a little bit as they do not know what to do with that URL.

How nice URLs work with Ucommerce

When you're entering a URL in your browser that takes you to a Ucommerce product page, say visiting one product on the demo store:

http://sitecore.ucommerce.net/demo-catalog/tops/formal/black-white-wonderland-mood-slim-fit-signature-shirt-limited-edition-%5b200-pieces%5d/c-24/c-70/p-105

The URL above will help determine the context of the request for Ucommerce as we can identify that this is a URL that belongs to Ucommerce. Not from the human readable part of the URL "black-white-wonderland-mood-slim-fit-signature-shirt-limited-edition" which is actually only for google, but from the last bit of the URL that contains: "/c-24/c-70/p-105". That part will help Ucommerce setup the right context. Based on Regular expressions we can map this to a Ucommerce request. Based on that we know what catalog, category and/or product we're browsing. The URLs comes in different versions depending on the context of the user as products can be visited across different catalogs and categories.

Url structure

As described above the context of the user will help determine the URL for the request. This means that URLs for a product will change depending on how they visit the product. The URL will always be based on display names for the different items supplied for the URL. The URLs will be build using the Hierarchy of the data in Ucommerce.

Requesting a product from the Catalog 'Demo Catalog' under the category 'Formal' will produce the following URL:

/demo-catalog/tops/formal/black-white-wonderland-mood-slim-fit-signature-shirt-limited-edition-%5b200-pieces%5d/c-24/c-70/p-105

Where the different slugs are:

////c-/c-/p-

Under the covers this is the exact same thing as asking for a url with querystring parameters - just presented a little nicer. For example the url above is more or less equivalent to the URL below as the url describes the context:

http://sitecore.ucommerce.net/category.aspx?catalog=24&category=70&product=105

Data driven pages

To have a full functioning data driven page in Sitecore and Ucommerce you need to either:

• have a Dedicated category/product page ** Needs an item in the Sitecore Content tree ** Layouts set on the category/product page letting Sitecore scaffold the page ** Query string parameters for catalog items in the Ucommerce Context APIs found under 'Ucommerce.Runtime'

• Use the data provider ** Layout directly on Ucommerce item in Content editor ** Hook in to the Sitecore httpRequestBegin pipeline to Resolve the right Item ** Nice URLs using Ucommerce APIs

When requesting our URL from before we need to be able to setup the right context for what we're looking at. The URL works well with Ucommerce however Sitecore also needs to be satisfied before we can actually present the page for the user. Since Sitecore handles the resolution of templates it needs to be able to understand what we're actually looking at. Sitecore will not be able to map this to a page as it doesn't know about the URL. In the Ucommerce+Sitecore integration you have the ability to work with category/product resolution in two different ways depending on your preferred setup:

• A dedicated category page and product page – referred to as data driven pages (The URL will look similar to this: http://sitecore.ucommerce.net/category.aspx?catalog=24&category=70&product=105 )
• Resolve the product directly in our Data provider integration (The URL will look like similar to this: http://sitecore.ucommerce.net/demo-catalog/tops/formal/black-white-wonderland-mood-slim-fit-signature-shirt-limited-edition-%5b200-pieces%5d/c-24/c-70/p-105)

Consider the structure below:

In that setup requesting /store/category.aspx will let Sitecore know what the item is. Now we just need to setup the Ucommerce context using querystring parameters e.g the '?catalog=24&category=70&product=105' part from before. Sitecore and Ucommerce will be happy as both systems knows how to resolve the right context. Sitecore can map it to a content page and thus the presentation details and Ucommerce can populate the CatalogContext based on the querystring. However it is not a very SEO friendly URL so your SEO guy will not be happy :-)

As Ucommerce comes with a data provider integration (all Ucommerce data is available inside Sitecore) we can leverage that to resolve the right data. As described above Ucommerce will be happy with the following URL:

http://sitecore.ucommerce.net/demo-catalog/tops/formal/black-white-wonderland-mood-slim-fit-signature-shirt-limited-edition-%5b200-pieces%5d/c-24/c-70/p-105

However Sitecore doesn't. But with Sitecore comes the ability to hook into the Request pipeline. Ucommerce has done that and placed an ItemResolver that will resolve the right Ucommerce item inside Sitecore. So instead of having a dedicated category or product page each of the items in Ucommerce (categories or products) will be its own page. Since the data is available in Sitecore we just need to configure presentation details on those. When that is done Sitecore is happy as well and we will have a full functioning page where Ucommerce can deliver the right content for the page presented by Sitecore.

Grabbing Nice URLs from the API

To grab URLs for the different items in Ucommerce you need to use the Ucommerce.Search.Slugs.IUrlService

Ucommerce.Search.Slugs.IUrlService

Methods

GetUrl

• Arguments
  • Ucommerce.Search.Models.ProductCatalog catalog
• Return type string
  

GetUrl

• Arguments
  • Ucommerce.Search.Models.ProductCatalog catalog
  • IEnumerable<Ucommerce.Search.Models.Category> categories
• Return type string
  

GetUrl

• Arguments
  • Ucommerce.Search.Models.ProductCatalog catalog
  • Ucommerce.Search.Models.Product product
• Return type string
  

GetUrl

• Arguments
  • Ucommerce.Search.Models.ProductCatalog catalog
  • Ucommerce.Search.Models.Product product
  • Ucommerce.Search.Models.Product variant
• Return type string
  

GetUrl

• Arguments
  • Ucommerce.Search.Models.ProductCatalog catalog
  • IEnumerable<Ucommerce.Search.Models.Category> categories
  • Ucommerce.Search.Models.Product product
• Return type string
  

GetUrl

• Arguments
  • Ucommerce.Search.Models.ProductCatalog catalog
  • IEnumerable<Ucommerce.Search.Models.Category> categories
  • Ucommerce.Search.Models.Product product
  • Ucommerce.Search.Models.Product variant
• Return type string
  

Change the URL structure

If you're not happy with how the URLs look like for Ucommerce items you need to:

• Hook into the HttpRequestBegin pipeline of Sitecore to set the right item in Sitecore and populate each of the items in UCommerce.Runtime.CatalogContext
• Override the default implementation of Ucommerce.Search.Slugs.IUrlService