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

# Discount code ブロック

> Aftersell Cart の Discount code ブロック — 買い物客がチェックアウト前にディスカウントコードを入力して適用できるようにします。

> **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 ボタン付きの Discount code ブロック" 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**](/ja/aftersell/cart/summary-block) ブロックに表示されます。

<div id="settings">
  ## 設定
</div>

| 設定              | 制御する対象                 | デフォルト           |
| --------------- | ---------------------- | --------------- |
| **Placeholder** | 入力欄のプレースホルダーテキスト。翻訳可能。 | `Discount code` |
| **Button text** | 適用ボタンのラベル。翻訳可能。        | `Apply`         |

<div id="placement-and-limits">
  ## 配置と制限
</div>

* **領域:** ボディまたは下部。
* **最大数:** カート状態ごとに 1 つ。商品が入ったカートと空のカートで、それぞれ 1 つずつ配置できます。
* **状態:** 商品が入った状態と空の状態の両方。
* デフォルトでは追加されません。ロックされていないため、削除や非表示が可能です。

<div id="custom-template">
  ## カスタムテンプレート
</div>

Code タブから[カスタムテンプレート](/ja/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** セクションで設定します。これらはグローバルデザインの上に重なるブロックごとの上書きで、空欄の場合はグローバル設定にフォールバックします。

デザイン設定とは何か？詳しくはこちら: [デザイン設定](/ja/aftersell/cart/design-settings)。