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

# カートはどのように機能しますか？

> Aftersell Cart の構造: 商品が入った状態と空の状態、Header/Body/Footer のセクション、それぞれにブロックがどう収まるか。

Aftersell における**カート**とは、設定可能なカートドロワー体験です。2 つの**状態**でデザインし、3 つの**セクション**にレイアウトを配置し、それらのセクションを**ブロック**で埋めていきます。

<div id="cart-states">
  ## カートの状態
</div>

すべてのカートには 2 つの独立したレイアウトがあり、エディタで切り替えられます:

* **商品が入ったカート**: カートにアイテムがあるときに買い物客が見るもの。
* **空のカート**: カートにアイテムがないときに買い物客が見るもの。

一部のブロックは片方の状態にのみ属します:

* [**Empty cart**](/ja/aftersell/cart/empty-cart-block) ブロックは**空の**状態にのみ表示されます。
* [**Cart items**](/ja/aftersell/cart/cart-items-block)、[**Checkout button**](/ja/aftersell/cart/checkout-button-block)、[**Notes**](/ja/aftersell/cart/notes-block)、[**Express payments**](/ja/aftersell/cart/express-payments-block)、[**Shipping protection**](/ja/aftersell/cart/shipping-protection-block) は**商品が入った**状態にのみ表示されます。

その他のブロック（Header、Banner、Rewards、Image、Custom code など）はどちらの状態にも配置できます。新しいカートは、空の状態では **Header + Empty cart**、商品が入った状態では **Header → Banner → Cart items → Summary → Checkout button** から始まります。

<Info>
  **空のカート状態**とは、空のレイアウト全体のことです。**Empty cart ブロック**は、そのレイアウト内の 1 つのブロックで、通常はメッセージと「買い物を続ける」ボタンです。名前は似ていますが、状態にはそのブロック以外のものも配置できます。
</Info>

<div id="sections">
  ## セクション
</div>

各状態は **Header**、**Body**、**Footer** の 3 つのセクションに分かれています。セクションは、ブロックの位置とスクロールの仕方を制御します:

* **Header**: ドロワーの上部に固定。ボディがスクロールしても表示され続けます。
* **Body**: スクロール可能な中央部。ここのブロックはコンテンツと一緒に動きます。ロックされたブロック: **Cart items**。
* **Footer**: ドロワーの下部に固定。ロックされたブロック: **Checkout button**。

ブロックを追加または移動すると、そのセクションがスクロール動作を決めます。すべてのブロックがすべてのセクションで利用できるわけではありません。[ブロックはどのように機能しますか？](/ja/aftersell/cart/blocks-overview#blocks-available-in-each-section)を参照してください。

<div id="blocks">
  ## ブロック
</div>

**ブロック**とは、ドロワーを構成する設定可能なパーツ（商品リスト、アップセルオファー、チェックアウトボタンなど）です。セクション内に積み重ね、並べ替え、スタイルを当てられます。追加方法、制限、サブブロック、条件の仕組みについては、[ブロックはどのように機能しますか？](/ja/aftersell/cart/blocks-overview)を参照してください。

<div id="next-steps">
  ## 次のステップ
</div>

* [カートを作成する](/ja/aftersell/cart/creating-carts)
* [カートをプレビューする](/ja/aftersell/cart/previewing-carts)
* [複数のカートを管理する](/ja/aftersell/cart/having-multiple-carts)