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

* **カウントダウンは3つの条件がすべて満たされた場合にのみ動作します:** タイマーが有効であること、テキストに `{{timer}}` トークンが含まれていること、時間がゼロより大きいこと。それ以外の場合、バナーは静的テキストとして表示されます。
* タイマーは `MM:SS` 形式でカウントダウンし、購入者のタブごとに記憶されます（セッション中はストア内のページ遷移をまたいで維持されます）。そのため、ページごとに再スタートすることはありません。
* **タイマーが `00:00` に達すると、バナー全体が消えます。** そのため、購入者がゼロになった時計を目にすることはありません。
* エディタのプレビューではタイマーはループし、バナーは非表示にならないため、スタイリングを続けられます。

<div id="settings">
  ## 設定
</div>

| 設定                        | 制御する内容                                                                                     | デフォルト                                          |
| ------------------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------- |
| **Text**                  | リッチテキストのメッセージ。カウントダウンを表示するには `{{timer}}` トークンを含めます。                                        | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | カウントダウンのオン/オフを切り替えます。                                                                      | オン                                             |
| **Minutes** / **Seconds** | カウントダウンの長さ。**Countdown timer** がオンになると表示される2つの数値フィールドで、`{{timer}}` の位置に `MM:SS` として表示されます。 | 10分                                            |

テキストは翻訳可能です。

<div id="placement-and-limits">
  ## 配置と制限
</div>

* **リージョン:** 任意（上部、本体、下部）。
* **最大数:** カート状態ごとに3つ。商品が入ったカートと空のカートで、それぞれ別枠になります。
* **状態:** 商品が入ったカートと空のカートの両方。
* 新しいカートにはデフォルトで追加されます。ロックされていないため、削除や非表示が可能です。

<div id="custom-template">
  ## カスタムテンプレート
</div>

Codeタブから[カスタムテンプレート](/ja/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** が選択されているときの枠線の色。                        | Transparent |

デザイン設定とは何でしょうか? 詳しくはこちら: [デザイン設定](/ja/aftersell/cart/design-settings)。