> ## 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 的奖励区块：分层的免运费、折扣和免费赠品，还可按市场、国家或货币设置不同层级。

> **Rewards** 区块显示一个通向奖励层级（免运费、订单折扣或免费赠品）的进度条，购物者通过向购物车添加更多商品来解锁，它通过展示购物者距离下一个奖励有多近来激励更大的购物车，并自动发放符合条件的奖励。层级可以按市场、国家和货币而有所不同。

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-rewards-block-progress-bar-toward-tiered.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=14074a434c0024287bd1dd36051af69b" alt="显示通向免运费和免费赠品等分层奖励进度条的奖励区块" width="1412" height="312" data-path="images/aftersell/cart-rewards-block-progress-bar-toward-tiered.png" />
</Frame>

<div id="tier-threshold-validation">
  ## 层级门槛校验
</div>

每个条件的层级列表最多容纳 **4** 个层级——带有多个市场、国家或货币条件的 Rewards 区块每个条件最多存储 4 个，并且由于向购物者显示的是第一个匹配的条件，任何单个购物者最多看到 4 个。每个层级的门槛必须严格大于上一层级——门槛必须按升序排列。如果某个层级的门槛等于或低于上一层级的门槛，该层级的门槛字段会显示内联错误，并且 **Save** 按钮会被阻止，直到问题解决。受影响的层级会自动展开，使错误可见。

例如，如果第 1 层设置为 \$100，第 2 层必须设置为 \$101 或更高。

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

* 进度**排除**奖励赠品行、产品附加行、运输保护行和礼品卡，不计入总额，所以这些商品不会虚增购物者的奖励进度。
* 消息显示距离下一层级还差的金额或数量，或在所有层级达成后显示完成消息。
* \*\*免费赠品自动发放。\*\*购物者达到赠品层级时，赠品会被添加到购物车；如果他们跌回门槛以下，赠品会被移除。关闭奖励叠加时，只发放已达成的最高层级的赠品。
* **Add back removed free gifts** 控制购物者手动移除自动发放的赠品时会发生什么。启用时（默认），赠品会在下一次购物车更新时自动重新添加。禁用时，会尊重移除操作，赠品在本次会话余下时间里不再进入购物车，这样购物者就不必与购物车"斗争"来拒绝赠品。

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

| 设置                                         | 控制内容                                                          | 默认值                     |
| ------------------------------------------ | ------------------------------------------------------------- | ----------------------- |
| **Rewards calculation**                    | 进度按 **Cart total (\$)** 还是 **Cart quantity (#)** 计算。          | Cart total (\$)         |
| **Stack rewards across tiers**             | 开启：应用买家解锁的每一个奖励，直到达到的最高层级。关闭：只应用已解锁最高层级的奖励。                   | 开启                      |
| **Add back removed free gifts**            | 买家移除已获得的免费赠品后重新添加。                                            | 开启                      |
| **Show tier icons**                        | 层级图标是否出现在进度条上。                                                | 开启                      |
| **Show tier labels**                       | 进度条上每个层级标记的标签文字是否显示。                                          | 关闭                      |
| **Text after completing full rewards bar** | 所有层级达成后显示的富文本。                                                | `All rewards unlocked!` |
| **Tiers**                                  | 奖励层级（见下文）。每个条件最多 **4** 个；面板显示 `n/4` 计数器，达到上限时禁用 **Add tier**。 | 无                       |

每个**层级**展开后包含：

| 层级设置                                       | 控制内容                                                                               | 默认值                                          |
| ------------------------------------------ | ---------------------------------------------------------------------------------- | -------------------------------------------- |
| **Reward type**                            | **Free shipping**、**Order discount** 或 **Free gift**。更改它会将该层级的标题和进度条标签重置为新类型的默认措辞。 | Free shipping                                |
| **Threshold (\$)** / **Threshold (items)** | 解锁该层级的购物车总额或商品数量。标签跟随 **Rewards calculation**。最小值 `1`。                             | `50`                                         |
| **Discount value type**                    | 仅限订单折扣：**Percentage (%)** 或 **Fixed amount (\$)**。                                 | Percentage (%)                               |
| **Percentage off** / **Amount off**        | 仅限订单折扣：折扣数额。百分比上限为 100。                                                            | `10`                                         |
| **Title before achieving tier**            | 购物者尚未达到该层级时显示的富文本消息。支持 `{{amount}}` 令牌。                                            | `You're {{amount}} away from free shipping!` |
| **Progress bar label**                     | 层级标记上显示的标签。                                                                        | `Free shipping`                              |
| **Gift products**                          | 仅限免费赠品：发放的产品/变体，每层最多 **3** 个。                                                      | 无                                            |

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

* \*\*区域：\*\*任意（顶部、主体或底部）。
* \*\*数量上限：\*\*每个购物车状态 1 个——已装满购物车和空购物车各有自己的一个。
* \*\*状态：\*\*已装满和空购物车均可。
* 默认不添加。未锁定，所以你可以删除或隐藏它。

<div id="per-market-rewards">
  ## 按市场设置奖励
</div>

Rewards 是目前拥有完整 **Conditions** UI 的区块：定义多套层级，每套针对一个 **Shopify market**、**customer country** 或 **customer currency**（**In** 或 **Not in**）。向购物者显示第一个匹配的条件。如果都不匹配，区块对他们不渲染任何内容。

每个条件是设置面板中的一张卡片（**When** + 条件）。其下方的 **Display** 部分存放该条件的层级。把具体规则放在 **All buyers** 兜底规则之上。顺序即优先级，而不是所有匹配项的组合。

你无法删除最后一个条件（始终至少需要一个）。编辑器预览不会评估真实买家；在面板中选择一个条件即可预览该变体。

关于条件与眼睛开关及其他区块的关系，参阅[按市场、国家或货币显示或隐藏](/zh/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency)。

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

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

| Prop                 | 类型            | 用途                                              |
| -------------------- | ------------- | ----------------------------------------------- |
| `milestones`         | `Milestone[]` | 按顺序排列的奖励层级。见下文。                                 |
| `rewardsMessageHtml` | `string`      | 进度或完成消息，为已消毒的 HTML。                             |
| `showIcons`          | `boolean`     | 商家是否启用了层级图标。                                    |
| `showTierLabels`     | `boolean`     | 商家是否启用了层级进度条标签。                                 |
| `isLoading`          | `boolean`     | 在这里始终为 `false`：区块在加载期间渲染其内置骨架屏，只在购物车就绪后才调用你的模板。 |

每个 `Milestone`：

| 字段                | 类型                     | 用途                                               |
| ----------------- | ---------------------- | ------------------------------------------------ |
| `id`              | `string`               | 层级的稳定键。用作你的 React `key`。                         |
| `label`           | `string`               | 层级的标签，为纯文本。                                      |
| `icon`            | `ReactElement \| null` | 预渲染的图标元素。层级没有图标时为 `null`。直接渲染它：`{m.icon}`。       |
| `isCompleted`     | `boolean`              | 购物车是否已达到此层级。                                     |
| `positionPercent` | `number`               | **此层级自己那段**进度条的填充程度，`0` 到 `100`——不是在一条共享进度条上的位置。 |

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function Rewards(props) {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: props.rewardsMessageHtml }} />

      {props.milestones.map((milestone) => (
        // Each tier gets its own track; positionPercent (0-100) fills that track.
        <div key={milestone.id}>
          <div style={{ background: '#E9E9E9', height: 5 }}>
            <div style={{ width: `${milestone.positionPercent}%`, background: '#000', height: 5 }} />
          </div>
          {props.showIcons && milestone.icon ? milestone.icon : null}
          {props.showTierLabels && milestone.label !== '' ? milestone.label : null}
        </div>
      ))}
    </div>
  );
}
```

`m.icon` 是一个**预渲染的元素**，不是 URL 也不是图标名称，所以要直接渲染它，而不要试图用它构建图片元素。

<Note>
  在自定义模板内部 `milestones` 永远不会为空。当没有可显示的层级时，区块不渲染任何内容，你的模板根本不会被调用，所以你不需要空状态分支。
</Note>

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

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

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

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

**Message**——进度或完成消息。也支持自定义字体族。加粗和文字颜色在上方的富文本编辑器（Settings 标签页）中设置，而不是在这里。

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

**Tier label**——每个层级标记上显示的标签。仅在启用 **Show tier labels** 时可用。

| 设置                 | 控制内容                                      | 默认值           |
| ------------------ | ----------------------------------------- | ------------- |
| **Text color**     | 层级标签的颜色。                                  | 次要文字颜色        |
| **Size**           | 字体大小。                                     | `13px`        |
| **Weight**         | 字重——Light、Regular、Medium、Semibold 或 Bold。 | Regular (400) |
| **Line height**    | 行高倍数。                                     | `1.2`         |
| **Letter spacing** | 字符间距。                                     | Normal        |

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

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