如何在NopCommerce中创建自定义商品详情页及配置RouteProvice与页面

嘿，我来一步步带你搞定在NopCommerce里创建自定义商品详情页的事儿，包括路由配置和视图页面，全程都是实操步骤，跟着走就行！

NopCommerce的路由都是通过IRouteProvider接口来注册的，咱得新建一个类继承系统的BaseRouteProvider，实现这个接口：

using Nop.Web.Framework.Mvc.Routing;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Routing;

namespace Nop.Plugin.MyCustomProductPage.Infrastructure
{
    public class CustomProductRouteProvider : BaseRouteProvider, IRouteProvider
    {
        public void RegisterRoutes(IEndpointRouteBuilder endpointRouteBuilder)
        {
            // 注册自定义商品详情页的路由规则
            endpointRouteBuilder.MapControllerRoute(
                name: "CustomProductDetails", // 路由名称，要唯一
                pattern: "custom-product/{productId:int}", // 访问路径，这里定义成custom-product/商品ID
                defaults: new { controller = "CustomProduct", action = "Details" } // 对应处理的控制器和方法
            );
        }

        // 路由优先级：数值越小优先级越高，咱设10，比系统默认商品路由（优先级0）低，避免冲突
        public int Priority => 10;
    }
}

接下来要写个控制器来处理这个路由的请求，从数据库拿商品数据，传给视图。记得用依赖注入获取商品服务：

using Microsoft.AspNetCore.Mvc;
using Nop.Services.Catalog;
using Nop.Web.Framework.Controllers;

namespace Nop.Plugin.MyCustomProductPage.Controllers
{
    public class CustomProductController : BasePublicController
    {
        private readonly IProductService _productService;

        // 构造函数注入商品服务，Nop会自动处理依赖
        public CustomProductController(IProductService productService)
        {
            _productService = productService;
        }

        public async Task<IActionResult> Details(int productId)
        {
            // 根据ID获取商品，顺便判断是否上架
            var product = await _productService.GetProductByIdAsync(productId);
            if (product == null || !product.Published)
            {
                return NotFound(); // 商品不存在或未上架，返回404
            }

            // 指定视图路径，这里假设是插件里的视图，要写全路径
            return View("~/Plugins/MyCustomProductPage/Views/CustomProduct/Details.cshtml", product);
        }
    }
}

现在来做前端部分，在插件的Views/CustomProduct目录下新建Details.cshtml，写自己想要的页面结构：

@model Nop.Core.Domain.Catalog.Product

@{
    // 可以用系统默认的单栏布局，也可以自定义布局文件
    Layout = "_ColumnsOne";
}

<div class="custom-product-container">
    <h1 class="product-title">@Model.Name</h1>
    
    <!-- 商品主图 -->
    <div class="product-main-image">
        <img src="@Url.Content(Model.PictureModel?.DefaultPictureModel?.ImageUrl)" 
             alt="@Model.Name" 
             class="img-fluid" />
    </div>

    <!-- 商品价格 -->
    <div class="product-price-section">
        <span class="price-tag">@Model.Price.ToString("C")</span>
    </div>

    <!-- 商品描述 -->
    <div class="product-description">
        @Html.Raw(Model.Description) <!-- 用Html.Raw渲染富文本描述 -->
    </div>

    <!-- 这里可以加任何自定义内容：比如规格参数、库存状态、加入购物车按钮等等 -->
    <div class="custom-actions">
        <button class="btn btn-primary add-to-cart">加入购物车</button>
    </div>
</div>

最后一步，在插件的DependencyRegistrar里注册刚才写的路由提供者，这样Nop启动时才会加载它：

using Autofac;
using Nop.Core.Configuration;
using Nop.Core.Infrastructure;
using Nop.Core.Infrastructure.DependencyManagement;
using Nop.Plugin.MyCustomProductPage.Infrastructure;
using Nop.Web.Framework.Mvc.Routing;

namespace Nop.Plugin.MyCustomProductPage.Infrastructure
{
    public class DependencyRegistrar : IDependencyRegistrar
    {
        public void Register(ContainerBuilder builder, ITypeFinder typeFinder, NopConfig config)
        {
            // 把自定义路由提供者注册到容器
            builder.RegisterType<CustomProductRouteProvider>().As<IRouteProvider>().InstancePerLifetimeScope();
        }

        // 注册优先级，设1就行，确保不会被其他注册覆盖
        public int Order => 1;
    }
}

把插件部署到NopCommerce里，启动网站，访问/custom-product/1（把1换成你系统里存在的商品ID），就能看到咱自己做的商品详情页啦！

如果想让商品列表里的链接指向这个自定义页面，可以在列表视图里用路由名称生成链接：

@Url.RouteUrl("CustomProductDetails", new { productId = product.Id })

额外小贴士 #

• 要是想做SEO友好的URL，可以把路由pattern改成custom-product/{productId}/{seName}，然后在控制器里添加seName参数，验证商品别名是否匹配
• 如果是在主题里创建自定义页面，视图路径要改成主题的目录，比如~/Themes/YourTheme/Views/CustomProduct/Details.cshtml
• 可以自定义视图模型，把商品相关的额外数据（比如库存、规格）打包传进去，比直接用Product实体更灵活

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