World is now on Opti ID! Learn more

KhurramKhang
May 4, 2015
  1452
(0 votes)

Add value with widgets

Extending EPiServer for editors was never so easy untill we have widgets. Given below example will show you how and will encourage you to use widgets to add value for Editors. In Commerce sites usually Products data comes from outside of the EPiServer (e.g. XML via FTP/PIM). Integration services imports the products and variants, Editors work with those products and publish when ready. Editors want to reach with a smallest rout to products not published yet, products with missing images, products without variants, products with zero prices etc. In this example Widget It will show a list of products, those have not been published yet and editors requires some editing. Marketers can come with there own enviornment (Online center Catalog UI give a lot but not enough).

As a developer you may need to learn how to use Dojo if you are not already familiar, it looks scary in start but very powerful.

1. Create a component

[Component(Title = "Products not published yet",
        PlugInAreas = PlugInArea.Assets, 
        Categories = "cms,commerce",
        WidgetType = "xyz.components.ProductsNotPublishedYet", Description = "Display the list of produts not published yet.")]
    public class ProductsNotPublishedYet
    {        
    }

2. Add configuration in module.config

<?xml version="1.0" encoding="utf-8"?>
<module> 
<dojoModules>
<add name="xyz" path="Scripts" />
</dojoModules>
</module>

3. Add Dojo

ClientResources/Scripts/components/ProductsNotPublishedYet.js

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin"
], function (
    declare,
    _WidgetBase,
    _TemplatedMixin
) {
    return declare("xyz.components.ProductsNotPublishedYet",
        [_WidgetBase, _TemplatedMixin], {
            templateString: dojo.cache("/ProductsComponents/NotPublished/")
        });
});


4. Add business logic - Controller Class

[Authorize(Roles = "WebEditor, WebAdmins, Administrators")]
    public class ProductsComponentsController : Controller
    {
        /// <summary>
        /// Gets the list of Unpublished Products
        /// </summary>
        private IEnumerable<ProductContent> Products
        {
            get
            {
                return SearchClient.Instance.Search<ProductContent>().Filter(x => !x.Status.Match(VersionStatus.Published)).GetContentResult().ToList();
            }
        }
        /// <summary>
        /// Product not published yet
        /// </summary>
        /// <returns>Action Result</returns>
        public ActionResult NotPublished()
        {            
            return this.PartialView("/Views/Components/NotPublished.cshtml", this.Products);
        }
    }

Views/Components/NotPublished.cshtml

@model IEnumerable<EPiServer.Commerce.Catalog.ContentTypes.ProductContent>
<div>
    @if(Model.Count() > 0)
    {
        <table>
        @Html.DisplayForModel()
        </table>
    }else
    {
        @Html.DisplayText("There is no unpublished product.")
    }
</div> 

Views/Shared/Display Templates/ProductContent.cshtml

@model EPiServer.Commerce.Catalog.ContentTypes.ProductContent
<tr><td> @Html.DisplayFor(x=> x.Code)</td><td><a href="@EPiServer.Editor.PageEditing.GetEditUrl(Model.ContentLink)">@Html.DisplayFor(x=> x.Name)</a></td></tr>

A Valuable gadget is ready to help Editors in just couple of hours where Editor can view products that have not been published yet and on clicking the link, will take them to Edit page.

Image productsnotpublishedyet.JPG

If you are still not sure how to create a widget, read here. BrilliantCut is a step forawrd to help editors.

May 04, 2015

Comments

Please login to comment.
Latest blogs
Make Global Assets Site- and Language-Aware at Indexing Time

I had a support case the other day with a question around search on global assets on a multisite. This is the result of that investigation. This co...

dada | Jun 26, 2025

The remote server returned an error: (400) Bad Request – when configuring Azure Storage for an older Optimizely CMS site

How to fix a strange issue that occurred when I moved editor-uploaded files for some old Optimizely CMS 11 solutions to Azure Storage.

Tomas Hensrud Gulla | Jun 26, 2025 |

Enable Opal AI for your Optimizely products

Learn how to enable Opal AI, and meet your infinite workforce.

Tomas Hensrud Gulla | Jun 25, 2025 |

Deploying to Optimizely Frontend Hosting: A Practical Guide

Optimizely Frontend Hosting is a cloud-based solution for deploying headless frontend applications - currently supporting only Next.js projects. It...

Szymon Uryga | Jun 25, 2025

World on Opti ID

We're excited to announce that world.optimizely.com is now integrated with Opti ID! What does this mean for you? New Users:  You can now log in wit...

Patrick Lam | Jun 22, 2025

Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |