Blog posts by Tuan Truong

EPiImage & EPiImage Gallery dojo-based custom property for EPiServer 7.5 and above

Tue, 10 Jun 2014 16:41:01 GMT

Upon the heavily uses of the popular MakingWaves EPiImage gallery property , I have decided to put some of the effort to upgrade the property from old school jquery based on EPiServer 6 on to EPiServer 7. This was at the same time as a good exercise to help started with Dojo development. Furthermore, since the VPP is no longer used, and replaced with media content on EPiServer 7.5, with the help from others I have also managed to upgrade the property, so that it is compatible with the latest assets management system. Drag and drop images from assets management is also added on to this new release.

Following the philisopy of contributing back to the community, I hope this could provide back some benefits for other EPiServer developer

Properties values are also stored in the same format as the original values so that they could be easily migrated. Here are the list of items within the project:

Here is the structure view of the project:

From top to bottom:

1. Templates Folder store all the html templates for the controls used for EPiImage and EPiImage Gallery Property controls. EPiImageInfoForm is to allow user to edit image title, description, and image link. Here is how the form will look like:

On most of the project that requires Image Gallery property, it is found that you usually need these information for the images, .i.e. to be used for slideshow.

2. EPiImage.js , EPiIMageGallery.js

These files store the client logic implementation of the editing control for EPiImage & EPiImage Gallery properties. Digging in to the code, you could see that they are based on a lot of diiferent dojo and EPi-dojo controls

3. EPiImageInfoForm

This is to handle the client side logic for the above editing image infor form

4. ModuleInitializer & RequireModule

These files are responsible to initialize the connection to the Rest Store Controller on the server side, so that the client control could send request back to the server side.

5. EPiImageGalleryProperty, EPiIMageProperty, EPiImageEditorDescriptot, EPiIMageGalleryEditorDescriptor.

These files are responsible for custom property declaration, serialize data, and declare the editor template for the properties.

6. ImageFile on Media Folder

Since EPiServer 7.5, all asset must be based on an image content data class, therefore we will need one for our images as well. Please feel free to remove this file from your copy if you already had one on your project.

7. EPiImageStore

This class is responsible for getting the image info from Content Data Store. This is inherited from RestControllerBase , that available from EPiServer 7.

8. Module.config

You will need to copy the bits that needed from within this module.config file on to your project, to get the properties working:

<assemblies>
    <add assembly="EPiImage" />
  </assemblies>
  <clientResources>
    <add name="epiimage.editors.style" path="Styles/imagegallery.css" resourceType="Style" />
  </clientResources>
  <dojo>
    <!-- Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration -->
    <paths>
      <add name="app" path="Scripts" />
      <add name="epiimage" path="Scripts/EPiImage/" />
    </paths>
  </dojo>
  <clientModule initializer="app.ModuleInitializer">
    <requiredResources>
      <add name="epiimage.editors.style"/>
    </requiredResources>
  </clientModule>

For the above config:

8.1. Fist block,add assembly to generate the url for EpiImageStore, which is declared as a Rest Store, to get the file info from the server back to the client.

8.2. Second block, the client resources are for module initializer, and css that will be used for our properties.

8.3. . Third block, the dojo module is to define the namespace for Scripts folder that will be used for EPI Image/Gallery client editor.

Here is how the image gallery property will look like on the back-end :

When editing the image collection, user will has the ability drag and drop images from media assets to the add image box as well.

Here is how the properties can be called on the fron-end:

@if (Model.ImageCollection != null)
    {
        foreach (EPiImageGalleryImage image in Model.ImageCollection)
        {
            <a class="image_view" href="@Url.ContentUrl(image.ImageUrl)" rel="lightbox"><img src="@Url.ContentUrl(image.ImageUrl)" /></a>
        }
    }

This could also be used on Webform project without any problems.

A screencast on how the property works could be found here: http://www.screencast.com/t/IPVCO5OmPtPU

The full source code of this project is available at here. If you need the sample project or any help send a request here.

Upgrade to EPiServer Commerce 7.5 : Part 2– MVC Areas Support For EPiServer 7 & above

Thu, 20 Feb 2014 05:30:38 GMT

In our company, we have a cms project framework that built on top of EPiServer CMS using asp.net MVC 4. This acts as a starting project for many of our EPiServer CMS projects consisting a lot included features, with many template blocks. However, when building Commerce or Relate project on top of our CMS project, we always wanted to separate the code base so that these pages, blocks and all the components are not in the same place as the CMS components. Therefore, implementing MVC Areas was kind of the best solution for this. This however is not yet supported on EPiServer 7 & Above.
Nevertheless, as a saying “There is always a way”, one of our senior team member came up with the solution using a custom view engine. We saw on the forum mentioning that it may be an over-killed idea, but when actually implement it, it rather quite straightforward. It gives you a lot more flexibility in handling your project structure.

Here is the structure that we wanted:

Here is the magic bit of code that we used on our custom View engine to achieve the above:

public class NitecoViewEngine : RazorViewEngine

        public NitecoViewEngine()

            ViewLocationFormats = new[]

                                          "~/Areas/%1/Views/{1}/{0}.cshtml",

                                          "~/Areas/%1/Views/{1}/{0}.vbhtml",

                                           "~/Areas/%1/Views/" + Constants.ViewPath.PaymentMethodsFolder +  "/{1}/{0}.cshtml",

                                          "~/Areas/%1/Views/" + Constants.ViewPath.PaymentMethodsFolder +  "/{1}/{0}.vbhtml",

                                          "~/Areas/%1/Views/Shared/{0}.cshtml",

                                          "~/Areas/%1/Views/Shared/{0}.vbhtml",

                                          "~/Areas/%1/Views/{1}/{0}.cshtml",

                                          "~/Areas/%1/Views/{1}/{0}.vbhtml",

                                          "~/Areas/%1/Views/Shared/{0}.cshtml",

                                          "~/Areas/%1/Views/Shared/{0}.vbhtml"

};

            MasterLocationFormats = new[]

                                            "~/Areas/%1/Views/{1}/{0}.cshtml",

                                            "~/Areas/%1/Views/{1}/{0}.vbhtml",

                                            "~/Areas/%1/Views/Shared/{0}.cshtml",

                                            "~/Areas/%1/Views/Shared/{0}.vbhtml",

                                            "~/Areas/%1/Views/{1}/{0}.cshtml",

                                            "~/Areas/%1/Views/{1}/{0}.vbhtml",

                                            "~/Areas/%1/Views/Shared/{0}.cshtml",

                                            "~/Areas/%1/Views/Shared/{0}.vbhtml"

};

            PartialViewLocationFormats = new[]

                                                 "~/Views/Shared/" + Constants.ViewPath.BlockFolder + "/{0}.cshtml",

                                                 "~/Views/Shared/" + Constants.ViewPath.BlockFolder + "/{0}.vbhtml",

                                                 "~/Views/Shared/" + Constants.ViewPath.PaymentMethodsFolder + "/{0}.cshtml",

                                                 "~/Views/Shared/" + Constants.ViewPath.PaymentMethodsFolder + "/{0}.vbhtml",

                                                 "~/Views/Shared/" + Constants.ViewPath.PagePartialsFolder + "/{0}.cshtml",

                                                 "~/Views/Shared/" + Constants.ViewPath.PagePartialsFolder + "/{0}.vbhtml",

                                                 "~/Views/Shared//{0}.cshtml",

                                                 "~/Areas/%1/Views/{1}/{0}.cshtml",

                                                 "~/Areas/%1/Views/{1}/{0}.vbhtml",

                                                 "~/Areas/%1/Views/Shared/{0}.cshtml",

                                                 "~/Areas/%1/Views/Shared/{0}.vbhtml",

                                                 "~/Areas/%1/Views/{1}/{0}.cshtml",

                                                 "~/Areas/%1/Views/{1}/{0}.vbhtml",

                                                 "~/Areas/%1/Views/Shared/{0}.cshtml",

                                                 "~/Areas/%1/Views/Shared/{0}.vbhtml",

                                                 "~/Areas/%1/Views/Shared/" + Constants.ViewPath.BlockFolder + "/{0}.cshtml",

                                                 "~/Areas/%1/Views/Shared/" + Constants.ViewPath.BlockFolder + "/{0}.vbhtml",

                                                 "~/Areas/%1/Views/Shared/" + Constants.ViewPath.PaymentMethodsFolder + "/{0}.cshtml",

                                                 "~/Areas/%1/Views/Shared/" + Constants.ViewPath.PaymentMethodsFolder + "/{0}.vbhtml",

                                                 "~/Areas/%1/Views/Shared/" + Constants.ViewPath.PagePartialsFolder + "/{0}.cshtml",

                                                 "~/Areas/%1/Views/Shared/" + Constants.ViewPath.PagePartialsFolder + "/{0}.vbhtml",

                                                        "~/Views/Shared/DisplayTemplates/{0}.cshtml",

                                                "~/Views/Shared/DisplayTemplates/{0}.vbhtml",

                                                "~/Views/Shared/DisplayTemplates/{1}/{0}.cshtml",

                                                 "~/Views/Shared/DisplayTemplates/{1}/{0}.vbhtml"

};

        protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)

            var areaName = this.GetAreaFromNameSpace(controllerContext);

            return base.CreatePartialView(controllerContext, partialPath.Replace("%1", areaName));

        protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)

            var areaName = this.GetAreaFromNameSpace(controllerContext);

            return base.CreateView(controllerContext, viewPath.Replace("%1", areaName), masterPath.Replace("%1", areaName));

        protected override bool FileExists(ControllerContext controllerContext, string virtualPath)

            var areaName = this.GetAreaFromNameSpace(controllerContext);

            if (!string.IsNullOrEmpty(areaName))

                return base.FileExists(controllerContext, virtualPath.Replace("%1", areaName));

            return base.FileExists(controllerContext, virtualPath);

        private string GetAreaFromNameSpace(ControllerContext controllerContext)

            if (controllerContext.Controller != null)

                var nameSpace = controllerContext.Controller.GetType().Namespace ?? string.Empty;

                var namespaceSegments = nameSpace.Split('.');

                if (namespaceSegments.Length >= 2)

                    for (var i =0; i < namespaceSegments.Length; i++)

                        if ((namespaceSegments[i] == "Controllers") && i > 0)

                            return namespaceSegments[i-1];

            return null;

You then need to register this view engine on initialize module , as below:

[ModuleDependency(typeof (InitializationModule))]
    public class CustomizedRenderingInitialization : IInitializableModule
    {
        public void Initialize(InitializationEngine context)
        {            
            ViewEngines.Engines.Insert(0, new NitecoViewEngine());          
        }
    }
}

Now you could add any part of the project that you want to separate from the other areas, like how we did we our EPiServer Commerce Project as above.Just need to make sure that you keep the correct consistent naming for all the namespaces within the areas. This works for both EPiServer 7 & EPiServer 7.5 as we have examined.

Happy coding , stay tune for the next part.

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

Mon, 17 Feb 2014 05:09:41 GMT

Technorati Tags: EPiServer 7.5,Commerce,Asp.net MVC

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 .

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})
</div>

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 })
</div>

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.

Thanks.