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

# Shipping protection ブロック

> Aftersell Cart の Shipping protection ブロック: 選択内容を注文に記録するオプトイン式の保護アドオン。

> **Shipping protection** ブロックは、購入者がカート内でオンにできるオプトイン式の配送保護アドオンを提供します。配送中の破損、紛失、盗難に対する保護を追加でき、その選択は注文に記録されるため、フルフィルメントやクレーム対応のツールで利用できます。

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

* 保護を追加すると 2 つのことが起こります。保護商品の**実際の Shopify 商品ライン**が追加され、カート属性 `_shipping_protected` が `true` に設定されます。
* **この属性はチェックアウトを経ても保持され、注文に**注文メモ属性(`_shipping_protected`)として記録されます。これにより、フルフィルメントやクレーム対応のツールがどの注文が保護されているかを判別できます。
* 選択した表示タイプにかかわらず、購入者はこのコントロールで保護の追加も削除もできます。
* **利用可能な保護バリアントが存在しない場合、ブロックは何もレンダリングしません。** クリック時にエラーになるコントロールを表示することはありません。

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

| 設定               | 制御する内容                                                                                   | デフォルト                                                             |
| ---------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| **Title**        | リッチテキストの見出し。`{{product_title}}` と `{{price}}` をサポートします。                                  | `<strong>{{product_title}}</strong>`                              |
| **Price label**  | タイトルの下に表示される価格行。`{{product_title}}` と `{{price}}` をサポートします。このフィールドを空にすると価格行が完全に非表示になります。 | `{{price}}`                                                       |
| **Description**  | 補足文。                                                                                     | `Protect your order from damage, loss, or theft during shipping.` |
| **Price**        | 保護の価格(数値、請求額を設定)。                                                                        | `2.5`                                                             |
| **Product**      | 保護商品(アプリが自動作成)。                                                                          | —                                                                 |
| **Display type** | コントロールの表示方法: **Toggle** または **Checkbox**。                                                | Toggle                                                            |

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

* **リージョン:** body または bottom。
* **最大数:** カート状態ごとに 1 つ。
* **状態:** 商品が入ったカートのみ。
* デフォルトでは追加されません。ロックもされていないため、削除や非表示が可能です。

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

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

| Prop              | 型                                    | 用途                                                       |
| ----------------- | ------------------------------------ | -------------------------------------------------------- |
| `isEnabled`       | `boolean`                            | 配送保護が現在カートに入っているかどうか。                                    |
| `isPending`       | `boolean`                            | 追加または削除の処理中は `true`。これを見てコントロールを無効化してください。               |
| `title`           | `string`                             | プレーンテキストのタイトル。リッチテキストのタイトルがない場合のフォールバック。                 |
| `titleHtml`       | `string`                             | サニタイズ済みのリッチテキストタイトル HTML。ない場合は空。                         |
| `descriptionHtml` | `string`                             | サニタイズ済みのリッチテキスト説明 HTML。ない場合は空。                           |
| `priceHtml`       | `string \| null`                     | 専用の価格フィールドから来るサニタイズ済みのリッチテキスト価格 HTML。フィールドが空の場合は `null`。 |
| `priceLabel`      | `string`                             | フォーマット済みの価格ラベル。価格が表示されない場合は空。                            |
| `imageUrl`        | `string`                             | 保護商品の画像。ない場合は空。                                          |
| `ctaText`         | `string`                             | `button` フォーマット用のボタンラベル。                                 |
| `format`          | `'button' \| 'checkbox' \| 'toggle'` | 購入者のオプトイン方法。これに応じてマークアップを分岐させてください。                      |
| `handleAdd`       | `() => void`                         | カートに保護を追加します。`button` フォーマット用。                           |
| `handleToggle`    | `() => void`                         | 保護のカートへの出し入れを切り替えます。`checkbox` と `toggle` 用。             |
| `isLoading`       | `boolean`                            | カートが最初の取得を行っている間は `true`。                                |

<Warning>
  どのハンドラーを使うかは `format` が決めます。`button` には `handleAdd`、`checkbox` と `toggle` には `handleToggle` です。誤ったほうを接続すると、もう一方のフォーマットを選んだマーチャントの環境ではコントロールが反応しなくなります。
</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)。