Beginner's guide to nopCommerce plugin development (ASP.NET MVC based e-Commerce solution)

One key feature of the nopCommerce is its pluggable modular/layered architecture which allows additional functionality and presentation elements to be dynamically added to the application at runtime. This pluggable modularized architecture makes it easy to create and manage your nopCommerce based store site.  

 

What are plugins in nopCommerce? 


Plugins are used to extend the functionality of nopCommerce. nopCommerce has several types of plugins. For example, payment methods (such as PayPal), tax providers, shipping method computation methods (such as UPS, USP, FedEx), widgets (such as 'live chat' block), and many others. nopCommerce is already distributed with many different plugins. You can also search various plugins on the nopCommerce official site to see if someone has already created a plugin that suits your needs. If not, this article will guide you through the process of creating your own plugin. 


A recommended name for a plugin project is "Nop.Plugin.{Group}.{Name}". {Group} is your plugin group (for example, "Payment" or "Shipping"). {Name} is your plugin name (for example, "PayPalStandard"). For example, PayPal Standard payment plugin has the following name: Nop.Plugin.Payments.PayPalStandard. But please note that it's not a requirement. And you can choose any name for a plugin. For example, "MyGreatPlugin".  



The plugin structure, required files, and locations 

First thing you need to do is to create a new "Class Library" project in the solution. It's a good practice to place all plugins into \Plugins directory in the root of your solution (do not mix up with \Plugins subdirectory located in \Nop.Web directory which is used for already deployed plugins). It's a good practice to place all plugins into "Plugins" solution folder (you can find more information about solution folders here).


Steps to create a new custom plugin in nopCommerce  
Step 1) Open the nopCommerce solution in Visual Studio (remember you need full source code) 




Step 2) Right click on the plugin folder: Add > New Project 





Step 3) On the add new project window, select: .NET Framework 4.5.1 
Select: Visual C# 
Select: Class Library 





Step 4) Now, name the plugin and set the location as follows: 
In this case we are naming the plugin: Nop.Plugin.Misc.MyCustomPlugin 
Location: You will need to click on the “Browse” button and select the plugin folder that contains the source code of all the plugins (not the folder inside Nop.Web that only contains the compiled dlls) 






Step 5) Now, you should be able to see your custom plugin project in the solution explorer like this: 






Step 6) Now is the time to add all the correct references. Go to: References > Add Reference… 





You will need to add all the references (see pic below). In case you are not able to find the right reference, simple go to any other plugin that has it and get the reference from there. 






Step 7) You need to configure your custom plugin in a proper structure. 
Description.txt: The next step is creating a Description.txt file required for each plugin. This file contains meta information describing your plugin. Just copy this file from any other existing plugin and modify it for your needs. 
Group: Misc
FriendlyName: MyCustomPlugin
SystemName: MyCustomPlugin
Version: 1.00
SupportedVersions: 3.70
Author: Lavish Kumar
DisplayOrder: 1
FileName: Nop.Plugin.Misc.MyCustomPlugin.dll



Web.config: You should also create a web.config file and ensure that it's copied to output. Just copy it from any existing plugin.   






Step 8) Add a class MyCustomPlugin.cs and use the following code: 




using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Routing;
using Nop.Core.Plugins;
using Nop.Services.Common;
 
namespace Nop.Plugin.Misc.MyCustomPlugin
{
    public class MyCustomPlugin: BasePlugin, IMiscPlugin
    {
        /// <summary>
        /// Gets a route for provider configuration
        /// </summary>
        /// <param name="actionName">Action name</param>
        /// <param name="controllerName">Controller name</param>
        /// <param name="routeValues">Route values</param>
        public void GetConfigurationRoute(out string actionName, out string controllerName, out RouteValueDictionary routeValues)
        {
            actionName = "Configure";
            controllerName = "MyCustomPlugin";
            routeValues = new RouteValueDictionary { { "Namespaces", "Nop.Plugin.Misc.MyCustomPlugin.Controllers" }, { "area", null } };
        }
    }
}




Step 9) Add a class MyCustomPluginController.cs (in folder “Controllers” within your plugin) and use the following code:   




using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Mvc;
using Nop.Web.Framework.Controllers;
 
namespace Nop.Plugin.Misc.MyCustomPlugin.Controllers
{
    [AdminAuthorize]
    public class MyCustomPluginController : BasePluginController
    {
        public ActionResult Configure()
        {
            return View("~/Plugins/Misc.MyCustomPlugin/Views/MyCustomPlugin/Configure.cshtml");
        }
    }
}




Step 10) Add a Configure.cshtml (View) – In this case we are creating a blank plugin 









Step 11) Right click on the “Nop.Plugin.Misc.MyCustomPlugin” project and click “Properties” 






Make sure the assemble name and default namespaces are as follows (along with the .NET Framework):


  


Go to the left tab “Build” in the properties window: 





Scroll down to “Output” and make sure the path is same as: 
..\..\Presentation\Nop.Web\Plugins\Misc.MyCustomPlugin\ 





Step 12) Make sure everything is saved and look like this (and follows this structure): 







Step 13) Right click on your custom plugin project and click “Build”   






Step 14) After re-building your project, run the whole solution and go to the Administration section and “Clear cache” 






Step 15) Go to the plugin directory and click on the button “Reload list of plugins” 










Step 16) Now, if you scroll down, you should be able to see your new custom plugin in the list of plugins - Click on the “Install” button for your custom plugin 






Step 17) Click on the “Configure” button for your custom plugin 







If everything worked correctly without any issues, you should be able to see this page:   





Upgrading nopCommerce version may break plugins: Some plugins may become outdated and no longer work with the newer version of nopCommerce. If you have issues after upgrading to the newer version, delete the plugin and visit the official nopCommerce website to see if a newer version is available. Many plugin authors will upgrade their plugins to accommodate the newer version, however, some will not and their plugin will become obsolete with the improvements in nopCommerce. But in most cases, you can simply open an appropriate Description.txt file and update SupportedVersions field.  

nopCommerce Version (used in this article): Version 3.70 

Hope it helps - Let me know if you have any questions or comments.
 
 
Check out PART-2 of this guide: Beginner's Guide to nopCommerce Plugin Development

- Part 2: Click Here


These are the topics that will be covered PART-2 of this guide:

- How to add a menu item from your custom plugin into the administration section

- How to override a default view from your customer plugin

- How to add JS and CSS references in your custom plugin

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment
Comments
8/30/2016 3:41 PM
Hi Lavish,

I'm writing from Turkey.
I tried your example and I gave following error when I click "Configure" button after installing the plugin:

The view '/Plugins/Misc.MyCustomPlugin/Views/MyCustomPlugin/Configure.cshtml' or its master was not found or no view engine supports the searched locations. The following locations were searched:
/Plugins/Misc.MyCustomPlugin/Views/MyCustomPlugin/Configure.cshtml

I didn't found any solving method for this message. Can you help me?

Thanks a lot

Ümit KARAÇİVİ

8/30/2016 4:07 PM
Hi Ümit KARAÇİVİ,


Have you tried a Clean/Rebuild of entire solution as well as your plugin?

By looking at your error, it seems like you marked your view(s) as embedded resource.

Right click on your view > Properties > Build Action > Make sure "Content" is selected & Copy to Output Directory is "Copy if newer".

Rebuild your plugin and test again.
9/6/2016 7:29 PM
Dear Lavish Kumar,

You did great works it is working good thank you please let me know how to call that plugin to our page and specific region of page (view)
9/13/2016 4:11 PM
Ümit KARAÇİVİ

In the article:
/Plugins/Misc.MyCustomPlugin/Views/MyCustomPlugin/Configure.cshtml

You just add '~' before directory as below.

return View("~/Plugins/Misc.MyCustomPlugin/Views/MyCustomPlugin/Configure.cshtml");
9/13/2016 4:21 PM
@Suloveoun,

Good catch! Thank you for pointing that out, I will correct it in the article :)
11/17/2016 9:55 PM
this plugin is not working on nopcommerce version 3.8. can you help me ??
11/18/2016 7:27 AM
Hi tong,

The solution should work for nopCommerce 3.80.

Please provide some details about the issue you are experiencing.
3/24/2017 6:10 AM
hi,lavis
i try the same code and follow your instruction but when we click the configuration button after install then it go to the configurMiscPlugin.cshtml not goinng to our created view configure.cshtml.

Thanks in advance
3/24/2017 6:20 AM
Hi Aakash,

Please make sure you have followed step 8 & 9 correctly to define the route of your cofigure page.

In your case, it seems like the event is not able to find your cofigure page when "Configure" button is clicked.

Please let me know (or provide details on what you did so far) if you are still experiencing any issues.
3/27/2017 12:57 AM
Hi,Lavish
i have performed all the steps correctly but still i am facing the issue.
ConfigureMiscPlugin.cshtml file gets run instead of configure.cshtml whenever i click configure button.
Please provide me help.
3/27/2017 5:34 AM
Hi Aakash,

Please open a topic about your issue in the discussion forum here and I'll help you: http://www.strivingprogrammers.com/boards/forum/6/nopcommerce

In your forum post, please mention all the steps that you followed along with your code.
5/4/2017 7:06 AM
Hi Lavish,
i want to create own costume plugin but i got a error at build plugin >>>>>>>>>>. error ==== Severity  Code  Description  Project  File  Line  Suppression State
Error  CS1705  Assembly 'Nop.Web.Framework' with identity 'Nop.Web.Framework, Version=3.9.0.0, Culture=neutral, PublicKeyToken=null' uses 'System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' which has a higher version than referenced assembly 'System.Web.Mvc' with identity 'System.Web.Mvc, Version=3.0.0.1, Culture=neutral, PublicKeyToken=31bf3856ad364e35'  Nop.Plugin.Misc.MyCustomPlugin  E:\dev\Work report\3-may-2017\Plugins\Nop.Plugin.Misc.MyCustomPlugin\CSC  1  Active


Please tell me how can slow this error,
Rajnish
5/4/2017 9:04 AM
Hi Rajnish,

As described in the error message, you have to check your plugin references and change version of System.Web.Mvc

One trick to fix this kind of issue is to search for "System.Web.Mvc" in your solution and see what other plugins are using this reference.Then copy the path of the System.Web.Mvc reference / DLL and use that to add this reference (System.Web.Mvc) again in your custom plugin. Then Rebuild!
7/20/2017 10:21 AM
Hi,
I'm using nopCommerce 3.90.
I implemented all yours steps as mentioned till 15, but not able to get result as mentioned in step 16.

Can u plzz help.

Thanks
7/25/2017 5:42 AM
Hi Vivek,

Are you getting any error or just not getting your plugin in the list?

I would suggest going over all the steps again and make sure you have implemented all the steps correctly.

As long as, you have followed all the steps, you should be able to see your plugin in the plugin list.
7/27/2017 11:22 AM
Hi Lavish,
I'm writing from Turkey.
I Need to Help Can u help me :)


The view '~/Plugins/Misc.MyCustomPlugin/Views/MyCustomPlugin/Configure.cshtml' or its master was not found or no view engine supports the searched locations. The following locations were searched:
~/Plugins/Misc.MyCustomPlugin/Views/MyCustomPlugin/Configure.cshtml
10/5/2017 11:44 AM
Hi @Hüseyi,

Do you still need help?
11/30/2017 6:21 AM
hello Lavish kumar
I went through your code, tried to make new plugin
every time im getting one exception
probably it is in System.web.MVC
i tried searching online, i tried may solutions like insertin space in global.asax and matching version of System.Web.MVC Reference. did'nt remove my exception.
the exception is
"The controller for path '/Admin/Plugin/ConfigureMiscPlugin' was not found or does not implement IController."
source : System.Web.MVC
any solutions ?