> ## 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 中的**购物车**是一个可配置的购物车抽屉体验。你在两个**状态**中设计它，在三个**部分**中布局它，并用**区块**填充这些部分。

<div id="cart-states">
  ## 购物车状态
</div>

每个购物车有两个独立的布局。你在编辑器中切换它们：

* **已装满购物车**：购物车有商品时购物者看到的内容。
* **空购物车**：购物车没有商品时购物者看到的内容。

有些区块只属于一个状态：

* [**Empty cart**](/zh/aftersell/cart/empty-cart-block) 区块仅出现在**空**状态。
* [**Cart items**](/zh/aftersell/cart/cart-items-block)、[**Checkout button**](/zh/aftersell/cart/checkout-button-block)、[**Notes**](/zh/aftersell/cart/notes-block)、[**Express payments**](/zh/aftersell/cart/express-payments-block) 和 [**Shipping protection**](/zh/aftersell/cart/shipping-protection-block) 仅出现在**已装满**状态。

其他区块（Header、Banner、Rewards、Image、Custom code 等）可以在任一状态中使用。新购物车在空状态中初始为 **Header + Empty cart**，在已装满状态中初始为 **Header → Banner → Cart items → Summary → Checkout button**。

<Info>
  **空购物车状态**是整个空布局。**Empty cart 区块**是该布局中的一个区块，通常是消息和继续购物按钮。两者听起来相似，但该状态可以容纳的不止这一个区块。
</Info>

<div id="sections">
  ## 部分
</div>

每个状态分为三个部分：**Header**、**Body** 和 **Footer**。部分决定区块的位置及其滚动方式：

* **Header**：固定在抽屉顶部；主体滚动时保持可见。
* **Body**：可滚动的中间部分。这里的区块随内容移动。锁定区块：**Cart items**。
* **Footer**：固定在抽屉底部。锁定区块：**Checkout button**。

添加或移动区块时，它所在的部分决定其滚动行为。并非每个区块在每个部分都可用。参阅[区块如何工作？](/zh/aftersell/cart/blocks-overview#blocks-available-in-each-section)。

<div id="blocks">
  ## 区块
</div>

**区块**是抽屉中一个可配置的组成部分（商品列表、upsell 优惠、结账按钮等等）。你可以在一个部分中堆叠它们、重新排序并设置样式。关于添加方式、数量限制、子区块和条件的工作原理，参阅[区块如何工作？](/zh/aftersell/cart/blocks-overview)。

<div id="next-steps">
  ## 后续步骤
</div>

* [创建购物车](/zh/aftersell/cart/creating-carts)
* [预览购物车](/zh/aftersell/cart/previewing-carts)
* [管理多个购物车](/zh/aftersell/cart/having-multiple-carts)