Tuan Truong
Feb 17, 2014
(2 votes)

Upgrade to EPiServer Commerce 7.5 : Part 1– Allow users to drag and drop catalog node and catalog variant on to content areas.

In our company, we are always given the chances to work with latest and up to date technologies, and EPiServer 7.5 Commerce was one of the cool stuff that my team had the opportunity to explore so far. Kudos to EPiServer team to help me create this blog, on this space.  I will try to share all our experiences on upgrading one of our client EPiServer Commerce site from EPiServer 6 R2 on to EPiServer 7.5 , getting used of latest technology on EPiServer 7.5, Asp.net MVC4, html5/css3 .

Would love to hear any feedback and comments that you guys may have, all for the better community and better product for us all Smile.

On this first blog post, I will describe how we managed to allow user to drag and drop any catalog node and catalog content on to the content areas of the page from the catalog manager component. This is just like how you can drop pages on to different content areas. 
Firstly, we will need a base controller for all our partial content :

namespace Niteco.Web.Cms.Controllers 
    [TemplateDescriptor(TemplateTypeCategory = TemplateTypeCategories.MvcPartialController, Inherited = true,AvailableWithoutTag = false)] 
    public class BasePartialContentController<T> : PartialContentController<T> where T : IContentData 

In EPiServer 7.5, there is a base partial content controller to help deliver all partial contents to the pages.
Then for each catalog node content that you want to allow to be dropped on to content area, just need to have it inherit from above base controller:

 public class WineCatalogPartialController : BasePartialContentController<WineCatalogNodeContent>
        public override ActionResult Index(WineCatalogNodeContent currentContent)
            var model =  CatalogNodeViewModelHelpers.BuidWineItemListingModel(currentContent);
            return PartialView("WineItemListingView", model);

In our model builder function, we basically get all the catalog entries within this catalog node, .i.e:

var entries = wineItemSearchHelper.SearchEntries(catNodeContent.Code, 0, Int32.MaxValue,out totalCount);

The same apply for product variant content when you want to drag drop it to the content area of the page, you will need to inherit from the base partial content controller:

public class WineItemPartialController : BasePartialContentController<WineItemContent>
        public override ActionResult Index(WineItemContent currentContent)
            var model = new WineItemPartialViewModel(currentContent)
                WineItemDetails = WineItemViewModelHelpers.CreateWineItemContentViewModel(currentContent)
            return PartialView("VariantPartials/WineItemFullPartialView", model);

There was one big issue when we were implementing this was that it causing the site to “stack overflow”, and after many hours of digging, we have found the cause. It was because of the following bit of code in our partial view:

<div class="product_selling_info">
    @Html.Action("Index", "AddToCart", new { reference = Model.CatalogContent.ContentLink})

Somehow, it is causing the page to keep recall the action within the page, we had to change the page to the following , :

<div class="product_selling_info">
     @Html.Action("Index", "AddToCart", new { reference = Model.CatalogContent.ContentLink, controllerType = typeof(AddToCartController).AssemblyQualifiedName })

This is for the page to understand that the action is belong to another controller, not the current page controller.

That is all. Hopefully this will help you guys in implementing the drag drop catalog contents on the the content area. In the next coming posts, I will continue to provide more knowledge sharing our process to upgrade an ecommerce site to EPiServer 7.5. If you need the detailed source code or any help, please leave a comment below.


Feb 17, 2014


Ha Nguyen
Ha Nguyen Feb 17, 2014 11:20 AM


Tiến Bùi
Tiến Bùi Feb 17, 2014 11:21 AM

Excellent! Will definitely try it out.

Please login to comment.
Latest blogs
Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog

Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog