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

# Rewards ブロック

> Aftersell Cart の Rewards ブロック: 段階的な送料無料、割引、無料ギフト。マーケット、国、通貨ごとに異なるティアも設定できます。

> **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="送料無料や無料ギフトなどの段階的リワードへの進捗バーを表示する Rewards ブロック" 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 つを保持し、最初に一致した条件が表示されるため、1 人の買い物客が見るのは最大 4 つです。各ティアのしきい値は、その上のティアより厳密に大きくなければなりません。つまり、しきい値は昇順である必要があります。ティアのしきい値が前のティアのしきい値以下の場合、そのティアのしきい値フィールドにインラインエラーが表示され、問題が解決されるまで **Save** ボタンがブロックされます。該当するティアは自動的に展開され、エラーが見えるようになります。

たとえば、Tier 1 が \$100 に設定されている場合、Tier 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 つ。商品が入ったカートと空のカートで、それぞれ 1 つずつです。
* **状態:** 商品が入ったカートと空のカートの両方。
* デフォルトでは追加されません。ロックされていないため、削除や非表示が可能です。

<div id="per-market-rewards">
  ## マーケットごとのリワード
</div>

Rewards は、現時点で完全な **Conditions** UI を備えたブロックです。複数のティアセットを定義し、それぞれを **Shopify マーケット**、**顧客の国**、または**顧客の通貨**（**In** または **Not in**）に向けて設定できます。買い物客には最初に一致した条件が表示されます。どれにも一致しない場合、その買い物客にはブロックは何もレンダリングされません。

各条件は設定パネル内のカード（**When** + 条件）です。その下の **Display** セクションに、その条件のティアが入ります。具体的なルールは、すべての購入者向けの **All buyers** の受け皿より上に置いてください。順序は優先度であり、一致したものすべての組み合わせではありません。

最後の条件は削除できません（少なくとも 1 つが常に必要です）。エディタのプレビューは実際の購入者を評価しません。パネルで条件を選択すると、そのバリアントをプレビューできます。

条件と目のトグルや他のブロックとの関係については、[マーケット、国、または通貨で表示・非表示を切り替える](/ja/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency)を参照してください。

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

Code タブから[カスタムテンプレート](/ja/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`）。1 本の共有バー上の位置ではありません。 |

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

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