本文通过一个商品列表渲染前处理示例，介绍订货通商品列表 JS 插件的创建、配置和效果验证流程。

创建自定义插件

1. 登录纷享销客的后台管理页面。

2. 在左侧导航栏中点击 管理后台 -> 自定义 PWC 插件，进入自定义插件管理页面。

   

3. 点击 新建，填写 名称、支持终端和插件类型，选择 商城站点 JS 插件，点击 下一步，使用 空模板，选择导入代码文件并导入相关代码文件，选择 入口文件，点击 发布。

   

   

index.js 文件：

export default class DetailPlugin {
    constructor(pluginService, pluginParam) {
        this.pluginService = pluginService;
        console.log("列表页插件在这里");
    }

    apply() {
        return [
            {
                event: "dht.site.mall.plugin.init.after",
                functional: this._pluginInitAfter.bind(this),
            },
            {
                event: "dht.site.mall.list.render.before",
                functional: this._listRenderBefore.bind(this),
            },
        ];
    }

    async _pluginInitAfter(plugin, param) {
        console.log("pwc:ListPlugin pluginInitAfter", plugin, param);
        // return Promise.reject();
    }

    async _listRenderBefore(param, plugin) {
        console.log("pwc:_listRenderBefore", plugin, param);
        console.log(param.dataGetter.getState());
        return { pwc: "_listRenderBefore" };
    }

    destroy() {}
}

配置自定义插件

1. 从 订货管理 -> 商城设置 -> 独立站点，点击 WEB 站点 打开。

   

2. 点击商品列表容器外部容器，在右侧的客开插件中选择上一步发布的 JS 插件，然后点击保存。

   

效果体验

进入下游订货通商品列表页面，可以查看插件对商品列表数据、商品卡片、分类组件或列表操作的扩展效果。

事件

事件名称	功能
dht.site.mall.plugin.init.after	该事件用于插件系统初始化完成后执行全局初始化操作
dht.site.mall.list.render.before	该事件用于在列表渲染之前修改请求参数、处理响应数据、替换组件或自定义操作处理
dht.site.mall.list.render.after	该事件用于在列表渲染完成后进行数据埋点、DOM 操作、事件绑定等
dht.site.mall.category.render.before	该事件用于在分类渲染之前自定义分类数据请求或替换分类组件