> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout button 区块

> Aftersell Cart 的 Checkout button 区块：将顾客引导至结账的必需底部 CTA。

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

<div id="behavior">
  ## 行为
</div>

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

<div id="settings">
  ## 设置
</div>

| 设置                                                    | 控制内容                                 | 默认值                          |
| ----------------------------------------------------- | ------------------------------------ | ---------------------------- |
| **Button label（按钮标签）**                                | 在文本区域中输入的纯文本标签。支持 `{{total_price}}`。 | `Checkout • {{total_price}}` |
| **Go to cart page instead of checkout（跳转到购物车页面而非结账）** | 将顾客引导至你的 `/cart` 页面，而不是直接进入结账。       | 关                            |

<div id="placement-and-limits">
  ## 位置与限制
</div>

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

<div id="custom-template">
  ## 自定义模板
</div>

支持通过其 Code 标签页使用[自定义模板](/zh/aftersell/cart/custom-templates)，用你的 JSX 替换此区块的内置标记。以下是它接收的 props。

| Prop        | 类型                    | 用途                                             |
| ----------- | --------------------- | ---------------------------------------------- |
| `label`     | `string`              | 经过净化的 HTML 格式按钮标签，其中的 `{{total_price}}` 已解析。   |
| `href`      | `string \| undefined` | 结账 URL。在编辑器预览中为 `undefined`，因为没有可导航的目标。        |
| `isLoading` | `boolean`             | 此处始终为 `false`：区块在加载期间渲染其内置骨架屏，仅在购物车就绪后才调用你的模板。 |

<Warning>
  **自定义结账按钮会失去结账跟踪。** 内置按钮附带一个点击处理函数，它会触发 SDK 的 [`checkout` 事件](/zh/aftersell/cart/sdk-events#checkout)并为[购物车分析](/zh/aftersell/cart/analytics)记录转化。该处理函数不会传递给自定义模板，因此仅通过 `href` 导航会同时跳过这两者。

  如果你需要该事件，请在导航前自行在 `onClick` 中触发它。归因报告仍无法通过这种方式恢复，因此除非你确实需要不同的标记，否则请优先使用[设计设置](/zh/aftersell/cart/design-settings)或[自定义 CSS](/zh/aftersell/cart/custom-css) 来重新设计内置按钮的样式。
</Warning>

请按原样渲染 `href`，不要为其设置默认值。没有 `href` 的 `<a>` 是不可点击的，这正是编辑器中的正确行为。

<div id="design">
  ## 设计
</div>

通过设置面板中的 **Design**（设计）部分为此区块设置样式。这些是按区块的覆盖设置，叠加在你的全局设计之上，留空时回退到全局设计。

什么是设计设置？在此了解更多：[设计设置](/zh/aftersell/cart/design-settings)。