Bannerブロック

Banner ブロックはカート内に表示されるメッセージストリップで、送料無料のお知らせ、セールの告知、「カート確保中」の表示など、プロモーション、配送メッセージ、緊急性を伝える表示に便利です。ライブのカウントダウンタイマーを含めることができます。

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

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

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>
  );
}