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

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

Here is very simple code to create widget in nopcommerce
First you can download nopcommerce version 3.70 in here http://www.nopcommerce.com/downloads.aspx Seconds you should read bellow link http://docs.nopcommerce.com/display/nc/How+to+write+a+nopCommerce+plugin Third download project sample widget for nopcommerce  here http://badpaybad.info/upload/nopcommerce/Nop.Plugin.BadPayBad.HelloWorld.zip Then extract and copy to folder plugins.  then add it to solution similar to image bellow
the output path for project will use in controller to return view (the file .cshtml) image for output path when build http://badpaybad.info/upload/nopcommerce/nopcommercewidget9.png
public class HelloWorlWidgetNopPlugin : BasePlugin, IWidgetPlugin [big image]  
As you can see in project sample. it very sample .cshml file . I just show the text hello world
The file HelloWorlWidgetNopPlugin.cs contain the defind of where is the action and controller for admin mode (the admin view) and frontend (the visitor view)
- Admin mode: the defind interface for admin can access to do some config defind by bellow

?

1 2 3 4 5 6 7 8 9 10 11

public void GetConfigurationRoute( out string actionName, out string controllerName,             out RouteValueDictionary routeValues)         {             actionName = "Configure" ;             controllerName = "BadPayBadHelloWorld" ;             routeValues = new RouteValueDictionary()             {                 { "Namespaces" , "Nop.Plugin.BadPayBad.HelloWorld.Controllers" },                 { "area" , null }             };         }

- The front end mode: mean we show something for user visit the page

  

?

1 2 3 4 5 6 7 8 9 10 11 12

public void GetDisplayWidgetRoute( string widgetZone, out string actionName, out string controllerName,              out RouteValueDictionary routeValues)          {              actionName = "FrontEndView" ;              controllerName = "BadPayBadHelloWorld" ;              routeValues = new RouteValueDictionary              {                  { "Namespaces" , "Nop.Plugin.BadPayBad.HelloWorld.Controllers" },                  { "area" , null },                  { "widgetZone" , widgetZone}              };          }

- Then you need register the name, region of widget will use in frontend

  

?

1 2 3 4

public IList< string > GetWidgetZones()     {         return new List< string >() { "home_page_top_badpaybad_hello" };     }

The controller for this widget 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

namespace Nop.Plugin.BadPayBad.HelloWorld.Controllers {      public class BadPayBadHelloWorldController : BasePluginController      {          public ActionResult Configure()          {              var model = new object ();              //..\..\Presentation\Nop.Web\Plugins\BadPayBad.HelloWorld\              //the view file .cshml depend your output path              return View( "~/Plugins/BadPayBad.HelloWorld/Views/BadPayBadHelloWorld/Configure.cshtml" , model);          }            public ActionResult FrontEndView()          {              var model = new object ();              //..\..\Presentation\Nop.Web\Plugins\BadPayBad.HelloWorld\              //the view file .cshml depend your output path              return View( "~/Plugins/BadPayBad.HelloWorld/Views/BadPayBadHelloWorld/FrontEndView.cshtml" , model);          }      } }

 

How to use it  to display in the view for visitor can see  place this code into view you want, eg: index.cshtml in home folder . just render widget with the name defined rebuild you nopcommerce solution but it not display yet. you must install widget and active it in admin mode @Html.Widget("home_page_top_badpaybad_hello")

Install widget in nopcommerce: go to admin, -> configutration -> plugins -> local plugins Click install the widget you will have similar bellow image

active widget in nopcommerce
go to admin, Content management -> widgest  then find your widget. edit and check to active button similar to bellow image  All done.

Then the result will have hello world text display in front end

if you go to the plugin then click config you will have similar bellow :) it nothing else excepted hello world go to nopcommerce admin, -> configutration -> plugins -> local plugins Then click config

you also can enable (active) nopcommerce widget in  go to nopcommerce admin, -> configutration -> plugins -> local plugins By click into edit button


Finally I hope you guys can do more for your need this is very simple sample to create and use widget in nopcommerce Thank your for your reading.