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

# Notes ブロック

> Aftersell Cart の Notes ブロック: 買い物客の指示をカートと注文に保存する、折りたたみ可能な注文メモフィールドです。

> **Notes** ブロックは、買い物客がカートを離れずに注文メモや特別な指示（ギフトメッセージ、配送指示など）を追加できる折りたたみ可能なフィールドです。メモはカートに保存され、注文まで引き継がれます。

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-notes-block-collapsible-order-notes-field.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=a54c41fc0b8417e00e8232762ef6a6c2" alt="買い物客が特別な指示を追加できる折りたたみ可能な注文メモフィールドを表示する Notes ブロック" width="854" height="262" data-path="images/aftersell/cart-notes-block-collapsible-order-notes-field.png" />
</Frame>

<div id="behavior">
  ## 動作
</div>

* このフィールドは**折りたたみ可能な開閉式**で、デフォルトでは折りたたまれています。折りたたみは見た目だけの動作で、保存されたメモは引き続き適用されます。メモが保存された状態で折りたたむと、チェックマークが表示され、買い物客はメモが保存されていることが分かります。
* メモは**買い物客がフィールドの外をクリックしたとき**（blur 時）に保存され、保存中 / 保存済み / エラーのステータスフィードバックが表示されます。
* カートのメモが別の場所（`/cart` ページや別のタブ）で変更された場合、フィールドはそれに同期します。ただし、買い物客がすでに入力を始めている場合は同期せず、入力途中のメモが上書きされることはありません。

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

| 設定              | 制御する対象                  | デフォルト                                 |
| --------------- | ----------------------- | ------------------------------------- |
| **Title**       | フィールドのラベル。リッチテキスト、翻訳可能。 | `Order notes`                         |
| **Placeholder** | 入力欄のプレースホルダーテキスト。翻訳可能。  | `Special instructions for your order` |

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

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

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

Code タブから[カスタムテンプレート](/ja/aftersell/cart/custom-templates)をサポートしており、このブロックの組み込みマークアップをあなたの JSX に置き換えます。受け取る props は次のとおりです。

| Prop            | 型                                          | 用途                                                                    |
| --------------- | ------------------------------------------ | --------------------------------------------------------------------- |
| `titleHtml`     | `string`                                   | サニタイズ済みのリッチテキストタイトル HTML。マーチャントがタイトルを空欄にした場合は空。                       |
| `titleText`     | `string`                                   | プレーンテキストのタイトル。textarea の `aria-label` に使い、リッチテキストがない場合は見出しとして使ってください。 |
| `hasTitle`      | `boolean`                                  | いずれかの形式のタイトルが存在するかどうか。見出しとトグルの `aria-label` の表示を制御します。                |
| `placeholder`   | `string`                                   | 空のメモフィールドに表示されるプレースホルダー。                                              |
| `noteInput`     | `string`                                   | 現在のメモのテキスト。                                                           |
| `status`        | `'idle' \| 'saving' \| 'saved' \| 'error'` | 保存のライフサイクル。読み上げ用ステータスのライブリージョンを駆動します。                                 |
| `statusLabel`   | `string`                                   | `status` に対応する、解決済みのライブリージョンのアナウンス。idle のときは空。                        |
| `displayStatus` | `'idle' \| 'saving' \| 'saved' \| 'error'` | アイコン用のステータス。`status` と同様ですが、テキストがある折りたたまれたメモは `saved` として扱われます。       |
| `isExpanded`    | `boolean`                                  | メモフィールドが展開されているかどうか。折りたたみは見た目のみで、メモは常に保持されます。                         |
| `onNoteChange`  | `(value: string) => void`                  | メモのテキストを更新します。textarea の `onInput` などから新しい値を渡して呼び出します。                |
| `onNoteBlur`    | `(event: unknown) => void`                 | メモを保存します。textarea の `onBlur` に直接アタッチしてください。イベントから値を読み取ります。            |
| `onToggle`      | `() => void`                               | 展開と折りたたみの状態を切り替えます。                                                   |

<Warning>
  **メモが保存されるのは `onNoteBlur` の時であり、キー入力のたびではありません。** `onNoteChange` と `onNoteBlur` の両方を接続してください。そうしないと、メモは何のエラーも出さずに一切保存されません。スクリーンリーダーが保存中と保存済みを読み上げられるよう、ステータステキストはライブリージョンに置いてください。
</Warning>

<div id="design">
  ## デザイン
</div>

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

<div id="text">
  ### Text
</div>

Design 内の **Text** セクションでは、2 つの要素のタイポグラフィを制御できます。**Text element** ピッカーを使って、両者を切り替えます。

**Title** — メモフィールドの上に表示されるセクション見出しです。太字は上のリッチテキストエディタ(Settings タブ)で設定します。テキストカラーは Design の Toggle セクションで設定します。

| 設定                 | 制御する対象      | デフォルト  |
| ------------------ | ----------- | ------ |
| **Size**           | フォントサイズ。    | `14px` |
| **Line height**    | 行の高さの倍率。    | `1.4`  |
| **Letter spacing** | 文字間のトラッキング。 | Normal |

**Note field** — 買い物客がメモを入力するテキストエリア内のテキストです。

| 設定                 | 制御する対象                                            | デフォルト           |
| ------------------ | ------------------------------------------------- | --------------- |
| **Text color**     | メモテキストの色。                                         | カートのテキストカラーから継承 |
| **Size**           | フォントサイズ。                                          | `14px`          |
| **Weight**         | フォントの太さ — Light、Regular、Medium、Semibold、または Bold。 | Regular (400)   |
| **Line height**    | 行の高さの倍率。                                          | `1.5`           |
| **Letter spacing** | 文字間のトラッキング。                                       | Normal          |

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