跳到主要内容

Checkout Extension Point

Checkout UI Extension：自定义结账页面​

商家可以使用 Checkout UI Extension 来自定义结账页面的外观和行为。目前提供三种自定义方式：

  • 隐藏特定模块：使用 ExtensionTarget 隐藏页面上的预定义元素。
  • 添加自定义内容：在指定的 ExtensionPoint 位置插入个性化内容。
  • 访问结账上下文信息：使用 CheckoutAPI 获取订单、商品、价格、用户和地址等信息，并监听相关状态变化。

使用 Extension Point​

Extension point 允许您在结账页面的指定位置插入自定义内容。

选择 extension point 时，重点是判断自定义内容应该靠近哪个结账模块展示。例如，说明类内容通常放在相关模块前后，促销或提示信息则可以放在摘要、商品列表或支付区域附近。下表列出了当前支持的插入位置，名称中的 RenderBefore 和 RenderAfter 分别表示在目标模块之前或之后渲染。

示例：在导航栏上方添加内容​

import { extend } from 'shoplazza-extension-ui';

extend({
  extensionPoint: 'Checkout::Navigate::RenderBefore',
  component: "<h1>Hello, Shoplazza!</h1>"
});

可用的 extension point 包括：

Extension Point说明
Checkout::RenderBefore页面头部之前
Checkout::RenderAfter页面底部之后
Checkout::Head::RenderAfter页面头部之后
Checkout::FilledInformation::RenderAfter已填写信息卡片之后
Checkout::SpecialInstruction::RenderAfter特殊说明之后
Checkout::Summary::RenderBefore摘要信息之前
Checkout::Navigate::RenderBefore导航栏之前
Checkout::Navigate::RenderAfter导航栏之后
Checkout::ContactInformation::RenderBefore联系信息之前
Checkout::ContactInformation::RenderAfter联系信息之后
Checkout::ShippingLinesTitle::RenderBefore配送列表标题之前
Checkout::ShippingLinesTitle::RenderAfter配送列表标题之后
Checkout::ShippingList::RenderAfter配送列表之后
Checkout::ProductList::RenderBefore商品列表模块之前
Checkout::ProductList::RenderAfter商品列表模块之后
Checkout::Reductions::RenderBefore优惠券/礼品卡之前
Checkout::Reductions::RenderAfter优惠券/礼品卡之后
Checkout::SectionPayment::RenderBefore支付区域之前
Checkout::SectionPayment::RenderAfter支付区域之后
Checkout::ThankyouHeader::RenderBefore感谢页头部之前
Checkout::ThankyouContent::RenderBefore感谢页内容区域之前