> ## 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 的产品附加区块：在抽屉内将一个特定产品作为快速添加项进行推荐。

> **Product add-on** 区块在购物车内推荐一个你选定的特定产品作为附加项，把一个已知产品（延保、样品、畅销品）作为快速添加项直接展示在购物车中。

<Info>
  与由策略选择产品的 [**Upsells**](/zh/aftersell/cart/upsells-block) 不同，Product add-on 始终显示你选定的那个产品。
</Info>

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-product-add-on-block-additional-product.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=29c7598c41c78f6503af7f9cd7ec084a" alt="产品附加区块向购物者推荐可加入购物车的额外产品" width="678" height="125" data-path="images/aftersell/cart-product-add-on-block-additional-product.png" />
</Frame>

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

* **如果没有解析到可用变体**——产品未设置、已归档或缺货——区块将**不渲染任何内容**，而不是显示一个无效按钮。
* 控件反映的是*此区块自己的*附加行是否在购物车中，所以关闭它会移除它添加的那一行（不会影响在别处添加的同一产品）。
* 存在真正降价时，原价会显示删除线；如果折扣四舍五入后低于 1%，"% off" 标签会被隐藏。
* 当所选变体没有图片时，附加产品图片会回退到产品的主图。

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

| 设置               | 控制内容                                  | 默认值                                   |
| ---------------- | ------------------------------------- | ------------------------------------- |
| **Display type** | 添加控件的显示形式：**Toggle** 或 **Checkbox**。  | Toggle                                |
| **Product**      | 要推荐的产品变体——一个选择器同时涵盖产品和变体。图片和价格来自所选变体。 | 无                                     |
| **Title**        | 富文本标题。                                | `<strong>{{product_title}}</strong>`  |
| **Price label**  | 价格行。                                  | `{{price}}`                           |
| **Description**  | 辅助文案。                                 | `Add {{product_title}} to your order` |

**Title**、**Price label** 和 **Description** 都支持同样的四个令牌：`{{product_title}}`、`{{price}}`、`{{compare_at_price}}` 和 `{{savings}}`。

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

* \*\*区域：\*\*主体或底部。
* \*\*数量上限：\*\*每个购物车状态 3 个——已装满购物车和空购物车各有自己的额度。
* \*\*状态：\*\*已装满和空购物车均可。
* 默认不添加。未锁定——你可以删除或隐藏它。

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

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

<div id="content">
  ### 内容
</div>

| Prop                      | 类型               | 用途                                          |
| ------------------------- | ---------------- | ------------------------------------------- |
| `addonTitle`              | `string`         | 纯文本标题。用于替代文本和 `aria-label`，以及在没有富文本标题时作为回退。 |
| `addonTitleHtml`          | `string`         | 已消毒的富文本标题 HTML。没有时为空。                       |
| `descriptionHtml`         | `string`         | 已消毒的富文本描述 HTML。没有时为空。                       |
| `formattedPrice`          | `string`         | 按货币格式化的价格标签。不显示时为空。                         |
| `formattedCompareAtPrice` | `string`         | 格式化的变体原价（MSRP）。没有真实优惠时为空。                   |
| `savings`                 | `string`         | 整数百分比的优惠标签，例如 `25%`。没有优惠时为空。                |
| `priceHtml`               | `string \| null` | 来自专用价格字段的已消毒富文本价格 HTML。为空时为 `null`。         |
| `ctaText`                 | `string`         | 按钮文字，用于 `button` 形式。                        |
| `imageUrl`                | `string`         | 产品图片。没有时为空。                                 |
| `productUrl`              | `string`         | 产品页面 URL。没有时为空，此时不要给图片或标题加链接。               |

<div id="state-and-actions">
  ### 状态和操作
</div>

| Prop           | 类型                                   | 用途                                       |
| -------------- | ------------------------------------ | ---------------------------------------- |
| `variantId`    | `number \| null`                     | 解析到的变体。没有可用变体时为 `null`，因为产品未设置或缺货。       |
| `format`       | `'button' \| 'checkbox' \| 'toggle'` | 买家添加附加产品的方式。据此为你的标记做分支。                  |
| `isEnabled`    | `boolean`                            | 附加产品当前是否在购物车中。                           |
| `isAdding`     | `boolean`                            | 添加或移除进行中时为 `true`。据此禁用你的控件。              |
| `handleAdd`    | `() => void`                         | 添加附加产品。用于 `button` 形式。                   |
| `handleToggle` | `() => void`                         | 在购物车中添加或移除附加产品。用于 `checkbox` 和 `toggle`。 |
| `isLoading`    | `boolean`                            | 购物车仍在进行首次获取时为 `true`。                    |

<Warning>
  `format` 决定适用哪个处理函数：`button` 用 `handleAdd`，`checkbox` 和 `toggle` 用 `handleToggle`。`variantId` 为 `null` 意味着没有可添加的内容，所以要据此控制你的控件，而不是调用一个不可能成功的处理函数。
</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)。