> ## 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 区块：版块与子区块、有商品与空购物车、数量限制、锁定的区块、条件以及按区块设置。

你购物车的布局是由一组**区块**堆叠而成的：这些是你可以在购物车编辑器中添加、重新排序、设置样式和自定义的可配置组件。你包含哪些区块以及以什么顺序排列，就是顾客看到的购物车。

有关区块如何置于**状态**和**版块**之中，请参阅[购物车是如何运作的？](/zh/aftersell/cart/how-carts-work)。

<div id="blocks-and-sub-blocks">
  ## 区块与子区块
</div>

区块有两种：

* **区块**直接位于购物车中，处于三个版块之一：**Header**（头部）、**Body**（主体）或 **Footer**（底部）。每个版块提供不同的区块集合。
* **子区块**嵌套在另一个区块内。目前只有 [**Cart items**](/zh/aftersell/cart/cart-items-block) 承载子区块：**Product** 行（商品行本身）、[**Subscription upgrade**](/zh/aftersell/cart/subscription-upgrade-block) 和 [**Custom code**](/zh/aftersell/cart/custom-code-blocks)。

<div id="adding-reordering-and-removing-blocks">
  ## 添加、重新排序和移除区块
</div>

* 使用 **Add block**（添加区块）选择器**添加**区块。如果区块不能放置在你要添加的位置，或者已达到其数量限制（选择器会显示 `count/max` 标记），该区块会显示为灰色。
* 在版块内拖动区块即可**重新排序**。
* 使用垃圾桶图标**移除**，锁定的区块除外（见下文）。
* 使用眼睛开关**显示/隐藏**大多数区块，这会在不删除区块的情况下对顾客隐藏它。少数结构性区块无法隐藏：**Cart items**、**Checkout button** 和 **Product** 行。

<div id="locked-blocks">
  ## 锁定的区块
</div>

有些区块可以重新排序但不能删除，以防核心购物车行为（例如结账）被意外移除：

* **Cart items**
* **Checkout button**

<div id="default-blocks">
  ## 默认区块
</div>

新购物车以一个可用的默认布局开始：

* **有商品的购物车：** Header、Banner、Cart items、Summary、Checkout button
* **空购物车：** Header、Empty cart 区块

<Info>
  **空购物车状态**是整个空布局。**Empty cart 区块**是其中的一个区块。两者的区别请参阅[购物车是如何运作的？](/zh/aftersell/cart/how-carts-work)。
</Info>

<div id="how-many-of-each-block-you-can-add">
  ## 每种区块可以添加多少个
</div>

数量限制按**购物车状态**计算，而不是按购物车计算。有商品的购物车和空购物车各有自己的额度，因此一个购物车可以在有商品布局中放三个 Banner，在空布局中再放三个。

大多数区块每种状态限一个。例外如下：

| 区块             | 每种购物车状态的最大数量 |
| -------------- | ------------ |
| Banner         | 3            |
| Image          | 3            |
| Product add-on | 3            |
| Summary        | 2            |
| Custom code    | 无限制          |

<div id="content-design-and-code">
  ## Content、Design 和 Code
</div>

每个区块最多通过编辑器中的三个界面进行配置：

* **Content**：区块的设置（文字、产品选择、阈值等）。**Custom code** 区块是唯一的例外：它没有 Content 面板，因为该区块*本身就是*代码。
* **Design**：按区块的样式设置，叠加在你的全局[**设计设置**](/zh/aftersell/cart/design-settings)之上。除 **Custom code**（完全没有设置面板）之外，每个区块都有。
* **Code**：使用[**自定义模板**](/zh/aftersell/cart/custom-templates)覆盖区块的内置渲染。大多数区块支持此功能；少数不支持。

<div id="show-or-hide-by-market-country-or-currency">
  ## 按市场、国家或货币显示或隐藏
</div>

有些区块可以根据买家身份显示不同的设置，或完全隐藏。这与侧边栏的**眼睛开关**不同，后者是对所有人开启或关闭一个区块。

|        | **眼睛开关**       | **条件**                |
| ------ | -------------- | --------------------- |
| **作用** | 对所有顾客隐藏或显示整个区块 | 选择顾客看到哪个设置变体（或什么都不显示） |
| **依据** | 你在编辑器中的选择      | Shopify 市场、顾客国家或顾客货币  |
| **位置** | 大多数区块的侧边栏眼睛图标  | 支持条件的区块的设置面板          |

**目前支持的条件类型：** Shopify 市场、顾客国家和顾客货币（每种都有 **In** 或 **Not in**）。购物车总额和购物车内容**不是**条件类型。如需按消费金额/数量进度设置，请使用 [Rewards](/zh/aftersell/cart/rewards-block) 层级阈值；如需编辑器无法表达的规则，请使用 [Cart SDK](/zh/aftersell/cart/sdk-overview)。

条件是一个有序列表：**第一个匹配**的条件生效。请将具体规则放在 **All buyers**（所有买家）兜底规则之上。如果没有任何匹配，该区块对该顾客不渲染任何内容。

**目前在编辑器中**，完整的条件 UI 已在 [**Rewards**](/zh/aftersell/cart/rewards-block#per-market-rewards) 区块上提供：可按市场、国家或货币设置不同的层级组合。其他区块要么使用单一的"所有买家"配置，要么尚未接入此系统。

编辑器预览**不会**根据实际买家进行判断。在面板中选择某个条件即可预览该变体。

<div id="all-blocks">
  ## 所有区块
</div>

**结构**

* [Header](/zh/aftersell/cart/header-block)：标题、商品数量、logo 和关闭控件，固定在顶部。
* [Cart items](/zh/aftersell/cart/cart-items-block)：顾客添加到购物车的商品；每行商品重复显示。
* [Subscription upgrade](/zh/aftersell/cart/subscription-upgrade-block)：提供将某行商品转换为订阅的子区块。
* [Summary](/zh/aftersell/cart/summary-block)：总额、节省金额和已应用的折扣。
* [Checkout button](/zh/aftersell/cart/checkout-button-block)：进入结账的主要行动号召按钮。
* [Empty cart](/zh/aftersell/cart/empty-cart-block)：购物车为空时显示的内容。
* [Express payments](/zh/aftersell/cart/express-payments-block)：购物车内的快捷结账按钮（Shop Pay、PayPal 等）。

**商品营销**

* [Upsells](/zh/aftersell/cart/upsells-block)：按策略挑选的产品推荐。
* [Product add-on](/zh/aftersell/cart/product-add-on-block)：作为附加项提供的单个特定产品。
* [Rewards](/zh/aftersell/cart/rewards-block)：分层奖励，例如免运费或赠品。
* [Shipping protection](/zh/aftersell/cart/shipping-protection-block)：可选购的运输保障附加项。

**顾客输入**

* [Discount code](/zh/aftersell/cart/discount-code-block)：用于输入折扣码的字段。
* [Notes](/zh/aftersell/cart/notes-block)：订单备注字段。

**内容**

* [Banner](/zh/aftersell/cart/banner-block)：消息横幅，可选配倒计时。
* [Image](/zh/aftersell/cart/image-block)：单张图片或托管预设（例如支付图标）。
* [Custom code](/zh/aftersell/cart/custom-code-blocks)：购物车任意位置的自定义 HTML 或 React。

**扩展**

* [Custom templates](/zh/aftersell/cart/custom-templates)：从区块的 Code 标签页覆盖任意区块的渲染方式。

<div id="blocks-available-in-each-section">
  ## 每个版块可用的区块
</div>

每个版块提供不同的区块集合。这样可以保持布局聚焦，减少杂乱。

| 版块         | 可用区块                                                                                                                                     |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **Header** | Header、Banner、Rewards、Image、Custom code                                                                                                  |
| **Body**   | Banner、Notes、Discount code、Cart items、Empty cart、Custom code、Rewards、Product add-on、Shipping protection、Image、Upsells                    |
| **Footer** | Banner、Notes、Discount code、Custom code、Rewards、Product add-on、Shipping protection、Express payments、Image、Upsells、Summary、Checkout button |

其中一些区块是特定状态专用的（例如 Empty cart 仅在空状态下可用）。请参阅[购物车是如何运作的？](/zh/aftersell/cart/how-carts-work)。

<div id="block-validation-errors">
  ## 区块验证错误
</div>

如果区块的设置包含无效值，侧边栏中该区块名称旁会出现一个红色小圆点。在你修复问题之前，圆点会一直存在。它不是可关闭的通知。

只要有任何区块存在错误，**保存就会被阻止**。**Save**（保存）按钮仍可点击，但点击后会显示错误提示（*"Fix the errors in your cart blocks before saving"*，保存前请修复购物车区块中的错误），并跳转到第一个有问题的区块，打开其设置，以便你修正高亮显示的字段。**Publish**（发布）还要求没有未保存的更改，因此在成功完成一次干净的保存之前，它一直不可用。

无效字段修正后，圆点会自动消失，保存也会正常进行。

<Note>
  隐藏的区块仍会被验证。你隐藏的区块可能包含无效设置、显示错误圆点，并像可见区块一样阻止保存。因此，如果保存被阻止而所有可见区块看起来都正常，请检查你隐藏的区块。
</Note>