Skip to main content
Checkout button 区块是购物车底部的主要行动号召按钮,将顾客引导至结账页面,为他们提供一条从购物车到结账的清晰、醒目的路径。它是必需的区块。

行为

  • 按钮会解析出一个本地化的、与市场匹配的结账 URL,使顾客进入正确市场的结账页面。如果无法解析,则回退到标准的 /checkout 链接。
  • 启用 Go to cart page instead of checkout(跳转到购物车页面而非结账)后,按钮改为链接到 /cart
  • 点击通过 JavaScript 进行导航,因此主题自身的购物车处理逻辑无法拦截它,同时仍然尊重新标签页打开的意图(Cmd/Ctrl 点击、中键点击)。
  • 点击会触发 SDK 的 checkout 事件,你可以订阅该事件。

设置

位置与限制

  • 区域: 底部。
  • 最大数量: 每种购物车状态 1 个。
  • 状态: 仅限有商品的购物车。
  • 锁定且默认添加。 Checkout button 无法移除或隐藏,只能在底部区域内重新定位。

自定义模板

支持通过其 Code 标签页使用自定义模板,用你的 JSX 替换此区块的内置标记。以下是它接收的 props。
自定义结账按钮会失去结账跟踪。 内置按钮附带一个点击处理函数,它会触发 SDK 的 checkout 事件并为购物车分析记录转化。该处理函数不会传递给自定义模板,因此仅通过 href 导航会同时跳过这两者。如果你需要该事件,请在导航前自行在 onClick 中触发它。归因报告仍无法通过这种方式恢复,因此除非你确实需要不同的标记,否则请优先使用设计设置自定义 CSS 来重新设计内置按钮的样式。
请按原样渲染 href,不要为其设置默认值。没有 href<a> 是不可点击的,这正是编辑器中的正确行为。

设计

通过设置面板中的 Design(设计)部分为此区块设置样式。这些是按区块的覆盖设置,叠加在你的全局设计之上,留空时回退到全局设计。 什么是设计设置?在此了解更多:设计设置