跳到主要内容

结账页定制

结账页是顾客下单流程的最后一步:顾客在这个页面填联系方式和收货地址、选配送方式、付款。结账页定制就是应用改动这个页面的方式。你的应用在平台预留的插槽上加自己的内容,读写这一单的数据,隐藏被你的内容替换掉的原生模块,而不接管整个页面。做这件事的扩展叫结账扩展。

支持的能力

结账页定制由三部分组成:

  • 扩展点:平台在结账页上预留的位置。extend() 把你的 HTML 渲染到你指定的扩展点上,所以你的内容出现在页面的哪里,由扩展点决定。
  • 隐藏原生模块extension.json 里的 deleteTarget 按名字关掉平台自带的模块,让你的内容替换它们,而不是和它们并排显示。
  • CheckoutAPI:平台在页面加载完成后挂到 window.CheckoutAPI 上的全局对象,用来读写这一单的数据。它按命名空间分组,下面的表是一份速览,完整的方法签名和类型见参考页。
命名空间管什么可以做什么
order顾客下单途中做的选择,以及每次变更之后的价格刷新。增删商品行;在订单上存自己的键值字段;修改交付方式和物流方案;阻止提交,或在提交前先校验。
store订单数据本身:订单、价格、业务类型和结账页布局。读订单和金额;监听每一次重算价;判断当前是哪一种结账页布局。
summary订单摘要那一列:商品行列表、价格明细,以及运费的展示文案。读商品行和价格明细;监听它们的变化;改写摘要最终渲染的商品行列表。
address收货地址和账单地址两张表单、界面据以渲染的 schema,以及顾客保存过的地址。读写这两张地址表单;调整字段的顺序、标签、显隐和锁定;在内置校验之上加规则;读国家列表和地址模板。
coupon顾客能用的优惠:领用的优惠券、手输的优惠码,以及礼品卡。读当前生效的优惠;应用或取消优惠码和礼品卡;改写优惠码与礼品卡 tag 的展示。
user顾客是谁、怎么联系。读登录状态和账号信息;读结账页填写的邮箱和手机号;读营销邮件订阅状态。
payment可选的支付方式。读支付方式列表和当前选中项;发起支付;在支付尝试、支付失败和支付完成时执行回调。
base结账页的基础设施:加载状态、格式化、多语言文案,以及原生模块是否展示。注册自己的多语言文案,并按顾客的语言读回;格式化价格和手机号;查询某个原生模块当前是否在页面上。
utils结账页自带的弹窗和抽屉,外加三个原样透传的 lodash 函数。打开弹窗;打开抽屉;使用平台透传的 lodash 工具函数。
step结账的步骤,以及步骤之间的跳转。读顾客当前所在的步骤;跳到另一个步骤;读步骤导航栏的配置;把顾客送去店铺的其他页面。
config只读的店铺和页面配置:主题、多市场、特性开关,以及当前打开的是哪一个页面。区分当前是结账页还是感谢页;读主题、多市场和店铺配置;判断当前是不是移动端布局。
exception结账过程中抛出的业务异常。检查接口返回里有没有异常码;读取或清空已存的异常;监听提交错误。
pickup门店自提。读自提点列表;读顾客选中的自提点;读取货信息表单和它的校验结果。
extension扩展自身。读某个点位上已注册的内容;等扩展加载完成;查询哪些原生模块被隐藏;拼出动态扩展点的真实名字。
track埋点上报。上报自定义事件;上报结账页各个环节的埋点;读上报用的订单数据;给某个事件附加自定义字段。
utils.eventBus同一个结账页上多个扩展之间的页内事件总线。触发事件;注册监听,也可以只监听一次;取消监听。
注意

名字以 register 开头的方法不是监听器。它交给结账页的是一个返回值会被平台消费的回调,你返回什么,页面就渲染成什么、就按什么行为运行。返回的结构不对——比如一个必须返回列表的回调返回了 undefined——页面去读它上面的属性就会整页崩到报错界面,顾客无法完成下单。

只有 on*add*Cb 方法没有这个风险:它们只接收值,平台不消费它们的返回值。只想观察某个值、不想改动它,用 on* 方法,不要用 register*

读取类方法没有这个风险。get*is*has* 从页面已经持有的数据里取值,同步返回,不发请求,需要多少次就调多少次。

示例

下面两篇的搭法是一样的。第一篇逐步讲清共用的骨架,再给出每一类改动对应的调用,第一次写结账扩展从它开始。第二篇是在这个骨架上做出来的一个完整功能。

也可以直接跳到任意一篇: