Create 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 Configured Commerce solution

2. Add a new class called CustomPage that derives from ContentPage and implements the ICreatableContent interface.

   C#

   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.

   C#

   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 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 Configured Commerce CMS in the browser.

Page model and 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.