配置广告Banner与商品卡片

配置广告与商品卡片，提升商城运营效率。

概述

围绕“配置广告 Banner 与商品卡片”完成必要设置，并通过测试账号验证生效范围。

开始之前

[!IMPORTANT]

• 适用范围：订货通专业版。
• 角色权限：使用具备订货通管理权限的管理员账号。
• 前置配置：准备测试客户、商品和价格数据。

操作步骤与说明

商城广告 Banner

首页广告 Banner

Web 和移动端的广告 banner 可直接跳转至需要进行运营和推广的产品、商品、新促销的链接，以促销为例效果如下：

banner 组件配置

不管是网页端，还是移动端，都需要在渠道门户中配置广告 banner 组件。

维护广告 banner 数据

新建广告

新建广告，上传图片，选择跳转类型、适用终端、上线状态、适用客户等，跳转类型与适用终端有关联，说明如下：

广告跳转类型支持内部数据、外部数据和自定义页面

• 内部数据：可选择内部对象（包含预设的商品、促销等对象，也包括自定义对象），支持网页端、移动端
• 外部数据：可输入外部链接，默认仅支持网页端（移动端需要做域名授权，需要申请研发支持）
• 自定义页面：可关联互联的自定义页面，默认仅支持网页端（移动端为原生微信小程序，不支持动态扩展，可申请研发支持）

在适用客户组件中，可按条件指定范围，也可以直接选择单个或多个客户名称。

广告弹窗

对于终端的广告内容，可设置弹窗效果。支持设置弹窗。设置后，在订货通 web、移动端，会弹窗显示

商城列表卡片个性化

商城列表支持通过 dht.shopmall.list.render.before 钩子替换卡片组件。自定义卡片沿用标准列表的数据结构和事件协议。

接口参数

注册卡片组件

import Card from './card';

export default class Plugin {
  apply() {
    return [
      {
        event: 'dht.shopmall.list.render.before',
        functional: this.shopmallRenderBefore.bind(this)
      }
    ];
  }

  shopmallRenderBefore() {
    return Promise.resolve({
      shoppingCard: Card
    });
  }
}

自定义卡片通过 on-action 事件返回操作类型和商品数据。操作类型包括加入购物车、查看详情、收藏、选择规格、选择配置和选择属性。

配置入口

在商品或产品的列表页布局中，配置自定义卡片插件。

预期结果与验证

• 重新打开配置页，确认“配置广告 Banner 与商品卡片”涉及的开关、范围或规则保持为保存值。
• 使用测试账号执行受影响流程，确认页面入口、数据范围和操作权限与本次配置一致。
• 检查本次配置影响的业务记录，确认其按正文规则生成或流转。

常见问题与故障排除

• 正式使用前，请先用测试数据验证。
• 功能不可见时，请检查版本、权限和数据范围。

撤销或回退

1. 返回本文所述的配置入口。
2. 恢复变更前的开关、布局或规则值。
3. 使用测试账号重新验证受影响流程。

相关主题

• 配置订货商城与业务参数
• 配置 Web-App 站点门户
• 装修渠道门户