> ## 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 的运费保障（Shipping protection）块：一个由购物者自主选择开启的保障附加项，并将该选择记录在订单上。

> \*\*Shipping protection（运费保障）\*\*块提供一个购物者可在购物车中开启的运费保障附加项，让他们为运输过程中的损坏、丢失或被盗添加保障，并将该选择记录在订单上，供你的履约或理赔工具使用。

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

* 添加保障会做两件事：为保障产品添加一个**真实的 Shopify 产品行项目**，并将购物车属性 `_shipping_protected` 设为 `true`。
* **该属性会在结账后保留并落在订单上**，作为订单备注属性（`_shipping_protected`），因此你的履约或理赔工具可以识别哪些订单有保障。
* 无论你选择哪种展示类型，购物者都可以通过该控件添加和移除保障。
* **如果不存在可用的保障变体，该块不渲染任何内容**，而不是显示一个点击就会报错的控件。

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

| 设置               | 控制的内容                                                           | 默认值                                                               |
| ---------------- | --------------------------------------------------------------- | ----------------------------------------------------------------- |
| **Title**        | 富文本标题。支持 `{{product_title}}` 和 `{{price}}`。                     | `<strong>{{product_title}}</strong>`                              |
| **Price label**  | 价格行，显示在标题下方。支持 `{{product_title}}` 和 `{{price}}`。清空此字段可完全隐藏价格行。 | `{{price}}`                                                       |
| **Description**  | 补充说明文案。                                                         | `Protect your order from damage, loss, or theft during shipping.` |
| **Price**        | 保障价格（数字，决定收取的金额）。                                               | `2.5`                                                             |
| **Product**      | 保障产品（由应用自动创建）。                                                  | —                                                                 |
| **Display type** | 控件的呈现方式：**Toggle** 或 **Checkbox**。                              | Toggle                                                            |

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

* \*\*区域：\*\*body 或 bottom。
* \*\*最大数量：\*\*每个购物车状态 1 个。
* \*\*状态：\*\*仅限非空购物车。
* 默认不添加。未锁定——你可以移除或隐藏它。

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

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

| Prop              | 类型                                   | 用途                                        |
| ----------------- | ------------------------------------ | ----------------------------------------- |
| `isEnabled`       | `boolean`                            | 运费保障当前是否在购物车中。                            |
| `isPending`       | `boolean`                            | 添加或移除进行中时为 `true`。据此禁用你的控件。               |
| `title`           | `string`                             | 纯文本标题。没有富文本标题时的回退值。                       |
| `titleHtml`       | `string`                             | 经过清理的富文本标题 HTML。没有时为空。                    |
| `descriptionHtml` | `string`                             | 经过清理的富文本描述 HTML。没有时为空。                    |
| `priceHtml`       | `string \| null`                     | 来自专用价格字段、经过清理的富文本价格 HTML。该字段为空时为 `null`。  |
| `priceLabel`      | `string`                             | 格式化后的价格标签。不显示价格时为空。                       |
| `imageUrl`        | `string`                             | 保障图片。没有时为空。                               |
| `ctaText`         | `string`                             | 按钮文案，用于 `button` 格式。                      |
| `format`          | `'button' \| 'checkbox' \| 'toggle'` | 买家的选择方式。据此分支你的标记。                         |
| `handleAdd`       | `() => void`                         | 将保障添加到购物车。用于 `button` 格式。                 |
| `handleToggle`    | `() => void`                         | 在购物车中切换保障的添加与移除。用于 `checkbox` 和 `toggle`。 |
| `isLoading`       | `boolean`                            | 购物车仍在进行首次拉取时为 `true`。                     |

<Warning>
  `format` 决定应使用哪个处理函数：`button` 用 `handleAdd`，`checkbox` 和 `toggle` 用 `handleToggle`。接错处理函数会让选择了另一种格式的商家看到一个毫无反应的控件。
</Warning>

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

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

<div id="text">
  ### Text（文字）
</div>

Design 中的 **Text**（文字）部分让你控制三个元素的排版。使用 **Text element** 选择器在它们之间切换。

**Title**——保障标题。也支持自定义字体族。加粗和文字颜色在上方的富文本编辑器（Settings 标签页）中设置，而不是在这里。

| 设置                 | 控制内容    | 默认值    |
| ------------------ | ------- | ------ |
| **Font**           | 标题的字体族。 | 继承自主题  |
| **Size**           | 字体大小。   | `15px` |
| **Line height**    | 行高倍数。   | `1.33` |
| **Letter spacing** | 字符间距。   | Normal |

**Price**——价格行。加粗和文字颜色在上方的富文本编辑器中设置。

| 设置                 | 控制内容  | 默认值    |
| ------------------ | ----- | ------ |
| **Size**           | 字体大小。 | `15px` |
| **Line height**    | 行高倍数。 | `1.33` |
| **Letter spacing** | 字符间距。 | Normal |

**Description**——辅助文案。加粗和文字颜色在上方的富文本编辑器中设置。

| 设置                 | 控制内容  | 默认值    |
| ------------------ | ----- | ------ |
| **Size**           | 字体大小。 | `14px` |
| **Line height**    | 行高倍数。 | `1.29` |
| **Letter spacing** | 字符间距。 | Normal |

<Tip>
  直接在购物车预览中点击文字元素会将其高亮，并在面板中自动打开对应的控件。
</Tip>

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