How to develop a plugin for NopCommerce

The add-ons are specialized modules which maximize the functionality of nopcommerce such as payment processors, shipping provider, etc.

Before launching the code, it is necessary to know the following of nopcommerce:

• Architecture of nopCommerce
• Types of plugin
• Register new routes
• The plugin structure, required files, and locations
• Understanding Layout / Design
• Handling "Install" and "Uninstall" methods
• Handling requests. Controllers, models and views

Architecture of nopCommerce

It is an open source e-commerce, so you can download from github without any inconvenience and even collaborate. Projects and folders are listed in the order in which they appear in Visual Studio. To build a plugin my recommendation is not to change the source code of the libraries of the solution framework.

\Libraries\Nop.Core

The Nop.Core project contains a set of core classes for nopCommerce, such as caching, events, helpers, and business objects (for example, Order and Customer entities).

\Libraries\Nop.Data

The Nop.Data project contains a set of classes and functions for reading from and writing to a database or other data store. It helps separate data-access logic from your business objects.

\Libraries\Nop.Services

This project contains a set of core services, business logic, validations or calculations related with the data, if needed. Some people call it Business Access Layer (BAL).

Projects into \Plugins\ solution folder

\Plugins is a Visual Studio solution folder that contains plugin projects. Physically it's located in the root of your solution. But plugins DLLs are automatically copied in \Presentation\Nop.Web\Plugins\ directory which is used for already deployed plugins because the build output paths of all plugins are set to ..\..\Presentation\Nop.Web\Plugins\{Group}.{Name}\. This allows plugins to contain some external files, such as static content (CSS or JS files) without having to copy files between projects to be able to run the project.

\Presentation\Nop.Web

Nop.Web is an MVC web application project, a presentation layer for public store which also contains administration panel included as an area. If you haven't used ASP.NET before, please find more info here. This is the application that you actually run. It is the startup project of the application.

\Presentation\Nop.Web.Framework

Nop.Web.Framework is a class library project containing some common presentation things for Nop.Web project.

\Test\Nop.Core.Tests

Nop.Core.Tests is the test project for the Nop.Core project.

\Test\Nop.Services.Tests

Nop.Services.Tests is the test project for the Nop.Services project.

\Test\Nop.Tests

Nop.Tests is a class library project containing some common test classes and helpers for other test projects. It does not have any test.

\Test\Nop.Web.MVC.Tests

Nop.Web.MVC.Tests is the test project for the presentation layer projects.

Types of plugin

The type of its complement is defined by the interface that implements the main complement class.

Discount Rules (IDiscountRequirementRule)For defining requirements that must be met my an order for a discount to be applied

Exchange Rate Prodider (IExchangeRateProvider)For getting the exchange rates for currencies

External Authentication Method (IExternalAuthenticationMethod)For adding new external authentication methods (e.g. “Login with Facebook”)

Widgets (IWidgetsPlugin)For when your plugin doesn’t fit any of the other types

Payment Method (IPaymentMethod)For example, Paypal or Worldpay

Shipping Rate Computation Method (IShippingRateComputationMethod)For calculating shipping rates (many plugins of this time call web services provided by couriers to retrieve rates)

Pickup points is an option providing customers the flexibility to select a point where they can receive parcels.

Tax Provider (ITaxProvider)For calculating tax rates

Widget (IWidgetPlugin)Widgets are blocks of content shown throughout the site. The default theme contains many widget “areas”.
You can assign your new widget to one of these areas, and wherever the area is referenced in the theme, your widget will appear.

Register new routes

ASP.NET Core routing is responsible for assigning incoming browser requests via a get to the MVC controller. NopCommerce has an IRouteProvider interface that is used for route registration during application startup. All main routes are registered in the RouteProvider class located in the Nop.Web project.

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).

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, "MyCustomPlugin".

Once the plugin project is created you have to open its .csproj file in any text editor and replace its content with the following one:

The next step is creating a  plugin.json 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. For example, PayPal Standard payment plugin has the following plugin.json file:

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

Handling "Install" and "Uninstall" methods

Some plugins can require additional logic during plugin installation. For example, a plugin can insert new locale resources. So open your IPlugin implementation (in most case it'll be derived from BasePlugin class) and override the following methods:

• Install. This method will be invoked during plugin installation. You can initialize any settings here, insert new locale resources, or create some new database tables (if required).
• Uninstall. This method will be invoked during plugin uninstallation.

Understanding Layout / Design

What are layouts? Every web developer/designer wants to maintain a consistent look and feel across all of the pages within the website. Back in the days, the concept of "Master Pages" was introduced in ASP.NET 2.0 which helps in maintaining a consistent look of the website by mapping it with .aspx pages.

Razor also supports this similar concept with a feature called "Layouts". Basically, it allows you to define a common site template and then inherit its look and feel across all the views/pages on your website.

In nopCommerce, there are 2 different kinds of layouts:

• _ColumnsOne.cshtml
• _ColumnsTwo.cshtml

All these 2 layouts are inherited from one main layout called: _Root.cshtml. The _Root.cshtml itself is inherited from _Root.Head.cshtml. _Root.Head.cshtml is the file you need to look into if you are linked css stylesheet and jquery files (you can add/link more .css and .js files here). The location of all these layouts in nopCommerce is as follows: nopCommerce root directory/Views/Shared/.... If you are using source code version then: \Presentation\Nop.Web\Views\Shared\...

• 

Handling requests. Controllers, models and views

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

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

Now, we will add the menu item by adding this code in “MyCustomPlugin.cs”:

We can see our menu item here:

Let’s create a “WidgetsMyCustomPluginViewComponent” file inside the “Components” folder of your custom plugin and simply paste the default home view (PublicInfo.cshtml) from Nop.Web like this:

Note: Make sure the output directory (in properties) for your home view (PublicInfo.cshtml) is defined as “Copy if newer”. Rebuild your plugin and try going to your public store (since your plugin is already installed)

We should see the plugin view overriding the default home view like this:

I let you share the source code link on GitHub