> ## 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 的摘要（Summary）块：总额、节省金额和已应用的折扣码。

> \*\*Summary（摘要）\*\*块向购物者展示他们将要支付的金额：一个带可选节省金额的总额行，以及所有已应用的折扣标签。它在结账按钮正上方汇总购物车的总额和节省金额，让购物者在确认前看到最终价格。

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=455f22040697c41fd1e02a870e9cccf8" alt="摘要块在结账前显示小计、节省金额和已应用折扣" width="1368" height="250" data-path="images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png" />
</Frame>

<div id="behavior">
  ## 行为
</div>

* \*\*节省金额占位符会优雅地折叠。\*\*如果某个单元格引用了 `{{savings}}` 或 `{{pre_savings_price}}`，但购物车没有节省，该单元格会回退为仅显示 `{{total_price}}`，因此购物者绝不会看到"减 \$0.00"或与总额相等的划线价。如果你在同一个单元格中同时使用 `{{cart_item_count}}` 和 `{{savings}}`，在无节省的回退中商品数量也会被移除——把它们放在不同的单元格中可避免此问题。
* 折扣标签仅在 **Show discount codes** 开启\_且\_购物车有可列出的折扣时才显示。这包括基于折扣码的折扣和自动折扣。

<div id="settings">
  ## 设置
</div>

| 设置                      | 控制的内容                                                          | 默认值        |
| ----------------------- | -------------------------------------------------------------- | ---------- |
| **Left text**           | 总额行的左侧单元格。支持占位符的富文本。示例：`Subtotal ({{cart_item_count}} items)`。 | `Subtotal` |
| **Right text**          | 右侧单元格。支持占位符的富文本（总额、划线的折前价、节省金额、商品数量）。                          | 带划线节省标记的总额 |
| **Savings format**      | 以整数 `percent`（百分比）还是 `absolute`（绝对金额）显示节省。                     | `percent`  |
| **Show discount codes** | 是否显示已应用的折扣标签。这包括基于折扣码的折扣和自动折扣。                                 | 开启         |

文本单元格支持 `{{cart_item_count}}`、`{{total_price}}`、`{{pre_savings_price}}` 和 `{{savings}}` 占位符。

<div id="placement-and-limits">
  ## 位置与限制
</div>

* \*\*区域：\*\*bottom。
* \*\*最大数量：\*\*每个购物车状态 2 个——非空购物车和空购物车各有各自的额度。
* \*\*状态：\*\*非空和空购物车均可。
* 新购物车默认添加。未锁定，因此你可以移除或隐藏它。

<div id="custom-template">
  ## 自定义模板
</div>

支持在其 Code 选项卡中使用[自定义模板](/zh/aftersell/cart/custom-templates)，用你的 JSX 替换此块的内置标记。以下是它接收的 props。

| Prop                | 类型         | 用途                                              |
| ------------------- | ---------- | ----------------------------------------------- |
| `leftHtml`          | `string`   | 左侧单元格，为已清理的 HTML，占位符已解析。                        |
| `rightHtml`         | `string`   | 右侧单元格，为已清理的 HTML，占位符已解析。                        |
| `discountCodes`     | `string[]` | 应用于购物车的折扣名称（基于折扣码的折扣和自动折扣）。没有时为 `[]`。           |
| `showDiscountCodes` | `boolean`  | 商家希望列出折扣标签**且**购物车有可列出的折扣。                      |
| `hasSavings`        | `boolean`  | 购物车有节省时为 `true`。用它来隐藏你自己的节省行。                   |
| `totalPrice`        | `string`   | 购物车总额，已格式化。                                     |
| `preSavingsPrice`   | `string`   | 节省前的总额，已格式化。                                    |
| `savings`           | `string`   | 节省的金额。已格式化，**或者是百分比**（如 `15%`），取决于商家的节省格式设置。    |
| `itemCount`         | `number`   | 购物车中的商品总数——可见行项目数量之和，不含运费保障行项目。                 |
| `isLoading`         | `boolean`  | 在这里始终为 `false`：加载期间该块渲染其内置骨架屏，只有在购物车就绪后才调用你的模板。 |

<Warning>
  由于 `savings` 可能是金额也可能是百分比，不要围绕它构建假定其中一种的句子。单独使用 `{props.savings}` 是安全的；`You saved ${props.savings}` 则不安全。
</Warning>

<div id="design">
  ## 设计
</div>

通过设置面板中的 **Design** 部分为此块设置样式。这些是块级覆盖设置，会叠加在你的全局设计之上，留空时回退到全局设计。

什么是设计设置？在这里了解更多：[设计设置](/zh/aftersell/cart/design-settings)。