[转]nopCommerce Widgets and How to Create One

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[转]nopCommerce Widgets and How to Create One相关的知识,希望对你有一定的参考价值。

本文转自:https://dzone.com/articles/what-are-nopcommerce-widgets-and-how-to-create-one

A widget is a stand-alone application that can be embedded into third party sites by any user on a page. It‘s a small application that can be installed and executed within a web page by an end user. (Wikipedia).

What Are Widgets in Nopcommerce?

A widget is an element of a graphical user interface (GUI) that displays information which can be changed by the user or store admin. nopCommerce has several built-in widget plugins such as Google Analytics and Nivo Slider etc. When adding a widget to the public store, the site administrator needs to define (or select) a widget zone. Now, you must be wondering, what is a widget zone? A widget zone is part of the UI (user-interface) in the public store where the widget can be displayed or rendered. For example, you can place a Live Person chat widget on the left column or on the right column widget zone. Widget zones are basically the pre-defined locations in a nopCommerce public site that make it easier for the store admin to display any information.

How Widgets Are Different From Plugins in Nopcommerce?

In nopCommerce, a widget is used to add some kind of functionality or feature (or even display information) that can be rendered on some parts of the public site (also known as widget zones). Whereas, plugins in nopCommerce are used to extend the functionality of nopCommerce. nopCommerce has several types of plugins. Some examples are 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.

Here you can find third-party plugins/extensions and themes which are developed by the nopCommerce community and partners: http://www.nopcommerce.com/extensions-and-themes.aspx

The Widget Structure, Required Files, and Locations

The 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 widgets (or 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 widgets and plugins). You can find more information about solution folders here.

Steps to Create a Custom Nopcommerce Widget

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 widget and set the location as follows:

In this case, we are naming the plugin: Nop.Plugin.Widgets.MyCustomWidget

Location: You will need to click on the "Browse" button and select the plugin folder that contains the source code of all the plugins / widgets (not the folder inside Nop.Web that only contains the compiled dlls)

技术分享

Step 5) Now, you should be able to see your custom widget 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 widget in a proper structure.

Description.txt: The next step is creating a Description.txt file required for each widget. This file contains meta information describing your widget. Just copy this file from any other existing widget and modify it for your needs.

 
Group: Widgets
 
FriendlyName: MyCustomWidget
 
SystemName:  Nop.Plugin.Widgets.MyCustomWidget
 
Version: 1.00
 
SupportedVersions: 3.80
 
Author:  Lavish Kumar
 
DisplayOrder: 1
 
FileName: Nop.Plugin.Widgets.MyCustomWidget.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 widget.

 

技术分享

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

技术分享

 
using System;
 
using System.Collections.Generic;
 
using System.Linq;
 
using System.Text;
 
using System.Threading.Tasks;
 
using System.IO;
 
using System.Web.Routing;
 
using Nop.Core;
 
using Nop.Core.Plugins;
 
using Nop.Services.Cms;
 
using Nop.Services.Configuration;
 
using Nop.Services.Localization;
 
using Nop.Services.Media;
 
using Nop.Services.Common;
 
 
namespace Nop.Plugin.Widgets.MyCustomWidget
 
{
 
    /// <summary>
 
    /// PLugin
 
    /// </summary>
 
    public class MyCustomWidget : BasePlugin, IWidgetPlugin
 
    {
 
 
 
        /// <summary>
 
        /// Gets widget zones where this widget should be rendered
 
        /// </summary>
 
        /// <returns>Widget zones</returns>
 
        public IList<string> GetWidgetZones()
 
        {
 
            return new List<string> { "home_page_before_categories" };
 
        }
 
 
 
 
        /// <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 = "MyCustomWidget";
 
            routeValues = new RouteValueDictionary { { "Namespaces", "Nop.Plugin.Widgets.MyCustomWidget.Controllers" }, { "area", null } };
 
        }
 
 
 
        /// <summary>
 
        /// Gets a route for displaying widget
 
        /// </summary>
 
        /// <param name="widgetZone">Widget zone where it‘s displayed</param>
 
        /// <param name="actionName">Action name</param>
 
        /// <param name="controllerName">Controller name</param>
 
        /// <param name="routeValues">Route values</param>
 
        public void GetDisplayWidgetRoute(string widgetZone, out string actionName, out string controllerName, out RouteValueDictionary routeValues)
 
        {
 
            actionName = "PublicInfo";
 
            controllerName = "MyCustomWidget";
 
            routeValues = new RouteValueDictionary
 
            {
 
                {"Namespaces", "Nop.Plugin.Widgets.MyCustomWidget.Controllers"},
 
                {"area", null},
 
                {"widgetZone", widgetZone}
 
            };
 
        }
 
 
 
 
 
 
 
        /// <summary>
 
        /// Install plugin
 
        /// </summary>
 
        public override void Install()
 
        {
 
            PluginManager.MarkPluginAsInstalled(this.PluginDescriptor.SystemName);
 
        }
 
 
        /// <summary>
 
        /// Uninstall plugin
 
        /// </summary>
 
        public override void Uninstall()
 
        {
 
            PluginManager.MarkPluginAsUninstalled(this.PluginDescriptor.SystemName);
 
        }
 
    }
 
}
 

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

技术分享

 
using System;
 
using System.Collections.Generic;
 
using System.Data.Entity.Migrations;
 
using System.Linq;
 
using System.Text.RegularExpressions;
 
using System.Web.Mvc;
 
using Nop.Services;
 
using Nop.Web.Framework.Controllers;
 
using Nop.Web.Framework.Kendoui;
 
using Nop.Services.Localization;
 
using Nop.Services.Security;
 
using Nop.Core.Domain.Localization;
 
using Nop.Core.Data;
 
using Nop.Core;
 
using Nop.Web.Models.Common;
 
using Nop.Core.Caching;
 
using Nop.Web.Infrastructure.Cache;
 
using Nop.Core.Infrastructure;
 
 
 
namespace Nop.Plugin.Widgets.MyCustomWidget.Controllers
 
{
 
    public class MyCustomWidgetController : BasePluginController
 
    {
 
 
        [AdminAuthorize]
 
        public ActionResult Configure()
 
        {
 
            return View("/Plugins/Widgets.MyCustomWidget/Views/Configure/Configure.cshtml");
 
        }
 
 
        public ActionResult PublicInfo(string widgetZone, object additionalData = null)
 
        {
 
 
            return View("/Plugins/Widgets.MyCustomWidget/Views/Configure/PublicInfo.cshtml");
 
        }
 
 
 
    }
 
}
 

Step 10) Add a Configure.cshtml (View) inside “Views” folder – In this case we are creating a blank view

技术分享

技术分享

Note: Make sure the output directory (in properties) for your view (Configure.cshtml) is defined as “Copy if newer”

Step 11) Right click on the “Nop.Plugin.Widgets.MyCustomWidget” 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\Widgets.MyCustomWidget\

技术分享

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

技术分享

Step 13) Right click on your custom widget 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 widget in the list of plugins - Click on the “Install” button for your custom widget.

技术分享

Step 17) Go to: Administration > Configuration > Widgets

技术分享

Now, you should be able to see your widget in the list.

技术分享

Step 18) Click on the CONFIGURE link and you should be able to see your view like this:

技术分享

We have successfully created a nopCommerce widget. If you have any questions, please feel free to ask.

以上是关于[转]nopCommerce Widgets and How to Create One的主要内容,如果未能解决你的问题,请参考以下文章

[转]教你一招 - 如何给nopcommerce增加一个类似admin的area

[转]在NopCommerce中新增一个Domain Model的步骤

[转]NopCommerce之旅: 应用启动

[转]NopCommerce 多数据库方案

[转]How to add new table in NopCommerce

如何发布 NopCommerce 和 NopCommerce 管理网站?