Beginner's Guide to nopCommerce Plugin Development (ASP.NET MVC Based e-Commerce Solution) ...

Datetime:2016-08-22 22:09:00          Topic: HTML  ASP.NET MVC           Share

In the first part of this series, Beginner's Guide to nopCommerce Plugin Development , we learned the basics of the 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 using the 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

So, let's begin...

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 located 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”:

public class MyCustomPlugin : BasePlugin, IMiscPlugin

We will add IAdminMenuPlugin like this:

public class MyCustomPlugin : BasePlugin, IAdminMenuPlugin, IMiscPlugin

Along with this, we also need to reference the “Nop.Web.Framework.Menu” like this:

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;
using Nop.Web.Framework.Menu;

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

public void ManageSiteMap(SiteMapNode rootNode)
        {
            var menuItem = new SiteMapNode()
            {
                SystemName = "MyCustomPlugin",
                Title = "MyCustomPlugin Title",
                ControllerName = "MyCustomPlugin",
                ActionName = "Configure",
                Visible = true,
                RouteValues = new RouteValueDictionary() { { "area", null } },
            };
            var pluginNode = rootNode.ChildNodes.FirstOrDefault(x => x.SystemName == "Third party plugins");
            if (pluginNode != null)
                pluginNode.ChildNodes.Add(menuItem);
            else
                rootNode.ChildNodes.Add(menuItem);
        }

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 straightforward 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 the plugin.

<h1>This view is coming from plugin</h1>

The home view code looks like this in the plugin:

@using System;
@using System.Collections.Generic;
@using Nop.Core.Domain.Seo;
@using Nop.Core.Infrastructure;
@using Nop.Web.Framework.UI;
@using System.Web.Mvc;
@using Nop.Web.Framework;
@using Nop.Web.Framework.Mvc;
@{
    Layout = "/Views/Shared/_ColumnsOne.cshtml";

    //page class
    Html.AppendPageCssClassParts("html-home-page");
}
<div class="page home-page">
    <div class="page-body">
        <br />
        <h1>This view is coming from plugin</h1>
        <br/> <br/> <br/>
        @Html.Widget("home_page_top")
        @Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
        @Html.Widget("home_page_before_categories")
        @Html.Action("HomepageCategories", "Catalog")
        @Html.Widget("home_page_before_products")
        @Html.Action("HomepageProducts", "Product")
        @Html.Widget("home_page_before_best_sellers")
        @Html.Action("HomepageBestSellers", "Product")
        @Html.Widget("home_page_before_news")
        @Html.Action("HomePageNews", "News")
        @Html.Widget("home_page_before_poll")
        @Html.Action("HomePagePolls", "Poll")
        @Html.Widget("home_page_bottom")
    </div>
</div>

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:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Mvc;
using Nop.Web.Framework.Security;
using Nop.Web.Framework.Controllers;
using Nop.Web.Framework;

namespace Nop.Plugin.Misc.MyCustomPlugin.Controllers
{
    public class HomeController : BasePluginController
    {
        [NopHttpsRequirement(SslRequirement.No)]
        public ActionResult Index()
        {
            return View("/Plugins/Misc.MyCustomPlugin /Views/Home/Index.cshtml");
        }
    }
}

Just like we have RouteProvider in Nop.Web, we will create an “Infrastructure” folder and “RouteProvider.cs” in our custom plugin like this:

In “RouteProvider.cs”, we will register the route for your custom home page:

public void RegisterRoutes(RouteCollection routes)
        {
            routes.MapLocalizedRoute("HomePagePlugin",
                            "",
                            new { controller = "Home", action = "Index" },
                            new[] { "Nop.Plugin.Misc.MyCustomPlugin.Controllers" });


        }

In “RouteProvider.cs” again, we need to mention the priority so that plugin home view can override the default home view:

public int Priority
        {
            get
            {
                return int.MaxValue; ;
            }
        }

This is the complete code for “RouteProvider.cs”:

using Nop.Web.Framework.Mvc.Routes;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Routing;
using System.Web.Mvc;
using Nop.Web.Framework.Localization;

namespace Nop.Plugin.Misc.MyCustomPlugin.Infrastructure
{
    public class RouteProvider : IRouteProvider
    {
        public void RegisterRoutes(RouteCollection routes)
        {
            routes.MapLocalizedRoute("HomePagePlugin",
                            "",
                            new { controller = "Home", action = "Index" },
                            new[] { "Nop.Plugin.Misc.MyCustomPlugin.Controllers" });


        }
        public int Priority
        {
            get
            {
                return int.MaxValue; ;
            }
        }

    }
}

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:

//For JS
 //Third parameter value indicating whether to exclude this script from bundling

Html.AddScriptParts(ResourceLocation.Foot, "/Plugins/{PluginName}/scripts/JS_file.js", true);   


//Loading CSS file

Html.AddCssFileParts(ResourceLocation.Head, "/Plugins/{PluginName}/Content/{CSSFileName.Css}");

I hope everyone finds this article (Plugin development guide) helpful. Please feel free to ask any questions.





About List