本文转自: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的更多相关文章

  1. pyqt的信号槽机制(转)

    PySide/PyQt Tutorial: Creating Your Own Signals and Slots This article is part 5 of 8 in the series  ...

  2. Dojo Widget系统(转)

    Dojo 里所有的小部件(Widget)都会直接或间接的继承 dijit._Widget / dijit._WidgetBase dijit._Widget 是 dojo 1.6 和 1.6之前的版本 ...

  3. YII 主题

    heming是一个在Web应用程序里定制网页外观的系统方式.通过采用一个新的主题,网页应用程序的整体外观可以立即和戏剧性的改变. 在Yii,每个主题由一个目录代表,包含view文件,layout文件和 ...

  4. Django之Form字段插件

    一.Django内置Form组件:        在使用Django内置的Form组件时,里面包含了许多[字段]和[插件],也就是验证用户输入的请求以及生成显示在前端的HTML.下面介绍一下用法: F ...

  5. nopCommerce 3.9 大波浪系列 之 网页加载Widgets插件原理

    一.插件简介 插件用于扩展nopCommerce的功能.nopCommerce有几种类型的插件如:支付.税率.配送方式.小部件等(接口如下图),更多插件可以访问nopCommerce官网. 我们看下后 ...

  6. [转]simple sample to create and use widget for nopcommerce

    本文转自:http://badpaybad.info/simple-sample-to-create-and-use-widget-for-nopcommerce Here is very simpl ...

  7. NopCommerce 增加 Customer Field

    预期效果: Customer表新增一个Column 该新增字段可以在Admin段 新增 修改 列表查询及显示 示例步骤: 0.数据库表修改 alter table [Customer] add Mem ...

  8. [转]How to add new table in NopCommerce

    本文转自:http://www.tech-coder.com/2015/07/how-to-add-new-table-in-nopcommerce.html Hey guys I am back a ...

  9. [转]教你一招 - 如何给nopcommerce增加新闻类别模块

    本文转自:http://www.nopchina.net/post/nopchina-teach-newscategory.html nopcommerce的新闻模块一直都没有新闻类别,但是很多情况下 ...

随机推荐

  1. cocos2dx day 1

    原文:http://www.cocos2d-x.org/programmersguide/2/index.html 一.Basic Concepts 1.director 2.scene 2.1 sc ...

  2. java 常用集合例子

    package test; import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; import ...

  3. Eclipse中SVN的安装步骤(两种)和使用方法[转载]

    一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.从官网下载site-1.6.9.zip文件,网址是:subclipse.tigri ...

  4. JDK与Tomcat的联系

    如果服务器没有安装JDK或没有配置JDK环境变量,则Tomcat启动出错 报错:需要JAVA_HOME 或JRE_HOME环境变量 所以必须首先安装JDK 配置环境变量 web服务器Tomcat才能运 ...

  5. caffe 配置 札记

    cudnn的配置 1. 安装前请去先官网下载cuDNN (cudnn-7.0-linux-x64-v3),建议安装v3,v4有些问题. 将cudnn-7.0-linux-x64-v3解压后会有两个文件 ...

  6. python面向对象三大特性之封装

    一. 概述 定义:隐藏对象的属性和实现细节,仅对外提供公共访问方式 封装的原则:把不需要对外提供的内容都隐藏起来,提供公共的方法访问这些隐藏属性 二.封装手段 使用双下划线将属性和方法隐藏起来 cla ...

  7. STL:unique()函数

    unique() unique()是剔除重复他是剔除相邻之间字符重复的,倘若其中中的字符前后之间是没有重复的,unique函数是起不到作用的,所以使用以前都会sort处理. unique()函数的返回 ...

  8. Eclipse启动时出现错误 An internal error occurred during: &quot;Updating indexes&quot;

    在Eclipse的workspace下有个.metadata文件夹,Eclipse出现异常的log文件就在这个目录下. 最近出现了这样的错误: 查看日志文件发现:     !ENTRY org.ecl ...

  9. loadrunner error 27796 Failed to connect to server

    (2012-10-23 01:23:17) 转载▼   Action.c(58): Error -27796: Failed to connect to server "www.baidu. ...

  10. 九度OJ小结2

    由于安排问题,距离上次小结时间已经过去很久.导致这次小结的内容很多. 本次小结涉及到主要内容如下所示: 基于并查集操作的最小生成树问题(prime算法或者kruskal算法): 最短路径问题(Floy ...