World is now on Opti ID! Learn more

Drew Null
Feb 6, 2022
  29
(0 votes)

Product and category URLs without the catalog slug in Commerce 14 (.NET 5)

This one stumped me the other day, and I couldn't find anything by doing a web or World search.

Problem: How do we exclude the catalog route segment from the URLs of categories and products?

Say you have the following catalog structure:

Catalog Root
    My Catalog // CatalogContent
        My Category // NodeContent
            My Product // ProductContent
                My Variant // VariationContent

By default, the URL to My Variant will look like this:

/my-catalog/my-category/my-variant

But /my-catalog won't resolve to an actual page, so we want to remove it from the URL. Which would render like this:

/my-category/my-variant

Much better. But how do we do this in Commerce 14?

Prior to Commerce 14, this could be done using System.Web.Mvc's RouteTable. But that was killed off in ASP.NET Core, so we need another way.

PartialRouteHandler to the rescue.

This is pretty simple: Create an initialization module and use PartialRouteHandler to register a PageData-to-CatalogContentBase partial router. No custom implementation needed.

Note that how you, say, resolve a catalog to a site, could vary based on the needs of your project. In the example below, we resolve all catalogs to all sites.

using EPiServer;
using EPiServer.Commerce.Catalog.ContentTypes;
using EPiServer.Core;
using EPiServer.Core.Routing;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.ServiceLocation;
using Mediachase.Commerce.Catalog;

[InitializableModule]
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
[ModuleDependency(typeof(EPiServer.Commerce.Initialization.InitializationModule))]
public class CustomHierarchicalCatalogPartialRouterInitialization : IInitializableModule
{
    public void Initialize(InitializationEngine context)
    {
        /* MapDefaultHierarchialRouter [sic] is no longer needed... */
        ////CatalogRouteHelper.MapDefaultHierarchialRouter(false);
        var referenceConverter = ServiceLocator.Current.GetInstance<ReferenceConverter>();
        var contentLoader = ServiceLocator.Current.GetInstance<IContentLoader>();
        var partialRouteHandler = ServiceLocator.Current.GetInstance<PartialRouteHandler>();
        var catalogs = contentLoader.GetChildren<CatalogContentBase>(referenceConverter.GetRootLink());
        foreach (var catalog in catalogs)
        {
            // This implementation will register all catalogs for all sites; if you want it to work differently, do so here--
            partialRouteHandler.RegisterPartialRouter(
                new PartialRouter<PageData, CatalogContentBase>(
                    new HierarchicalCatalogPartialRouter(() => ContentReference.StartPage, catalog, false)));
        }
    }

    public void Uninitialize(InitializationEngine context)
    {
    }
}

And that's it.

Your category, product, and variant pages (and bundles/packages) should resolve without including the catalog slug in the URL. And UrlResolver should now give you the catalog-less URL on the frontend and in the CMS backoffice.

Feb 06, 2022

Comments

Please login to comment.
Latest blogs
Make Global Assets Site- and Language-Aware at Indexing Time

I had a support case the other day with a question around search on global assets on a multisite. This is the result of that investigation. This co...

dada | Jun 26, 2025

The remote server returned an error: (400) Bad Request – when configuring Azure Storage for an older Optimizely CMS site

How to fix a strange issue that occurred when I moved editor-uploaded files for some old Optimizely CMS 11 solutions to Azure Storage.

Tomas Hensrud Gulla | Jun 26, 2025 |

Enable Opal AI for your Optimizely products

Learn how to enable Opal AI, and meet your infinite workforce.

Tomas Hensrud Gulla | Jun 25, 2025 |

Deploying to Optimizely Frontend Hosting: A Practical Guide

Optimizely Frontend Hosting is a cloud-based solution for deploying headless frontend applications - currently supporting only Next.js projects. It...

Szymon Uryga | Jun 25, 2025

World on Opti ID

We're excited to announce that world.optimizely.com is now integrated with Opti ID! What does this mean for you? New Users:  You can now log in wit...

Patrick Lam | Jun 22, 2025

Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |