Discount code ブロック

Discount code ブロックは、買い物客がカート内でプロモコードを入力して適用できる入力欄で、チェックアウトに進む前に割引が反映されるのを確認できます。

動作

適用時、コードはトリムされ、大文字に変換されて Shopify に送信されます。Shopify はコードの有効性にかかわらずリクエストを受け付けるため、ブロックはその後カートを再確認し、コードが実際に適用されたかを検証します。
- 有効 → フィールドがクリアされ、割引が適用されます。
- 無効 → ブロックに「Invalid discount code.」と表示されます。
コードが他の割引（自動割引や他のコード）とどう併用されるかは、すべて Shopify が処理します。ブロックはコードを適用するだけです。
適用されたコードは、ここではなく Summary ブロックに表示されます。

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

Code タブからカスタムテンプレートをサポートしており、このブロックの組み込みマークアップをあなたの 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`。

setDiscountCodeInput と handleSubmit の両方を接続してください。前者がないとフィールドに入力できず、後者がないとコードが適用されません。

このブロックのスタイルは、設定パネルの Design セクションで設定します。これらはグローバルデザインの上に重なるブロックごとの上書きで、空欄の場合はグローバル設定にフォールバックします。デザイン設定とは何か？詳しくはこちら: デザイン設定。