先了解下nop4.1的一些插件有哪些类型:

1、支付插件   Nop.Plugin.Payments.PayPalStandard  Nop.Plugin.Payments.CheckMoneyOrder

2、挂件插件 网站前端的一些小组件: Nop.Plugin.Widgets.GoogleAnalytics   Nop.Plugin.Widgets.NivoSlider  都是官方自带的挂件。

3、第三方认证的插件  Nop.Plugin.ExternalAuth.Facebook

4、折扣规则插件  Nop.Plugin.DiscountRules.CustomerRoles

5、配送方式 Nop.Plugin.Shipping.FixedByWeightByTotal

6、税收 Nop.Plugin.Tax.FixedOrByCountryStateZip

7、自提点 Nop.Plugin.Pickup.PickupInStore

8、其他扩展插件

用媒介信任的方式开发一个插件:https://shazwazza.com/post/Developing-a-plugin-framework-in-ASPNET-with-medium-trust.aspx

发布插件的时候需要注意:  直接编辑项目文件代码,发布的地址改成下面的格式,清理也要加。

<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>netcoreapp2.1</TargetFramework>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
<OutputPath>..\..\Presentation\Nop.Web\Plugins\PLUGIN_OUTPUT_DIRECTORY</OutputPath>
<OutDir>$(OutputPath)</OutDir>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
<OutputPath>..\..\Presentation\Nop.Web\Plugins\PLUGIN_OUTPUT_DIRECTORY</OutputPath>
<OutDir>$(OutputPath)</OutDir>
</PropertyGroup>
<!-- This target execute after "Build" target -->
<Target Name="NopTarget" AfterTargets="Build">
<!-- Delete unnecessary libraries from plugins path -->
<MSBuild Projects="$(MSBuildProjectDirectory)\..\..\Build\ClearPluginAssemblies.proj" Properties="PluginPath=$(MSBuildProjectDirectory)\$(OutDir)" Targets="NopClear" />
</Target>
</Project>

Replace “PLUGIN_OUTPUT_DIRECTORY” in the code above with your real plugin output directory name.

下面开始讲下 挂件的创建。

首先创建Widgets项目,并拷贝原本的轮播图插件的文件夹.

添加core 跟services  web.framwork的项目引用

我们先保留components 、controllers、models、views、跟 三个文件,logo可以换一个自己的。 plugin.json 必须保留,里面信息先修改

修改 setting 设置

修改plugin

  1. using System.Collections.Generic;
  2. using Nop.Core;
  3. using Nop.Core.Infrastructure;
  4. using Nop.Core.Plugins;
  5. using Nop.Services.Cms;
  6. using Nop.Services.Configuration;
  7. using Nop.Services.Localization;
  8. using Nop.Services.Media;
  9. using Nop.Web.Framework.Infrastructure;
  10.  
  11. namespace Nop.Plugin.Widgets.Modal
  12. {
  13. /// <summary>
  14. /// PLugin
  15. /// </summary>
  16. public class ModalPlugin : BasePlugin, IWidgetPlugin
  17. {
  18. private readonly ILocalizationService _localizationService;
  19. private readonly IPictureService _pictureService;
  20. private readonly ISettingService _settingService;
  21. private readonly IWebHelper _webHelper;
  22. private readonly INopFileProvider _fileProvider;
  23. public ModalPlugin(ILocalizationService localizationService,
  24. IPictureService pictureService,
  25. ISettingService settingService,
  26. IWebHelper webHelper,
  27. INopFileProvider fileProvider)
  28. {
  29. this._localizationService = localizationService;
  30. this._pictureService = pictureService;
  31. this._settingService = settingService;
  32. this._webHelper = webHelper;
  33. this._fileProvider = fileProvider;
  34. }
  35. /// <summary>
  36. /// 获取挂件的区域位置标识(唯一的id)
  37. /// </summary>
  38. /// <returns>Widget zones</returns>
  39. public IList<string> GetWidgetZones()
  40. {
  41. return new List<string> { "home_page_modal"};//PublicWidgetZones.HomePageTop
  42. }
  43.  
  44. /// <summary>
  45. /// 获取配置页面的url
  46. /// </summary>
  47. public override string GetConfigurationPageUrl()
  48. {
  49. return _webHelper.GetStoreLocation() + "Admin/WidgetsModal/Configure";
  50. }
  51.  
  52. /// <summary>
  53. /// 返回要显示的部分视图名称
  54. /// </summary>
  55. /// <param name="widgetZone">Name of the widget zone</param>
  56. /// <returns>View component name</returns>
  57. public string GetWidgetViewComponentName(string widgetZone)
  58. {
  59. return "WidgetsModal";
  60. }
  61.  
  62. /// <summary>
  63. /// Install plugin
  64. /// </summary>
  65. public override void Install()
  66. {
  67. //设置
  68. var settings = new ModalSettings
  69. {
  70. };
  71. _settingService.SaveSetting(settings);
  72. //设置本地资源缓存
  73. //_localizationService.AddOrUpdatePluginLocaleResource("Plugins.Widgets.NivoSlider.Picture1", "Picture 1");
  74.  
  75. base.Install();
  76. }
  77.  
  78. /// <summary>
  79. /// Uninstall plugin
  80. /// </summary>
  81. public override void Uninstall()
  82. {
  83. //settings
  84. _settingService.DeleteSetting<ModalSettings>();
  85. //locales
  86. //_localizationService.DeletePluginLocaleResource("Plugins.Widgets.NivoSlider.Picture1");
  87.  
  88. base.Uninstall();
  89. }
  90. }
  91. }

然后修改对应的部分视图 WidgetsModalViewComponent

  1. namespace Nop.Plugin.Widgets.Modal.Components
  2. {
  3. [ViewComponent(Name = "WidgetsModal")]
  4. public class WidgetsModalViewComponent : NopViewComponent
  5. {
  6. private readonly IStoreContext _storeContext;
  7. private readonly IStaticCacheManager _cacheManager;
  8. private readonly ISettingService _settingService;
  9. private readonly IPictureService _pictureService;
  10.  
  11. public WidgetsModalViewComponent(IStoreContext storeContext,
  12. IStaticCacheManager cacheManager,
  13. ISettingService settingService,
  14. IPictureService pictureService)
  15. {
  16. this._storeContext = storeContext;
  17. this._cacheManager = cacheManager;
  18. this._settingService = settingService;
  19. this._pictureService = pictureService;
  20. }
  21.  
  22. public IViewComponentResult Invoke(string widgetZone, object additionalData)
  23. {
  24. var nivoSliderSettings = _settingService.LoadSetting<ModalSettings>(_storeContext.CurrentStore.Id);
  25.  
  26. var model = new PublicInfoModel
  27. {
  28. Name = "嘿嘿哈哈"
  29. };
  30.  
  31. return View("~/Plugins/Widgets.Modal/Views/PublicInfo.cshtml", model);
  32. }
  33.  
  34. protected string GetPictureUrl(int pictureId)
  35. {
  36. //var cacheKey = string.Format(ModelCacheEventConsumer.PICTURE_URL_MODEL_KEY, pictureId);
  37. //return _cacheManager.Get(cacheKey, () =>
  38. //{
  39. // //little hack here. nulls aren't cacheable so set it to ""
  40. // var url = _pictureService.GetPictureUrl(pictureId, showDefaultPicture: false) ?? "";
  41. // return url;
  42. //});
  43. return "";
  44. }
  45. }
  46. }

  

然后呢 修改下配置文件模型;ConfigurationModel

  1. namespace Nop.Plugin.Widgets.Modal.Models
  2. {
  3. public class ConfigurationModel : BaseNopModel
  4. {
  5. public int ActiveStoreScopeConfiguration { get; set; }
  6.  
  7. }
  8. }

修改views里面的配置前端

  1. @model ZXS.Plugin.Widgets.Modal.Models.ConfigurationModel
  2. @{
  3. Layout = "_ConfigurePlugin";
  4. }
  5.  
  6. @await Component.InvokeAsync("StoreScopeConfiguration")
  7. <form asp-controller="WidgetsNivoSlider" asp-action="Configure" method="post">
  8. <div class="panel-group">
  9. 这里是配置页面
  10.  
  11. <div class="panel panel-default">
  12. <div class="panel-body">
  13. <div class="form-group">
  14. <div class="col-md-9 col-md-offset-3">
  15. <input type="submit" name="save" class="btn bg-blue" value="@T("Admin.Common.Save")" />
  16. </div>
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. </form>

下面是modal的前端

  1. @model ZXS.Plugin.Widgets.Modal.Models.PublicInfoModel
  2. @{
  3. Layout = "";
  4.  
  5. Html.AddScriptParts(ResourceLocation.Footer, "~/Plugins/Widgets.Modal/Content/layui.all.js");
  6. Html.AddCssFileParts("~/Plugins/Widgets.Modal/Content/css/layui.css");
  7. }
  8.  
  9. <div class="slider-wrapper theme-custom">
  10. <div id="nivo-slider" class="nivoSlider">
  11. <button onclick="loading();">点击弹窗</button>
  12. </div>
  13. </div>
  14. <script asp-location="Footer">
  15. //loading层
  16. function loading() {
  17. var index = layer.load(, {
  18. shade: [0.1, '#fff'] //0.1透明度的白色背景
  19. });
  20. }
  21. </script>

修改控制器:WidgetsModalController

  1. using System.Linq;
  2. using Microsoft.AspNetCore.Mvc;
  3. using Nop.Core;
  4. using Nop.Core.Caching;
  5. using ZXS.Plugin.Widgets.Modal.Models;
  6. using Nop.Services.Configuration;
  7. using Nop.Services.Localization;
  8. using Nop.Services.Media;
  9. using Nop.Services.Security;
  10. using Nop.Web.Framework;
  11. using Nop.Web.Framework.Controllers;
  12.  
  13. namespace ZXS.Plugin.Widgets.Modal.Controllers
  14. {
  15. [Area(AreaNames.Admin)]
  16. public class WidgetsModalController : BasePluginController
  17. {
  18. private readonly IStoreContext _storeContext;
  19. private readonly IPermissionService _permissionService;
  20. private readonly IPictureService _pictureService;
  21. private readonly ISettingService _settingService;
  22. private readonly ILocalizationService _localizationService;
  23.  
  24. public WidgetsModalController(IStoreContext storeContext,
  25. IPermissionService permissionService,
  26. IPictureService pictureService,
  27. ISettingService settingService,
  28. ICacheManager cacheManager,
  29. ILocalizationService localizationService)
  30. {
  31. this._storeContext = storeContext;
  32. this._permissionService = permissionService;
  33. this._pictureService = pictureService;
  34. this._settingService = settingService;
  35. this._localizationService = localizationService;
  36. }
  37.  
  38. public IActionResult Configure()
  39. {
  40. //权限验证
  41. //if (!_permissionService.Authorize(StandardPermissionProvider.ManageWidgets))
  42. // return AccessDeniedView();
  43.  
  44. //load settings for a chosen store scope
  45. var storeScope = _storeContext.ActiveStoreScopeConfiguration;
  46. var nivoSliderSettings = _settingService.LoadSetting<ModalSettings>(storeScope);
  47. var model = new ConfigurationModel
  48. {
  49. ActiveStoreScopeConfiguration = storeScope
  50. };
  51.  
  52. if (storeScope > )
  53. {
  54.  
  55. }
  56.  
  57. return View("~/Plugins/Widgets.Modal/Views/Configure.cshtml", model);
  58. }
  59.  
  60. [HttpPost]
  61. public IActionResult Configure(ConfigurationModel model)
  62. {
  63. //now clear settings cache
  64. _settingService.ClearCache();
  65.  
  66. SuccessNotification(_localizationService.GetResource("Admin.Plugins.Saved"));
  67. return Configure();
  68. }
  69. }
  70. }

右键项目生成,看看是不是到web项目的插件文件夹了

记得在商城启用控件,然后在home 首页调用它。效果如下

 
 

第一次写比较乱,有需要源码的留言。我整理下会放出来

 

nopcommerce 4.1 学习2 -插件之挂件的更多相关文章

  1. Elasticsearch学习1--head插件安装

    1.简要介绍 elasticsearch-head是一个elasticsearch的集群管理工具,它是完全由html5编写的独立网页程序. 2.最近尝试学习elasticsearch,查了一些资料,但 ...

  2. 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  3. bootstrap学习笔记 插件概述

    Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...

  4. bootstrap学习——javascript插件篇

    飞近期做的一个小项目须要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有相应插件,下面是学习应用流程: 1.    引入js文件: 能够单个引入相应插件文件,或一次所有引入.飞 ...

  5. mybatis源码学习:插件定义+执行流程责任链

    目录 一.自定义插件流程 二.测试插件 三.源码分析 1.inteceptor在Configuration中的注册 2.基于责任链的设计模式 3.基于动态代理的plugin 4.拦截方法的interc ...

  6. Markdown学习和插件介绍

    markdown能干啥 亲们github上的项目首页的 内容+样式,都是项目中README.md文件控制的.将md风格的代码,转化成html. 而且markdown语法非常简单,5-10分钟即可学会! ...

  7. Maven学习之 插件plugin

    Maven本质上是一个执行插件的框架.插件共分两类:build插件和reporting插件. build插件,会在build阶段被执行,应该配置在POM的<build/>元素中. repo ...

  8. bootstrap学习之三—插件

    一.模态框(modal)插件 1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID" 2)使用一个div实现m ...

  9. 学习chrome 插件 DHC ,http请求传参方法

    DHC的简介 DHC是一款可以帮助用户使用chrome插件模拟HTTP客户端发送测试数据到服务器的谷歌浏览器插件,在chrome中安装了DHC插件以后,就可在服务器端代码初步完成的时候,使用DHC进行 ...

随机推荐

  1. 爬虫出现Forbidden by robots.txt(转载 https://blog.csdn.net/zzk1995/article/details/51628205)

    先说结论,关闭scrapy自带的ROBOTSTXT_OBEY功能,在setting找到这个变量,设置为False即可解决. 使用scrapy爬取淘宝页面的时候,在提交http请求时出现debug信息F ...

  2. Git换行符是如何精确控制的

    Git换行符是如何精确控制的 Checkout Windows-style, commit Unix-style Git will convert LF to CRLF when checking o ...

  3. vue使用桌面Element-UI和移动端MintUI的UI框架

    vue使用桌面Element-UI和移动端MintUI的UI框架 element-uiElement - 网站快速成型工具http://element-cn.eleme.io/#/zh-CN 安装:n ...

  4. 爬起点小说 day02

    总的来说起点小说还是挺好爬的,就是爬取小说的时候太慢了,4000多本小说就爬了2天一夜 首先爬取的是网页的所有类别,并把类别名存入到mongodb中,链接存到redis中: import scrapy ...

  5. Flutter 获取控件尺寸和位置

    1. 插件必须渲染好, final RenderBox box = globalKey.currentContext.findRenderObject(); final size = box.size ...

  6. sublime Text 正则表达式功能使用介绍

    sublime Text 正则表达式功能使用介绍 1.打开sublime Text ,然后按 CTRL+H打开替换面板 2.如下图,勾选正则表达式功能,然后填上正则表达式和替换内容. 3.替换后结果如 ...

  7. Vue基础进阶 之 列表过渡

    在前面的博客我们一直在操作单个元素的过渡,如果是对多个元素过渡,例如列表,这时就要用到<transition-group>这个组件了: 如何使用:将要操作的列表元素放在<transi ...

  8. docker性能测试

    测试环境: 操作系统:CentOS7.openstack nova-docker启动的centos7.openstack环境启动的centos7虚拟机 CPU:Intel(R) Xeon(R) CPU ...

  9. Java this关键字 学习笔记

    前言: 这篇博文就是系统的学习一下Java中的this关键字,本人对this关键字的理解知识简单的停留在对  类的成员变量进行赋值,这次所以决定系统的体会一下this 关键字 转自:https://b ...

  10. Learning-Python【28】:基于TCP协议通信的套接字

    什么是 Socket Socket 是应用层与 TCP/IP 协议通信的中间软件抽象层,它是一组接口.在设计模式中,Socket 其实就是一个门面模式,它把复杂的 TCP/IP 协议族隐藏在 Sock ...