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

# Empty cart ブロック

> Empty cart ブロック — 買い物客のカートにアイテムがないときに表示されるコンテンツです。

> **Empty cart** ブロックは、カートにアイテムがないときに表示されるコンテンツで、通常はメッセージと「買い物を続ける」ボタンです。これにより、空のドロワーでも有用でブランドに沿ったものになります。カートの**空の状態**でのみ表示され、他のブロック（Header など）も同じ状態で並べて配置できます。

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/empty-cart-block-state-message-continue-shopping.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=1a05453c64539aef2bda4229467e63ea" alt="空の状態のメッセージと買い物を続けるコールトゥアクションを表示する Empty cart ブロック" width="836" height="394" data-path="images/aftersell/empty-cart-block-state-message-continue-shopping.png" />
</Frame>

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

* このブロックはカートが空のときにのみ表示されます。買い物客がアイテムを追加するとすぐに、カートは商品が入った状態に切り替わり、このブロックはそのレイアウトに置き換わります。
* エディタ内では CTA リンクは無効化されており、デザイン中にクリックしてもページ遷移しません。

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

| 設定                   | 制御する対象                                                                                             | デフォルト                 |
| -------------------- | -------------------------------------------------------------------------------------------------- | --------------------- |
| **Empty cart text**  | 空の状態のメッセージ。リッチテキスト。                                                                                | `Your cart is empty.` |
| **Button text**      | ボタンのラベル。インライン HTML の書式に対応しています。                                                                    | `Continue shopping`   |
| **Button link**      | ボタンのリンク先。                                                                                          | `/collections/all`    |
| **Background color** | ブロックの背景色。空欄の場合は透明のままで、カート自体の背景が透けて見えます。                                                            | `transparent`         |
| **Alignment**        | ブロックのテキストとボタンの揃え方。**Left** または **Center**。                                                         | Center                |
| **Fit to height**    | ブロックがカート本体の残りの高さいっぱいに広がり垂直方向に中央揃えされるか、コンテンツの高さに収まるか。**Fill remaining height** または **Fit content**。 | Fill remaining height |

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

* **領域:** ボディ。
* **最大数:** カート状態ごとに 1 つ。
* **状態:** 空のカートのみ。このブロックは商品が入った状態では表示されません。新しいカートには、デフォルトで空の状態にも Header が含まれます。[カートはどのように機能しますか？](/ja/aftersell/cart/how-carts-work)を参照してください。
* 新しいカートにはデフォルトで追加されます。ロックされていないため、削除や非表示が可能です。

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

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

| Prop      | 型        | 用途                                                              |
| --------- | -------- | --------------------------------------------------------------- |
| `text`    | `string` | サニタイズ済み HTML としての空カートメッセージ。                                     |
| `cta`     | `string` | プレーンテキストのコールトゥアクションボタンのラベル。                                     |
| `ctaHtml` | `string` | サニタイズ済み HTML としてのコールトゥアクションボタンのラベル — デフォルトのマークアップがレンダリングする内容です。 |
| `href`    | `string` | コールトゥアクションのリンク先。                                                |

<Note>
  このブロックはカートが空のときにのみレンダリングされるため、props にカートオブジェクトはありません。`href` はスクリプトによるナビゲーションではなく実際の `<a>` としてレンダリングし、`text` はすでにサニタイズ済みの HTML なので `dangerouslySetInnerHTML` でレンダリングしてください。
</Note>

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

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

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

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

**Message** — 空の状態のメッセージテキストです。太字とテキストカラーは、上のリッチテキストエディタ(Settings タブ)で設定するもので、ここでは設定しません。

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

**Button label** — 「買い物を続ける」ボタン上のテキストです。テキストカラーは Design の Button セクションで設定します。

| 設定                 | 制御する対象                                            | デフォルト          |
| ------------------ | ------------------------------------------------- | -------------- |
| **Size**           | フォントサイズ。                                          | `15px`         |
| **Weight**         | フォントの太さ — Light、Regular、Medium、Semibold、または Bold。 | Semibold (600) |
| **Line height**    | 行の高さの倍率。                                          | `1.47`         |
| **Letter spacing** | 文字間のトラッキング。                                       | Normal         |

<div id="button">
  ### ボタン
</div>

**Button** セクションでは、グローバルなボタンデザインとは独立して CTA ボタンにスタイルを当てられます。**Default / Hover** の切り替えで 2 つの状態を切り替えます。

| 設定                   | 状態      | 制御する対象                                      |
| -------------------- | ------- | ------------------------------------------- |
| **Background color** | Default | 通常状態のボタンの塗り。グローバルなボタン背景色にフォールバックします。        |
| **Text color**       | Default | 通常状態のボタンラベルの色。グローバルなボタンテキスト色にフォールバックします。    |
| **Background color** | Hover   | 顧客がカーソルを合わせたときのボタンの塗り。デフォルトの背景色にフォールバックします。 |
| **Text color**       | Hover   | ホバー時のボタンラベルの色。デフォルトのテキスト色にフォールバックします。       |
| **Border color**     | —       | ボタンの枠線の色（両方の状態）。グローバルなボタン枠線色にフォールバックします。    |
| **Border radius**    | —       | ボタンの角丸。グローバルなボタン角丸にフォールバックします。              |

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