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

# Product add-on ブロック

> Aftersell Cart の Product add-on ブロック: 特定の 1 商品をドロワー内のクイック追加として提案します。

> **Product add-on** ブロックは、あなたが選んだ特定の 1 つの商品をカート内のアドオンとして提案し、既知の 1 商品（保証、サンプル、ベストセラー）をカート内で直接クイック追加できるプロモーションとして表示します。

<Info>
  ストラテジーによって選ばれた商品を表示する [**Upsells**](/ja/aftersell/cart/upsells-block) とは異なり、Product add-on は常にあなたが選んだ商品そのものを表示します。
</Info>

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-product-add-on-block-additional-product.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=29c7598c41c78f6503af7f9cd7ec084a" alt="買い物客がカートに含められる追加商品を提案する Product add-on ブロック" width="678" height="125" data-path="images/aftersell/cart-product-add-on-block-additional-product.png" />
</Frame>

<div id="behavior">
  ## 動作
</div>

* **有効なバリアントが解決できない場合**（商品が未設定、アーカイブ済み、または在庫切れ）、ブロックは機能しないボタンではなく**何も**レンダリングしません。
* コントロールは、\_このブロック自身の\_アドオンラインがカートに入っているかどうかを反映するため、オフに切り替えると自分が追加したラインが削除されます（他の場所で追加された同じ商品には影響しません）。
* 実際の値下げがある場合、compare-at 価格に取り消し線が引かれます。「% off」ラベルは、割引が四捨五入で 1% 未満になる場合は非表示になります。
* 選択したバリアントに画像がない場合、アドオンの画像は商品の代表画像にフォールバックします。

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

| 設定               | 制御する対象                                                 | デフォルト                                 |
| ---------------- | ------------------------------------------------------ | ------------------------------------- |
| **Display type** | 追加コントロールの表示形式: **Toggle** または **Checkbox**。            | Toggle                                |
| **Product**      | 提案する商品バリアント。1 つのピッカーで両方を選択します。画像と価格は選択したバリアントから取得されます。 | なし                                    |
| **Title**        | リッチテキストの見出し。                                           | `<strong>{{product_title}}</strong>`  |
| **Price label**  | 価格の行。                                                  | `{{price}}`                           |
| **Description**  | 補足テキスト。                                                | `Add {{product_title}} to your order` |

**Title**、**Price label**、**Description** はいずれも同じ 4 つのトークンをサポートします: `{{product_title}}`、`{{price}}`、`{{compare_at_price}}`、`{{savings}}`。

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

* **領域:** ボディまたは下部。
* **最大数:** カート状態ごとに 3 つ。商品が入ったカートと空のカートで、それぞれ別枠です。
* **状態:** 商品が入ったカートと空のカートの両方。
* デフォルトでは追加されません。ロックされていないため、削除や非表示が可能です。

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

Code タブから[カスタムテンプレート](/ja/aftersell/cart/custom-templates)をサポートしており、このブロックの組み込みマークアップをあなたの JSX に置き換えます。受け取る props は次のとおりです。

<div id="content">
  ### コンテンツ
</div>

| Prop                      | 型                | 用途                                                                    |
| ------------------------- | ---------------- | --------------------------------------------------------------------- |
| `addonTitle`              | `string`         | プレーンテキストのタイトル。alt テキストと `aria-label` に使い、リッチタイトルがない場合のフォールバックとして使います。 |
| `addonTitleHtml`          | `string`         | サニタイズ済みのリッチテキストタイトル HTML。ない場合は空。                                      |
| `descriptionHtml`         | `string`         | サニタイズ済みのリッチテキスト説明 HTML。ない場合は空。                                        |
| `formattedPrice`          | `string`         | 通貨フォーマット済みの価格ラベル。非表示の場合は空。                                            |
| `formattedCompareAtPrice` | `string`         | フォーマット済みのバリアント compare-at 価格（MSRP）。実際の割引がない場合は空。                      |
| `savings`                 | `string`         | 整数パーセントの割引ラベル。例: `25%`。割引がない場合は空。                                     |
| `priceHtml`               | `string \| null` | 専用の価格フィールドからのサニタイズ済みリッチテキスト価格 HTML。空の場合は `null`。                      |
| `ctaText`                 | `string`         | `button` 形式のボタンラベル。                                                   |
| `imageUrl`                | `string`         | 商品画像。ない場合は空。                                                          |
| `productUrl`              | `string`         | 商品ページの URL。ない場合は空で、その場合は画像やタイトルにリンクを張らないでください。                        |

<div id="state-and-actions">
  ### 状態とアクション
</div>

| Prop           | 型                                    | 用途                                              |
| -------------- | ------------------------------------ | ----------------------------------------------- |
| `variantId`    | `number \| null`                     | 解決されたバリアント。商品が未設定または在庫切れで有効なバリアントがない場合は `null`。 |
| `format`       | `'button' \| 'checkbox' \| 'toggle'` | 購入者がアドオンを追加する方法。これを基準にマークアップを分岐させてください。         |
| `isEnabled`    | `boolean`                            | アドオンが現在カートに入っているかどうか。                           |
| `isAdding`     | `boolean`                            | 追加または削除の処理中は `true`。これを使ってコントロールを無効化してください。     |
| `handleAdd`    | `() => void`                         | アドオンを追加します。`button` 形式用。                        |
| `handleToggle` | `() => void`                         | アドオンをカートに出し入れします。`checkbox` と `toggle` 用。       |
| `isLoading`    | `boolean`                            | カートが最初のフェッチを実行中は `true`。                        |

<Warning>
  どのハンドラを使うかは `format` が決めます。`button` には `handleAdd`、`checkbox` と `toggle` には `handleToggle` です。`variantId` が `null` の場合は追加できるものがないため、成功しないハンドラを呼び出すのではなく、これを基準にコントロールを無効化してください。
</Warning>

<div id="design">
  ## デザイン
</div>

このブロックのスタイルは、設定パネルの **Design** セクションで設定します。これらはグローバルデザインの上に重なるブロックごとの上書きで、空欄の場合はグローバル設定にフォールバックします。

<div id="text">
  ### Text
</div>

Design 内の **Text** セクションでは、3 つの要素のタイポグラフィを制御できます。**Text element** ピッカーを使って切り替えます。

**Title** — 商品名です。カスタムフォントファミリーにも対応しています。太字とテキストカラーは、上のリッチテキストエディタ(Settings タブ)で設定するもので、ここでは設定しません。

| 設定                 | 制御する対象          | デフォルト   |
| ------------------ | --------------- | ------- |
| **Font**           | タイトルのフォントファミリー。 | テーマから継承 |
| **Size**           | フォントサイズ。        | `15px`  |
| **Line height**    | 行の高さの倍率。        | `1.33`  |
| **Letter spacing** | 文字間のトラッキング。     | Normal  |

**Price** — 価格の行です。太字とテキストカラーは、上のリッチテキストエディタで設定します。

| 設定                 | 制御する対象      | デフォルト  |
| ------------------ | ----------- | ------ |
| **Size**           | フォントサイズ。    | `15px` |
| **Line height**    | 行の高さの倍率。    | `1.33` |
| **Letter spacing** | 文字間のトラッキング。 | Normal |

**Description** — 補足のコピーです。太字とテキストカラーは、上のリッチテキストエディタで設定します。

| 設定                 | 制御する対象      | デフォルト  |
| ------------------ | ----------- | ------ |
| **Size**           | フォントサイズ。    | `14px` |
| **Line height**    | 行の高さの倍率。    | `1.29` |
| **Letter spacing** | 文字間のトラッキング。 | Normal |

<Tip>
  カートのプレビュー内でテキスト要素を直接クリックすると、その要素がハイライトされ、パネルのコントロールが自動的に開きます。
</Tip>

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