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

# Header ブロック

> Aftersell Cart の Header ブロック: ドロワーの上部に固定されるタイトル、アイテム数、ロゴ、閉じるコントロール。

> **Header** ブロックは、カートドロワーの上部に固定される領域で、ドロワーに明確なタイトルと分かりやすい閉じる手段を提供します。**Title**、**Logo**、**Close button** を左と右のセクションに割り当てることで、レイアウトを制御できます。Header は上部に固定されているため、カートの残りの部分がスクロールしても表示され続けます。

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-header-block-title-item-count.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e60cc6dbfe8728eb818d20cf5aa8ae5c" alt="ドロワー上部にカートタイトル、アイテム数、閉じるコントロールを表示する Header ブロック" width="689" height="91" data-path="images/aftersell/cart-header-block-title-item-count.png" />
</Frame>

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

* Header はドロワーの上部に固定され、カート本体と一緒にスクロールしません。
* 閉じるコントロールは常に利用でき、ドロワーを閉じます。

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

| 設定        | 制御する対象                                                                                                                            | デフォルト                        |
| --------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| **Left**  | 左セクションにレンダリングされる要素(`Title`、`Logo`、`Close button`)と、その順序。                                                                          | `Title`                      |
| **Right** | 右セクションにレンダリングされる要素(`Title`、`Logo`、`Close button`)と、その順序。                                                                          | `Close button`               |
| **Title** | カートのリッチテキスト見出し。`{{cart_item_count}}` と `{{total_price}}` のトークンをサポートします。                                                           | `Cart • {{cart_item_count}}` |
| **Image** | カスタムテンプレートに `props.logoUrl` として公開される画像。このフィールドはカスタムテンプレートが有効な間のみ表示され、組み込みのヘッダーがこれをレンダリングすることはありません。サポート形式: WebP、JPEG、PNG、GIF、SVG。 | なし                           |

タイトルは翻訳可能です。タイトルが空になった場合（たとえば未設定の翻訳）、カートは **Cart** の表示にフォールバックするため、ヘッダーが空白になることはありません。
要素は選択した順に左から右へと表示され、各要素は一度に 1 つのセクションにのみ割り当てられます。

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

* **領域:** 上部のみ。
* **最大数:** カート状態ごとに 1 つ。
* **状態:** 商品が入ったカートと空のカート（各状態がそれぞれ独自の Header インスタンスを持ちます）。
* 新しいカートには両方の状態でデフォルトで追加されます。ロックされていないため、削除したり、目のトグルで非表示にしたりできます。

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

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

<Note>
  `logoUrl` は、組み込みに対応するものがない唯一の prop です。Header にアップロードした画像は**カスタムテンプレートによってのみレンダリングされます**。マーチャントがロゴを設定したのに表示されない場合、これが理由です。
</Note>

| Prop           | 型                                         | 用途                                                                           |
| -------------- | ----------------------------------------- | ---------------------------------------------------------------------------- |
| `title`        | `string`                                  | サニタイズ済み HTML としてのヘッダータイトル。`{{cart_item_count}}` と `{{total_price}}` は解決済みです。 |
| `logoUrl`      | `string \| null`                          | アップロードされたヘッダー画像。マーチャントが設定していない場合は `null`。                                    |
| `leftSection`  | `('title' \| 'logo' \| 'close_button')[]` | 左セクション用に選択された要素。レンダリング順に並びます。                                                |
| `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | 右セクション用に選択された要素。レンダリング順に並びます。                                                |
| `itemCount`    | `number`                                  | 買い物客が見ているカート内のアイテム数。                                                         |
| `onClose`      | `() => void`                              | ドロワーを閉じます。閉じるコントロールに接続してください。                                                |
| `isLoading`    | `boolean`                                 | ここでは常に `false` です。ブロックは読み込み中に組み込みのスケルトンをレンダリングし、カートの準備が整ってからテンプレートを呼び出します。   |

<Warning>
  `onClose` を何かに接続しなくても、買い物客はオーバーレイのクリックや Escape キーでドロワーを閉じられますが、ヘッダーには閉じるボタンがなくなります。必ず含めてください。
</Warning>

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

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

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

Design 内の **Text** セクションでは、カートタイトルのタイポグラフィを制御できます。太字とテキストカラーは、上のリッチテキストエディタ(Settings タブ)で設定するもので、ここでは設定しません。

| 設定                 | 制御する対象          | デフォルト   |
| ------------------ | --------------- | ------- |
| **Font**           | タイトルのフォントファミリー。 | テーマから継承 |
| **Size**           | フォントサイズ。        | `18px`  |
| **Line height**    | 行の高さの倍率。        | `1.3`   |
| **Letter spacing** | 文字間のトラッキング。     | Normal  |

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