Custom pages

4 min

Important

Classic CMS reached end-of-life in January 2025 and is no longer receiving feature updates or bug fixes. You should [migrate to Spire CMS](../../End user docs/spire-cms/get-started-with-spire-cms/migrate-from-classic-cms-to-spire-cms.mdx).

A page refers to a webpage hosted within the Content Management System. You can create pages from templates that come with Configured Commerce, user defined templates, or can be custom-built.

Custom Pages

When implementing a custom page, derive a class from the ContentPage if the new page should be navigated to. If the new custom page should show in the navigation menu but not be navigated to directly, derive from AbstractPage.

The MVC views are located in the Theme/Views/Pages folder of the Configured Commerce.Web solution. The page models (.NET classes) are included in the Optimizely Module for each respective page.

For example, the CartPage class serves as the model for the Standard cart view.

public class CartPage : ContentPage, ICreatableContent
{
}

Custom built pages require deriving from the ContentPage class and implementing the ICreatableContent interface. When custom pages are built using this best practice the platform will look for a corresponding content creator class that derives from AbstractContentCreator using generics of the page class name.

For example, the CartPageCreator is built as follows.

public class CartPageCreator : AbstractContentCreator<CartPage>
{
    /// <summary>Creates an initial <see cref="CartPage"/></summary>
    protected override CartPage Create()
    {
        var now = DateTimeProvider.Current.Now;

        var cartPage = this.InitializePageWithParentType<CartPage>(typeof(HomePage));
        cartPage.Name = cartPage.Title = "Cart";
        cartPage.Url = "/Cart";
        cartPage.ExcludeFromNavigation = true;
        this.SaveItem(cartPage, now);

        this.SaveItem(this.InitializeWidget<PageTitle>("Content", cartPage), now);

        var cartView = this.InitializeWidget<CartView>("Content", cartPage);
        this.SaveItem(cartView, now);

        var crossSells = this.InitializeWidget<WebCrossSells>("Content", cartPage);
        this.SaveItem(crossSells, now);

        return cartPage;
    }
}

The page creator will call an override Create method with the return type of the page class. By following this pattern it is possible to build additional pages from code that fit into the commerce workflow.

When creating custom pages the choice should be made to use ContentPage or AuthenticatedContentPage.

ContentPage is the base class for all commerce pages not created from within the content management system. The following properties can be set using the ContentPage class:

Title

MetaDescription

MetaKeywords

Summary

HideHeader

HideFooter

DisallowInRobotsTxt

ExcludeFromNavigation

ExcludeFromSignInRequired

Javascript

These properties are the same fields that can be edited when creating pages using the Add Page feature in the CMS.

The AuthenticatedContentPage class is used for pages that require authentication to access profile data. This includes, but is not limited to:

Order approval

Checkout

Review and pay

Account settings

My account

Wish lists

When creating custom pages the content creator will default to a view called Standard. This means that for all custom pages the folder with the same name as the content page needs to exist in the theme Views/Pages folder.

Custom Page Hierarchy

Building the custom page within the hierarchy is done by using the InitializePageWithParentType method located in the AbstractContentCreator base class.

For example, the following initializes the shopping cart as a child of the Home menu item.

var cartPage = this.InitializePageWithParentType<CartPage>(typeof(HomePage));