Area: Episerver Commerce
Applies to versions: Latest

Creating a start page

Recommended reading 

In this step, we

  1. Create a start page page type in CMS, with rendering based on MVC and the Episerver content model.
  2. Configure the site's start page.
  3. Add components to display catalog content.

We assume that you are using the Episerver Visual Studio extension.

Note: You must be a site administrator to create a start page under the website root.

Creating the start page page type

Follow the steps under Creating a page type, Adding page rendering and Configuring the start page in Create a starter project for CMS to create a start page page type with a controller and a view on the front-end site of your Commerce solution. After completing this, you have a website with a working start page.

Creating content types for category, product and variant

These steps create simple content types for a category node, a product, and a variant (SKU). This allows you to add catalog entries from the catalog user interface, the foundation of the catalog structure.

    1. Right-click the Models folder, select Add > New Folder, and name it Catalog.
    2. Right-click Catalog, select Add > New Item, then EPiServer and Page Type
    3. Name the item MyNode.cs and click Add. This will be a category content type.
    4. Change ContentType to CatalogContentType, remove DisplayName and Description, add MetaClassName = "My_Node", and resolve the using references. This new class should inherit NodeContent.
    5. Repeat steps 2-4 to add content types for MyProduct and MyVariation. The two new classes should inherit ProductContent and VariationContent.
    6. Compile the solution.
    7. Log into the catalog user interface.
    8. Verify that you can create categories, products and variants based on the created content types.

Note: Since there is no rendering yet, the entries open in the All properties editing view. The content types are very simple with no properties, just to illustrate the content model in Commerce.

Adding controllers and views for catalog entries

These steps add controllers and views for rendering the catalog content types. This works the same way as creating the rendering for CMS content.

  1. Open the project in Visual Studio, and right-click the Controllers folder.
  2. Select Add > New Item  > Episerver > Page Controller (MVC).
  3. Name the item MyNodeController.cs and click Add. This will be a category content type controller.
  4. Change PageController to ContentController and resolve the using references.
    Note: For the built-in functionality provided by a model binder in CMS to retrieve the related content, the parameter name must be currentContent.
  5. Repeat steps 1-4 to add controllers for MyProduct and MyVariation. (Replace MyNode in step 3 by MyProduct and MyVariation respectively.)
  6. Right-click the Views folder, select Add > New Folder, and name it MyNode.
  7. Right-click the MyNode folder, select Add > New item, and Page Partial View (MVC Razor) under the Episerver group.
  8. Name the item Index.cshtml and click Add.
  9. In the Index.cshtml file, change the model to be YourSite.Models.Catalog.MyNode.
    Note: The view is empty at this point, since the MyNode content type has no properties.
  10. Repeat steps 6-9 to add views for MyProduct and MyVariation. (Replace MyNode in step 6 and 9 by MyProduct and MyVariation respectively.)
  11. Compile the solution.
  12. Verify that you have proper rendering (although empty) for your content types.

Next step

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

Last updated: Oct 11, 2013

Recommended reading