> ## 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.

# Banner 区块

> Aftersell Cart 的 Banner 区块：显示在抽屉内的消息横幅，可选配倒计时。

> **Banner** 区块是显示在购物车内的消息条，适用于促销、运费信息或紧迫性提示，例如免运费通知、促销公告或"购物车已保留"提示。它可以包含实时倒计时。

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-banner-block-reservation-countdown.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=8aff1b333a8ebe9005d2d70bc7f9a2cd" alt="Aftersell 购物车抽屉中的 Banner 区块，显示保留倒计时消息" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

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

* **只有同时满足三个条件时倒计时才会运行：** 计时器已启用、文字中包含 `{{timer}}` 令牌，且时长大于零。否则横幅显示为静态文字。
* 计时器以 `MM:SS` 格式倒数，并会为顾客的标签页记忆状态（会话期间在你商店内的页面跳转不会重置它），因此不会在每个页面上重新开始。
* **当计时器到达 `00:00` 时，整个横幅会消失**，因此顾客永远不会看到归零的时钟。
* 在编辑器预览中，计时器会循环播放且横幅不会隐藏，方便你持续调整样式。

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

| 设置                          | 控制内容                                                                        | 默认值                                            |
| --------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------- |
| **Text（文字）**                | 富文本消息。包含 `{{timer}}` 令牌即可显示倒计时。                                             | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer（倒计时）**    | 开启或关闭倒计时。                                                                   | 开                                              |
| **Minutes / Seconds（分钟/秒）** | 倒计时的时长。两个数字字段，在开启 **Countdown timer** 后显示，并在 `{{timer}}` 出现的位置以 `MM:SS` 显示。 | 10 分钟                                          |

文字支持翻译。

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

* **区域：** 任意（顶部、主体或底部）。
* **最大数量：** 每种购物车状态 3 个——有商品的购物车和空购物车各有自己的额度。
* **状态：** 有商品和空购物车均可。
* 默认添加到新购物车中。未锁定，因此你可以移除或隐藏它。

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

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

| Prop                          | 类型        | 用途                                                  |
| ----------------------------- | --------- | --------------------------------------------------- |
| `text`                        | `string`  | 经过净化的 HTML 格式横幅消息，其中的 `{{timer}}` 令牌**已被替换**为实时倒计时。 |
| `shouldUseTimer`              | `boolean` | 当此横幅的倒计时正在运行时为 `true`。                              |
| `isTimerExpiredAndShouldHide` | `boolean` | 倒计时归零后为 `true`。                                     |
| `isLoading`                   | `boolean` | 此处始终为 `false`：区块在加载期间渲染其内置骨架屏，仅在购物车就绪后才调用你的模板。      |

没有单独的 `timer` prop。倒计时已为你插入到 `text` 中，因此渲染 `text` 即可。

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  // The built-in banner removes itself at 00:00; a custom template must do the same.
  if (props.shouldUseTimer && props.isTimerExpiredAndShouldHide) return null;

  return (
    <div className="cart-external-banner" style={{ padding: '10px', textAlign: 'center' }}>
      <span dangerouslySetInnerHTML={{ __html: props.text }} />
    </div>
  );
}
```

<Warning>
  这个提前返回很重要。没有它，你的横幅在计时器到期后会继续渲染，而且由于令牌已被替换，顾客会看到一个冻结的 `00:00`。
</Warning>

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

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

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

Design 中的 **Text**（文字）部分让你控制横幅消息的排版。加粗和文字颜色在上方的富文本编辑器（Settings 标签页）中设置，而不是在这里。

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

<div id="style">
  ### Style（样式）
</div>

| 设置                   | 控制内容                                   | 默认值       |
| -------------------- | -------------------------------------- | --------- |
| **Background color** | 横幅的背景填充。                               | `#000000` |
| **Text color**       | 兜底文字颜色（会被富文本编辑器覆盖）。                    | `#ffffff` |
| **Border**           | 横幅是否带边框——**None**（0px）或 **Show**（1px）。 | None      |
| **Border color**     | 选择 **Show** 时边框的颜色。                    | 透明        |

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