When writing your own plugins in NopCommerce there will be times when you want to add settings pages to the main Admin Menu for your users. Let’s take a look at how this works in NopCommerce 3.3.
This tutorial won’t cover creating plugins in general – for a great ramp up you can visit the guide on the NopCommerce site here.
In order to add nav items you need to implement the IAdminMenuPlugin interface in your plugin’s main class – the one that inherits from BasePlugin or one of the other plugin parent classes. IAdminMenuPlugin requires that we implement two methods – Authenticate() and BuildMenuItem().
public bool Authenticate() { return true; } public SiteMapNode BuildMenuItem() { SiteMapNode node = new SiteMapNode { Visible = true, Title="Infinite Slider", Url = "/InfiniteSlider/EditSlider" }; SiteMapNode editNode = new SiteMapNode { Visible = true, Title = "Edit Slide", Url = "/InfiniteSlider/EditSlider" }; SiteMapNode manageNode = new SiteMapNode { Visible = true, Title = "Manage Slides", Url = "/InfiniteSlider/ManageSliders" }; node.ChildNodes.Add(editNode); node.ChildNodes.Add(manageNode); return node; }
For the Authenticate() method we need to simply return true. BuildMenuItem() is a little more involved but still pretty straight forward. Basically we need to return a SiteMap node, which represents a navigation item under the “Plugins” menu item that is automatically added to the NopCommerce Admin area when a plugin is installed that adds menu items. The node object has a few different properties – the ones we care about here are Visilble, Title, and Url. These are fairly self explanatory – visible makes it show or hide, title is the text displayed, and the URL is where the nav item will take the user. Ideally these should be localized for multi language support. As shown in the example, you can also build child nodes and attach them to the main node, which will create additional levels of fly out menus.
One other thing we need to do is add some routes to a RouteProvider class that we add to our solution. If you notice, my urls in the nav items above start from the root using “/” and do not include Admin. I ran into issues when trying to build routes that start with the Admin prefix. Other people seem to be having this issue on various versions of Nop when I looked around online, but I didn’t find a concrete solution. If you want it to include /Admin you’ll have to figure that out yourself.
Anyway, here is an example of some routes I added to work with these urls:
public class RouteProvider : IRouteProvider { public void RegisterRoutes(RouteCollection routes) { //IPN routes.MapRoute("Plugin.Misc.InfiniteSlider.EditSlider", "InfiniteSlider/EditSlider/{Id}", new { controller = "InfiniteSlider", action = "EditSlider", Id = 0 }, new[] { "Nop.Plugin.Misc.InfiniteSlider.Controllers" } ); routes.MapRoute("Plugin.Misc.InfiniteSlider.ManageSliders", "InfiniteSlider/ManageSliders", new { controller = "InfiniteSlider", action = "ManageSliders", Id = 0 }, new[] { "Nop.Plugin.Misc.InfiniteSlider.Controllers" } ); } public int Priority { get { return 0; } } }
This tutorial assumes you are somewhat familiar with routing in MVC. If you’re not I’m not going to go in depth here – routing is an extremely deep topic that could cover many blog posts or chapters in a book. Basically I am just mapping the two urls from the Nav nodes to a couple different actions of the InfiniteSlider controller. Id is an optional parameter to specificy a slider.
That’s really all there is to it! Nop can be a little finnicky (with lots of things), so make sure you have your namespaces and routes entered exactly right. When you’re done you should get something that looks like this:
