Try our conversational search powered by Generative AI!

Petter Sørby
Sep 27, 2017
  14113
(13 votes)

Add Commerce to an Alloy Web Site

I frequently get the question about how to add Commerce to an existing CMS site.

I dreaded that question 5 years ago, but now adding Epi Commerce to an existing web site has really become easy in Visual Studio. It is simply a matter of adding the EPiserver.Commerce nuget package and you are ready. If your site has been based on the Alloy template in Visual Studio there is just a few steps you need to take to have it working seamlessly.

In this post I will guide you through the different steps that needs to be changed.

Create a new site based on the Alloy (MVC) template 

Start by creating a web site by using the Visual Studio template.

Note! It is important to navigate to the site and add an admin account before adding the EPiServer.Commerce nuget package. 

Remove dependency on SitePageData for the layout

Much could be said about the SiteContextActionFilter and the use of an IResultFilter for the layout of the site. I will not change that implementation in this blog, but rather adjust it to be less reliant on SitePageData.

var model = viewModel as IPageViewModel<SitePageData>; //this code is problematic when we add Commerce. SitePageData inherits from PageData and will not in any way work for Commerce content.


Use ISiteContent for SitePageData

As A first approach, I will change the layout to use ISiteContent and not SitePageData. This inteface will be added to the Business.Rendering namespace

This change will affect the following files:

  • IPageViewModel.cs
  • PageViewModel.cs
  • PageContextActionFilter.cs
  • SitePageData.cs (Add the new interface to this class)
  • Layout views
    • _LeftNavigation.cshtml
    • _TwoPlusOne.cshtml
    • _Root.cshtml
  • Partial views
    • Footer.cshtml
    • Header.cshtml
    • ReadOnly.cshtml
    • SubNavigation.cshtml

After changing the code to use the new interface several properties needs to be moved to ISiteContent.

using EPiServer.Core;
using System.Globalization;

namespace AlloyCommerce.Business.Rendering
{
   public interface ISiteContent
   {
         ContentReference ContentLink { get; set; }
         CultureInfo Language { get; set; }
         string LanguageBranch { get; }
         string MetaTitle { get; set; }
         string MetaDescription { get; set; }
   }
}

Add Epi Commerce

Add Episerver Commerce to the site simply by adding the nuget package EPiServer.Commerce 

Add definition classes for the catalog

[CatalogContentType(DisplayName ="Category/Node",
GroupName ="Commerce",
MetaClassName ="Alloy_Node",
GUID = "094A1AFE-727A-44A0-A074-36BA07F2D092")]
public class AlloyNode : NodeContent, ISiteContent
{
    public virtual string LanguageBranch
    {
        get { return this.Language.Name; }
    }

    public virtual string MetaTitle { get; set; }
    public virtual string MetaDescription { get; set; }
}

Add a controller for the category content items

public class AlloyCategoryController : ContentControllerBase<AlloyNode>
{
    public ActionResult Index(AlloyNode currentContent)
    {
        var model = PageViewModel.Create<AlloyNode>(currentContent);

        return View(model);
    }

}



Base Controller:

public abstract class ContentControllerBase<T> : ContentController<T>, IModifyLayout
where T : CatalogContentBase
{



The view model for catalog content can now be created like the page view models are. This is not going to be sufficient for all content, but in these cases the view model can be created as a separate view model file with additional properties.

Image Alloy Commerce.PNG

Catalog UI presenting a Category node with on-page-edit. This node will contain, in the near future, planning products (iPad, Phones etc) sold by Alloy.

Much more needs to be done

This example does not give a fully featured commerce site. There are no productes, shipping, checkout, cart, etc. For all of that, please take a look at the Episerver reference site(s) in the public github account (http://github.com/episerver).

Where to find the code

The repository is located at https://github.com/pettersorby/AlloyCommerce

Thank you!

The commerce team should be praised for all their efforts in making this journey this easy! Thank you, Magnus and the rest of the team.

Sep 27, 2017

Comments

Please login to comment.
Latest blogs
From Procrastination to Proficiency: Navigating Your Journey to Web Experimentation Certification

Hey there, Optimizely enthusiasts!   Join me in celebrating a milestone – I'm officially a certified web experimentation expert! It's an exhilarati...

Silvio Pacitto | May 17, 2024

GPT-4o Now Available for Optimizely via the AI-Assistant plugin!

I am excited to announce that GPT-4o is now available for Optimizely users through the Epicweb AI-Assistant integration. This means you can leverag...

Luc Gosso (MVP) | May 17, 2024 | Syndicated blog

The downside of being too fast

Today when I was tracking down some changes, I came across this commit comment Who wrote this? Me, almost 5 years ago. I did have a chuckle in my...

Quan Mai | May 17, 2024 | Syndicated blog

Optimizely Forms: Safeguarding Your Data

With the rise of cyber threats and privacy concerns, safeguarding sensitive information has become a top priority for businesses across all...

K Khan | May 16, 2024

The Experimentation Process

This blog is part of the series -   Unlocking the Power of Experimentation: A Marketer's Insight. Welcome back, to another insightful journey into...

Holly Quilter | May 16, 2024

Azure AI Language – Sentiment Analysis in Optimizely CMS

In the following article, I showcase how sentiment analysis, which is part of the Azure AI Language service, can be used to detect the sentiment of...

Anil Patel | May 15, 2024 | Syndicated blog