求nopCommerce代码开发插件及页面设置修改的详细教程

一、通过代码修改页面设置 #

1. 定位目标页面视图文件 #

nopCommerce的页面视图分默认视图和主题视图，主题视图会覆盖默认视图：

• 默认视图路径：Presentation/Nop.Web/Views/[控制器名]/[视图名].cshtml（比如首页是Views/Home/Index.cshtml）
• 主题视图路径：Presentation/Nop.Web/Themes/[你的主题名]/Views/[对应目录]/[视图名].cshtml

2. 直接修改视图内容 #

如果只是调整页面布局、添加静态内容，直接编辑cshtml文件即可：

<!-- 示例：在首页添加自定义横幅 -->
<div class="custom-banner text-center py-4">
    <h2>欢迎来到我们的商城</h2>
    <p>全场商品满减活动进行中</p>
</div>

3. 通过页面模型添加动态逻辑 #

如果需要给页面传递动态数据，修改对应模型和控制器：

步骤1：修改页面模型

找到对应模型文件（比如首页模型Presentation/Nop.Web/Models/Home/HomePageModel.cs），添加自定义属性：

public string CustomPromotionText { get; set; }

步骤2：修改控制器赋值

找到对应控制器（比如HomeController.cs）的Index方法，给模型属性赋值：

public virtual IActionResult Index()
{
    var model = new HomePageModel();
    // 这里可以从数据库、配置或服务获取动态数据
    model.CustomPromotionText = "今日特惠：爆款商品5折起";
    return View(model);
}

步骤3：在视图中调用

回到首页视图，添加代码显示动态内容：

<p class="promotion-text text-danger">@Model.CustomPromotionText</p>

4. 修改全局布局（页眉/页脚/导航） #

全局布局文件通常在主题的Views/Shared目录下，比如_Layout.cshtml或_Root.cshtml：

<!-- 示例：修改导航栏，添加自定义菜单 -->
<ul class="nav navbar-nav">
    <li><a href="@Url.RouteUrl("HomePage")">首页</a></li>
    <li><a href="@Url.RouteUrl("Products")">全部商品</a></li>
    <!-- 新增自定义菜单 -->
    <li><a href="/about-us">关于我们</a></li>
</ul>

5. 用视图组件（ViewComponent）修改局部模块 #

如果要复用局部页面逻辑，创建自定义ViewComponent：

步骤1：创建ViewComponent类

在Presentation/Nop.Web/ViewComponents目录下新建CustomCartViewComponent.cs：

using Nop.Core;
using Nop.Services.ShoppingCart;
using Nop.Web.Framework.Components;

public class CustomCartViewComponent : NopViewComponent
{
    private readonly IShoppingCartService _shoppingCartService;

    public CustomCartViewComponent(IShoppingCartService shoppingCartService)
    {
        _shoppingCartService = shoppingCartService;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        var cartItems = await _shoppingCartService.GetShoppingCartAsync();
        var itemCount = cartItems.Sum(item => item.Quantity);
        return View(itemCount);
    }
}

步骤2：创建ViewComponent视图

在Presentation/Nop.Web/Views/Shared/Components/CustomCart目录下新建Default.cshtml：

@model int
<div class="custom-cart-icon">
    <i class="fa fa-shopping-cart"></i>
    <span class="cart-count">@Model</span>
</div>

步骤3：在布局中调用ViewComponent

打开布局文件，添加调用代码：

@await Component.InvokeAsync("CustomCart")

二、创建nopCommerce插件 #

1. 新建插件类库项目 #

在nopCommerce解决方案中右键→添加→新项目，选择“类库（.NET Core）”，命名为Nop.Plugin.[你的插件名]（比如Nop.Plugin.PromotionBanner），目标框架需与nopCommerce版本一致（比如.NET 6.0）。

2. 添加依赖包 #

右键插件项目→管理NuGet程序包，搜索并安装与nopCommerce版本完全匹配的Nop.Core、Nop.Services、Nop.Web.Framework。

3. 编写插件核心类 #

在项目根目录新建[你的插件名]Plugin.cs，继承BasePlugin并实现对应接口（比如IMiscPlugin）：

using Nop.Core;
using Nop.Services.Common;
using Nop.Services.Plugins;

namespace Nop.Plugin.PromotionBanner
{
    public class PromotionBannerPlugin : BasePlugin, IMiscPlugin
    {
        private readonly IWebHelper _webHelper;

        public PromotionBannerPlugin(IWebHelper webHelper)
        {
            _webHelper = webHelper;
        }

        // 返回插件配置页面URL
        public override string GetConfigurationPageUrl()
        {
            return $"{_webHelper.GetStoreLocation()}Admin/PromotionBanner/Configure";
        }

        // 插件安装逻辑（比如创建数据库表、初始化设置）
        public override void Install()
        {
            // 这里可以添加自定义安装操作，比如创建设置
            base.Install();
        }

        // 插件卸载逻辑（比如清理数据、删除设置）
        public override void Uninstall()
        {
            // 这里可以添加自定义卸载操作
            base.Uninstall();
        }
    }
}

4. 创建插件设置 #

步骤1：定义设置实体

新建PromotionBannerSettings.cs，实现ISettings接口：

using Nop.Core.Configuration;

namespace Nop.Plugin.PromotionBanner
{
    public class PromotionBannerSettings : ISettings
    {
        // 横幅标题
        public string BannerTitle { get; set; } = string.Empty;
        // 是否显示横幅
        public bool ShowBanner { get; set; } = true;
    }
}

步骤2：创建配置模型

新建Models/ConfigurationModel.cs：

using Nop.Web.Framework.Models;
using Nop.Web.Framework.Mvc.ModelBinding;

namespace Nop.Plugin.PromotionBanner.Models
{
    public class ConfigurationModel : BaseNopModel
    {
        [NopResourceDisplayName("Plugins.PromotionBanner.BannerTitle")]
        public string BannerTitle { get; set; }

        [NopResourceDisplayName("Plugins.PromotionBanner.ShowBanner")]
        public bool ShowBanner { get; set; }
    }
}

5. 编写管理控制器 #

新建Controllers/Admin/PromotionBannerController.cs：

using Microsoft.AspNetCore.Mvc;
using Nop.Services.Configuration;
using Nop.Web.Framework.Controllers;
using Nop.Web.Framework.Mvc.Filters;
using Nop.Plugin.PromotionBanner.Models;

namespace Nop.Plugin.PromotionBanner.Controllers.Admin
{
    [Area("Admin")]
    [AuthorizeAdmin]
    [AutoValidateAntiforgeryToken]
    public class PromotionBannerController : BasePluginController
    {
        private readonly ISettingService _settingService;

        public PromotionBannerController(ISettingService settingService)
        {
            _settingService = settingService;
        }

        // 显示配置页面
        public IActionResult Configure()
        {
            var settings = _settingService.LoadSetting<PromotionBannerSettings>();
            var model = new ConfigurationModel
            {
                BannerTitle = settings.BannerTitle,
                ShowBanner = settings.ShowBanner
            };
            return View("~/Plugins/PromotionBanner/Views/Admin/Configure.cshtml", model);
        }

        // 保存配置
        [HttpPost]
        public IActionResult Configure(ConfigurationModel model)
        {
            if (!ModelState.IsValid)
                return Configure();

            var settings = _settingService.LoadSetting<PromotionBannerSettings>();
            settings.BannerTitle = model.BannerTitle;
            settings.ShowBanner = model.ShowBanner;

            _settingService.SaveSetting(settings);

            SuccessNotification("配置已保存");
            return Configure();
        }
    }
}

6. 添加配置视图 #

在项目中创建Views/Admin/Configure.cshtml：

@model Nop.Plugin.PromotionBanner.Models.ConfigurationModel
@{
    Layout = "_ConfigurePlugin";
}

<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">横幅插件配置</h4>
        </div>
        <div class="panel-body">
            @using (Html.BeginForm())
            {
                @Html.AntiForgeryToken()

                <div class="form-group">
                    @Html.LabelFor(model => model.BannerTitle, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.BannerTitle, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.BannerTitle, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.ShowBanner, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.CheckBoxFor(model => model.ShowBanner, new { @class = "form-check-input" })
                        @Html.ValidationMessageFor(model => model.ShowBanner, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <button type="submit" class="btn btn-primary">保存配置</button>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

7. 配置项目输出路径 #

编辑插件项目的.csproj文件，设置输出目录到nopCommerce的插件文件夹：

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <OutputPath>..\..\Presentation\Nop.Web\Plugins\PromotionBanner</OutputPath>
    <CopyLocalLockFileAssemblies>true</CopyLocalLockFileAssemblies>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Nop.Core" Version="4.50.1" /> <!-- 替换为你的nop版本 -->
    <PackageReference Include="Nop.Services" Version="4.50.1" />
    <PackageReference Include="Nop.Web.Framework" Version="4.50.1" />
  </ItemGroup>
</Project>

8. 编译并启用插件 #

• 编译插件项目，文件会自动输出到nopCommerce的插件目录
• 登录nopCommerce后台，进入配置→本地插件
• 找到你的插件，点击「安装」，安装完成后点击「启用」，即可进入配置页面调整参数

内容的提问来源于stack exchange，提问作者Madhuri Pande