In the first part of this series, Beginner's Guide to nopCommerce Plugin Development, we learned the basics of nopCommerce plugin including how to develop a sample test plugin. The main aim of this series is to create a definitive guide so that you have a single point of reference for properly developing your custom plugins.
To continue with the series, today we will go over some advanced features and functionality that any developer can accomplish by nopCommerce plugin.
These are the topics that will be covered in this article:
- 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
How to add a menu item from your custom plugin into the administration section
Basically, all the menu items that we see in the nopCommerce administration section are built from the sitemap.config file which is location in the Nop.Admin folder:
In order to add a menu item from your custom plugin into the administration section, first we need to implement IAdminMenuPlugin in the plugin’s main class.
This is the original code of our plugin class in “MyCustomPlugin.cs”
We will add IAdminMenuPlugin like this:
Along with this, we also need to reference the “Nop.Web.Framework.Menu” like this:
Now, we will add the menu item by adding this code in “MyCustomPlugin.cs”:
Let’s rebuild the plugin and go to the administration section on the website:
We can see our menu item here:
How to override a default view from your customer plugin
This is one of the most common question developers ask on nopCommerce forums, as many see this as a complex task. But, the reality is that it is quite easy and straight-forward to override a default view by a custom nopCommerce plugin as long as you have a good understanding of ASP.NET MVC and nopCommerce files structure.
In this article, we will try to override the default homepage view which you can find in this location:
Let’s create a “Home” folder inside the “View” folder of your custom plugin and simply paste the default home view (Index.cshtml) from Nop.Web like this:
Now, we will add a test heading in the home view so that we know which view is coming from plugin.
The home view code looks like this in the plugin:
Now, we will add a controller for home page like this:
Let’s name the controller same as default homepage controller “HomeController.cs”
In our HomeController, we will add the action that points to the Index.cshtml view like this:
Just like we have RouteProvider in Nop.Web, we will create a “Infrastructure” folder and “RouteProvider.cs” in our custom plugin like this:
In “RouteProvider.cs”, we will register the route for your custom home page:
In “RouteProvider.cs” again, we need to mention the priority so that plugin home view can override the default home view:
This is the complete code for “RouteProvider.cs”:
Note: Make sure the output directory (in properties) for your home view (Index.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:
How to add JS and CSS references in your custom plugin
In order to load the JS and CSS reference in your custom plugin, you need to add the references in your plugin’s view file.
In order to load your resource files correctly in the view pages, you can use the following helper methods:
- Html.AddScriptParts(): For loading JS files
- Html.AddCssFileParts(): For loading CSS files
All you need to do is, place these in your view file with the defined path of the resources like this:
I hope everyone find this article (Plugin development guide) helpful. Please feel free to ask any questions.
nopCommerce can be download here: http://www.nopcommerce.com/downloads.aspx
nopCommerce Version (used in this article): Version 3.80