NopCommerce Demo Widget -3 Part

Welcome to 3. Post in our series of creating from scratch Widget demo project In popular Nopcommerce platform First, we should convert our existing class library project into Widget Nopcommerce project. After this post we should have our widget installed in our store and our table should be created in database.
Ok, let’s begin
First, add main plugin class into our project which implements IWidgetplugin interface. Just to mention widget is one of several different plugin type. Main class is DemoWidgetPlugin.cs. Two items in plugin project which must exists is this is plugin class and description.txt file wihi we added in 1. post.

This class should inherit abstract class BasePlugin from Nop.Core.Plugins; namespace. Because is abstract class we should override abstract methods.
In constructor of DemoWidgetPlugin class is WidgetDemoObjectContext argument.

private WidgetDemoObjectContext _context;
        public DemoWidgetPlugin(WidgetDemoObjectContext context)
        {
            _context = context;
        }

Context argument here is managed by autofac Inversion of Control container (http://autofac.org/). Autofac wil instantiate instance of context as is registered in DemoWidgetDependencyRegistrar class in a Register method. This class is in source code which is attached with this post and we explained this method in previous post https://www.skipic.net/2015/10/22/nopcommerce-demo-widget-2-part/

Next we should obviously override abstract methods from BasePlugin class Install and UnInstall methods.
In this moment our class code is

public class DemoWidgetPlugin : BasePlugin
    {
        private WidgetDemoObjectContext _context;
        public DemoWidgetPlugin(WidgetDemoObjectContext context)
        {
            _context = context;
        }


        public override void Install()
        {
            _context.Install();
            base.Install();
        }


        public override void Uninstall()
        {

            _context.Uninstall();
            base.Uninstall();
        }
    }

Let’s analyze situation here. This class is fetched by Nopcommerce framework through reflection and in that moment will call methods install and uninstall. With our context here when we call install methoid we actually will create table in database as we explained in Install method of WidgetDemoObjectContext class

public void Install()
        {
           Database.SetInitializer<WidgetDemoObjectContext>(null);
            Database.ExecuteSqlCommand(CreateDatabaseInstallationScript());
            SaveChanges();
        }

Here is all magic of initiating of our plugin part of database and executing sql script which is set in modelbuilder configuration.
modelBuilder.Configurations.Add(new WidgetDemoMap());

Same thing happened with uninstall method, where all goes in opposite direction. To remove our table in database with drop sql script.

In addition, just to mention base.Install(); and base.Uninstall(); methods from BasePlugin class in Nop.Core.Plugins namespace.
These metods actually mark plugin as installed or uninstalled with pluginmanager
Code snippet from BasePlugin class

public virtual void Install() 
        {
            PluginManager.MarkPluginAsInstalled(this.PluginDescriptor.SystemName);
        }

        /// <summary>
        /// Uninstall plugin
        /// </summary>
        public virtual void Uninstall() 
        {
            PluginManager.MarkPluginAsUninstalled(this.PluginDescriptor.SystemName);
        }

Result of this “marking and unmarking” is in file InstalledPlugins.txt which is in folder nopCommerce_3.60_Source\Presentation\Nop.Web\App_Data
In this file actually are named all plugins which are installed. After installation we will check is out plugin in this file.
For example current content of InstalledPlugins.txt file in my file system is :

DiscountRequirement.MustBeAssignedToCustomerRole
CurrencyExchange.MoneyConverter
ExternalAuth.Facebook
Misc.FacebookShop
Payments.CheckMoneyOrder
Payments.Manual
Payments.PayPalDirect
Payments.AuthorizeNet
Payments.PayPalStandard
Payments.PurchaseOrder
PromotionFeed.Froogle
Shipping.AustraliaPost
Shipping.CanadaPost
Shipping.FedEx
Shipping.FixedRate
Shipping.ByWeight
Shipping.UPS
Shipping.USPS
Mobile.SMS.Verizon
Tax.FixedRate
Tax.CountryStateZip
Widgets.GoogleAnalytics
Widgets.NivoSlider

Next, we should determine tah our project is widget type. That will do with implementing class DemoWidgetPlugin.cs with interface IWidgetPlugin
In IWidgetPlugin interface there are 3 methods.

GetConfigurationRoute method is for defining action in controller which points to partial view where we will create interface for configuration of widget in admin part of store.

GetDisplayWidgetRoute method defines action in cotroller for displaying widget in public part of our store.

GetWidgetZones is actually code where we set array of zones in nopcommerce store in which we will have possibility to add widget.

Code snippet for these 3 methods is

public void GetConfigurationRoute(out string actionName, out string controllerName, out System.Web.Routing.RouteValueDictionary routeValues)
        {
            actionName = "Configure";
            controllerName = "Demo";
            routeValues = new RouteValueDictionary()
            {

                {"Namespaces", "Nop.Plugin.Widgets.DemoWidget.Controllers"},
                {"area", null} 

            };
        }

        public void GetDisplayWidgetRoute(string widgetZone, out string actionName, out string controllerName, out System.Web.Routing.RouteValueDictionary routeValues)
        {
            actionName = "DemoWidget";
            controllerName = "Demo";
            routeValues = new RouteValueDictionary()
            {

                {"Namespaces", "Nop.Plugin.Widgets.DemoWidget.Controllers"},
                {"area", null},
                {"widgetZone", widgetZone}

            };
        }
        

        public IList<string> GetWidgetZones()
        {
           return new List<string>();
        }

For now, it is not matter because we don’t have controlle. Our intention is now, just to install plugin. To have installed plugin it is important to set future controller and actions in this controller. In addition, in routeValues we are sending parameters to action methods. For example, widgetzone parameter is important for DemoWidget action where is actually called partially view for public store and this action method needs to know where to put widget. Area parameter is null, because we haven’t areas,and Namespaces parameter is namespace where actually will be our controller class.
In method GetWidgetZones, for now we returned just empty list. Reason is the same, at the moment we want just to install plugin in admin part of store.

Now, we finally ready for installing plugin on store.
Few things to check before installing:
Right click on Description.txt file and set property Copy to output directory to value Copy Always

With that settings we will be sure that Description.txt file will be always in CompiledPlugin directory where are files which are products of build project.
Next thing is to check build dependencies of our project. That will help us to be sure that when build our project will be always in output directory dll on which our project depends. In that way we will avoid some future potential build conflicts.
We should check Nop.Core, Nop.Data,

And Nop.Services, Nop.Web.Framework

Now we are finally ready to install plugin. First standard clean and build our solution.
We should not have build errors and we should start without debugging Nopcommerce solution (or ctrl-f5)

After starting solution we should see

We click on administration and Configuration -> Plugins ->Local Plugin.We will se list of all local plugins.

Somehere in the middle of the list we will see our widget, and button install is the right to the widget.
Clicking on button obviously we should install successfully our widget!

We can verify that our widget is installed properly on two places:
1. InstalledPlugins.txt file in folder nopCommerce_3.60_Source\Presentation\Nop.Web\App_Data
2. Created table DemoWidget_WidgetDemo in database with associated column which actualy are from mapped properties.

In this file should be name of widget.

I hope that you enjoyed in installing our widget on Nopcommerce platform. See you in next post where we will start with real coding

Project download source code link (3.60 NopCommerce version)
Nop.Plugin.Widgets.DemoWidget