Widget plugin

Widget is a type of plugin that allows you to render some HTML code by the specific place where you want to include the widget, this place is called a widget zone.

Firstly you must create a class that implements the IWidgetProvider interface :

  public partial interface IWidgetProvider : IProvider
    {
        Task> GetWidgetZones();
        Task GetPublicViewComponentName(string widgetZone);
    }
	

It includes two methods:

GetWidgetZone: should return a list of widget zones (the place where you want to put your widget)

GetPublicViewComponentName : should return name of view component. It receives a widget zone, so you can return different component names depends on the widget zone

Example implementation :

public class MyPluginWidgetProvider : IWidgetProvider
    {
        public string ConfigurationUrl => "/Admin/MyPlugin/Configure";

        public string SystemName => "Widget.MyPlugin";

        public string FriendlyName => "Misc MyPlugin";

        public int Priority => 0;

        public IList LimitedToStores => new List();

        public IList LimitedToGroups => new List();

        public Task GetPublicViewComponentName(string widgetZone)
        {
            return Task.FromResult("MyViewComponent");
        }
 
        public Task> GetWidgetZones()
        {
            return Task.FromResult>(new List {    "checkout_completed_top" });
        }
    }
	

Next, we must create a view component. Create a class with attribute ViewComponent, inherit from ViewComponent, and create method InvokeAsync  Based on an example you can see that our widget will be available on checkout_completed_top (order details) and MyViewComponent will be render.

[ViewComponent(Name = "WidgetsFacebookPixel")]
    public class MyWidgetViewComponent : ViewComponent
    {
        public Task InvokeAsync(string widgetZone, object additionalData = null)
        {
            var model = new SampleModel() { Value = "sample value" };
            return Task.FromResult(View("~/Plugins/Widget.MyPlugin/Views/Index.cshmtl", model));
        }
    }
	

GrandNode invokes the InvokeAsync method when you are on a page that includes a specific widget zone.

You should notice that you can return View with a model in the same way as in controller in ASP.NET.

Lastly you must register widget provider in IOC container :

services.AddScoped<IWidgetProvider, MyPluginWidgetProvider>();

Finally, we can build our plugin. Remember that after installation you must enable the widget in Admin panel -> Plugins -> Widgets.