> ## 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.

# 折扣码区块

> Aftersell Cart 的折扣码区块——让购物者在结账前输入并应用折扣码。

> **Discount code** 区块是一个输入框，购物者可以在购物车中输入并应用促销码，从而在决定结账之前就能看到折扣生效。

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-discount-code-block-input-apply.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=ac5730766b756fdf99c2fc9f65ac202b" alt="购物车抽屉中带有输入框和 Apply 按钮的折扣码区块" width="1314" height="230" data-path="images/aftersell/cart-discount-code-block-input-apply.png" />
</Frame>

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

* 应用时，折扣码会被去除首尾空格、转为大写并提交给 Shopify。由于无论折扣码是否有效 Shopify 都会接受请求，区块随后会重新检查购物车，确认折扣码确实已生效。
  * **有效** → 输入框清空，折扣生效。
  * **无效** → 区块显示 "Invalid discount code."
* 折扣码如何与其他折扣（自动折扣、其他折扣码）叠加完全由 Shopify 处理——区块只是应用折扣码。
* 已应用的折扣码显示在 [**Summary**](/zh/aftersell/cart/summary-block) 区块中，而不是这里。

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

| 设置              | 控制内容          | 默认值             |
| --------------- | ------------- | --------------- |
| **Placeholder** | 输入框的占位文本。可翻译。 | `Discount code` |
| **Button text** | 应用按钮的文字。可翻译。  | `Apply`         |

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

* \*\*区域：\*\*主体或底部。
* \*\*数量上限：\*\*每个购物车状态 1 个——已装满购物车和空购物车各有自己的额度。
* \*\*状态：\*\*已装满和空两种状态均可。
* 默认不添加。未锁定——你可以删除或隐藏它。

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

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

| Prop                   | 类型                        | 用途                              |
| ---------------------- | ------------------------- | ------------------------------- |
| `discountCodeInput`    | `string`                  | 输入框的当前值。                        |
| `placeholder`          | `string`                  | 空输入框中显示的占位文本。                   |
| `buttonText`           | `string`                  | 应用按钮的文字。                        |
| `isValidating`         | `boolean`                 | 提交的折扣码正在检查时为 `true`。据此禁用你的提交控件。 |
| `isInvalid`            | `boolean`                 | 上次提交的折扣码被拒绝时为 `true`。           |
| `setDiscountCodeInput` | `(value: string) => void` | 更新输入框的值。                        |
| `handleSubmit`         | `(event: Event) => void`  | 提交当前折扣码。                        |
| `isLoading`            | `boolean`                 | 购物车仍在进行首次获取时为 `true`。           |

<Warning>
  `setDiscountCodeInput` 和 `handleSubmit` 都要接线。缺少前者，输入框无法输入；缺少后者，折扣码永远不会被应用。
</Warning>

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

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

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