Make Every Page In EPiServer As Draggable As Single Tile

In one of our EPiServer Project we wanted to make every page as draggable and wanted to make them appear as single tile. Therefore, I came up with approach, In this approach we will make every base page available to implement ISingleTileView interface and we would register one template coordinator for given Interface.

ISingleTileView

 public interface ISingleTileView
    {
        string Title { get; }
        string TileDescription { get; }
        string ImageUrl { get; }
        string LinkToUrl { get; }
    }

We had 5 different base classes for CMS and ECommerce. All of them are listed below.

1. SitePageData
2. SiteBlockData
3. BaseVariantContent
4. BaseProductContent
5. BaseCategory

The Class definitions of above all classes are defined as

SitePageData

 
 public abstract class SitePageData : PageData, ISingleTileView
    {
        public string Title { get; }
        public string TileDescription { get; }
        public string ImageUrl { get; }
        public string LinkToUrl { get; }
    }

SiteBlockData

 
 public abstract  SiteBlockData : BlockData, ISingleTileView
    {
        public string Title { get; }
        public string TileDescription { get; }
        public string ImageUrl { get; }
        public string LinkToUrl { get; }
    }

BaseVariantContent

 
public class BaseVariantcContent : VariationContent, ISingleTileView
    {
        public string Title { get; }
        public string TileDescription { get; }
        public string ImageUrl { get; }
        public string LinkToUrl { get; }
    } 

BaseProductContent

 
public class BaseProductContent : ProductContent, ISingleTileView
    {
        public string Title { get; }
        public string TileDescription { get; }
        public string ImageUrl { get; }
        public string LinkToUrl { get; }
    }

BaseCategory

 
   public class BaseCategory : NodeContent, ISingleTileView
    {
        public string Title { get; }
        public string TileDescription { get; }
        public string ImageUrl { get; }
        public string LinkToUrl { get; }
    }

You can populate above properties with what ever other properties.

We have used below CMS properties to return value of ISingleTileView properties

Assigning Value To ISingleTileView Properties

 
        #region ISingle Tile View

        [Ignore]
        [ScaffoldColumn(false)]
        public string Title
        {
            get { return Heading; }
        }

        [Ignore]
        [ScaffoldColumn(false)]
        public string TileDescription
        {
            get { return Abstract.ToHtmlString(); }
        }

        [Ignore]
        [ScaffoldColumn(false)]
        public string ImageUrl
        {
            get { return this.GetDefaultAsset(AssetMediaNames.THUMBNAIL).GetFriendlyUrl(); }
        }

        [Ignore]
        [ScaffoldColumn(false)]
        public string LinkToUrl
        {
            get { return ContentLink.GetFriendlyUrl(); }
        }

        #endregion

TemplateCoordinator

 
  [ServiceConfiguration(typeof(IViewTemplateModelRegistrator))]
    public class TemplateCoordinator : IViewTemplateModelRegistrator
    {
        public const string BlockFolder = "~/Views/Shared/Blocks/";
        public const string PagePartialsFolder = "~/Views/Shared/PagePartials/";

        public void Register(TemplateModelCollection viewTemplateModelRegistrator)
        {
            // All Pages will be Single Tile View will rendered below Partial view
            viewTemplateModelRegistrator.Add(typeof(ISingleTileView), new TemplateModel()
            {
                Name = "Single Tile View For Any Page",
                Inherit = true,
                Tags = new[] { Constants.TemplateDescriptorTags.SingleTile },
                Path = BlockPath("Single.Tile.cshtml"),
                TemplateTypeCategory = TemplateTypeCategories.MvcPartialView,
                AvailableWithoutTag = true,
                Default = false
            });

        public static string BlockPath(string fileName)
        {
            return string.Format("{0}{1}", BlockFolder, fileName);
        }

        public static string PagePartialPath(string fileName)
        {
            return string.Format("{0}{1}", PagePartialsFolder, fileName);
        }
    }

SingleTile Partial View

In the following path we have our sinlgetileview partial view ~/Shared/Blocks/Single.Tile.cshtml

 
@using EPiServer.Reference.Commerce.Site.Core.Settings
@using EPiServer.Reference.Commerce.Site.Infrastructure.Extensions
@model EPiServer.Reference.Commerce.Site.Core.ContentTypes.TemplateCoordinatorInterface.ISingleTileView
<li>
    <div class="product-item">
<div class="product-item-image" style="background-image: url(@Html.ResizeImageUrl(Model.ImageUrl, preset: AssetMediaNames.ImageResizerPresets.PRODUCT_RANGE_TILE));">
<img alt="@Model.Title" src="@Html.ResizeImageUrl(Model.ImageUrl, preset: AssetMediaNames.ImageResizerPresets.PRODUCT_RANGE_TILE)" />
        </div>
<h2>
@Model.Title</h2>
<div>
@Html.Raw(Model.TileDescription)
        </div>
<a class="btn btn-default" href="@Model.LinkToUrl">More info</a>
    </div>
</li>