Loading...
Area: Optimizely B2B Commerce

Building a custom page in Classic

Recommended reading 

This article provides the specific steps for building a custom page. For more background information on building pages and the components to CMS, refer to the article on Extend Pages.

  1. Add a class library to the B2B Commerce solution
  2. Add a new class called CustomPage that derives from ContentPage and implements the ICreatableContent interface
    public class CustomPage : ContentPage, ICreatableContent
    {
    
    }	
  3. Add a new class called CustomPageContentCreator that implements the AbstractContentCreator with a generic type of CustomPage. The interface will require the Create() method.
  4. Initialize the CustomPage to one of the menu items in the CMS, such as the Home page. Provide the name, title, url and save the item to the content creator.
    public class CustomPageContentCreator : AbstractContentCreator<CustomPage>
    {	
    	protected override CustomPage Create()
    	{	
    		var now = DateTimeProvider.Current.Now;
    
    		var customPage = this.InitializePageWithParentType<CustomPage>(typeof(HomePage));
    		customPage.Name = "Custom Page";
    		customPage.Title = "Custom Page";				
    		customPage.Url = "/CustomPage";
    		customPage.ExcludeFromNavigation = true;
    		this.SaveItem(customPage, now);
    
    		return customPage;
    	}
    }
  5. Create a new folder called CustomPage. The naming convention here will map directly the the ContentPage class name.
  6. Add a new MVC view to the Theme/ThemeName/Views/Pages/CustomPage folder called Standard.
  7. Use the CustomPage as the model and save changes.
  8. Add the custom library as a reference to the B2B Commerce.Web project
  9. Rebuild the solution and view the B2B Commerce CMS in the browser

Page Model & Content Objects

The CurrentPage property will retrieve the current page. The Content property is a helper object that allows retrieval of the page, children, widgets etc.

These are properties that are defined on the WebViewPage. The WebViewPage is the model for the view, so in a view it can use @CurrentPage and @Content.GetChildPages(CurrentPage.ContentKey).

Templates

Templates are, structurally, predefined pages with zones embedded into the HTML markup. Use templates to create consistent layout for pages and content. At the core, templates are built leveraging MVC views placed in the Views > Content > TemplatePage. These views are then picked up at runtime to populate the menu items in the Add Template action panel.

Templates can support any widget. It is common to use the Template - Zone widget so that when pages are created from the template, those newly created pages can support additional widgets.

Do you find this information helpful? Please log in to provide feedback.

Last updated: Dec 11, 2020

Recommended reading