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

# Summary ブロック

> Aftersell Cart の Summary ブロック: 合計、割引額、適用されたディスカウントコード。

> **Summary** ブロックは、購入者が支払う金額を表示します。合計行(オプションで割引額付き)と、適用されているディスカウントタグです。チェックアウトボタンのすぐ上でカートの合計と割引額をまとめて表示するため、購入者は確定前に最終的な金額を確認できます。

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=455f22040697c41fd1e02a870e9cccf8" alt="チェックアウト前に小計、割引額、適用済みディスカウントを表示する Summary ブロック" width="1368" height="250" data-path="images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png" />
</Frame>

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

* **割引トークンは自然に折りたたまれます。** セルで `{{savings}}` や `{{pre_savings_price}}` を参照していてもカートに割引がない場合、そのセルは `{{total_price}}` のみにフォールバックします。そのため、購入者に「\$0.00 オフ」や合計と同額の取り消し線価格が表示されることはありません。同じセルで `{{cart_item_count}}` と `{{savings}}` を組み合わせると、割引なしのフォールバック時にアイテム数も一緒に消えます。これを避けるには別々のセルに分けてください。
* ディスカウントタグは、**Show discount codes** がオンで、\_かつ\_カートに一覧表示できる割引がある場合にのみ表示されます。これにはコードベースの割引と自動適用の割引の両方が含まれます。

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

| 設定                      | 制御する内容                                                           | デフォルト          |
| ----------------------- | ---------------------------------------------------------------- | -------------- |
| **Left text**           | 合計行の左セル。トークン付きリッチテキスト。例: `Subtotal ({{cart_item_count}} items)`。 | `Subtotal`     |
| **Right text**          | 右セル。トークン付きリッチテキスト(合計、取り消し線付き割引前価格、割引額、アイテム数)。                    | 取り消し線付き割引表示の合計 |
| **Savings format**      | 割引を全体の `percent`(パーセント)で表示するか、`absolute`(絶対額)で表示するか。             | `percent`      |
| **Show discount codes** | 適用済みのディスカウントタグを表示するかどうか。これにはコードベースの割引と自動適用の割引の両方が含まれます。          | オン             |

テキストセルは `{{cart_item_count}}`、`{{total_price}}`、`{{pre_savings_price}}`、`{{savings}}` のトークンをサポートします。

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

* **リージョン:** bottom。
* **最大数:** カート状態ごとに 2 つ。商品が入ったカートと空のカートにそれぞれ独自の枠があります。
* **状態:** 商品が入ったカートと空のカートの両方。
* 新しいカートにはデフォルトで追加されます。ロックはされていないため、削除や非表示が可能です。

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

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

| Prop                | 型          | 用途                                                                      |
| ------------------- | ---------- | ----------------------------------------------------------------------- |
| `leftHtml`          | `string`   | トークン解決済みの、サニタイズされた HTML としての左セル。                                        |
| `rightHtml`         | `string`   | トークン解決済みの、サニタイズされた HTML としての右セル。                                        |
| `discountCodes`     | `string[]` | カートに適用された割引のタイトル(コードベースおよび自動適用)。ない場合は `[]`。                             |
| `showDiscountCodes` | `boolean`  | マーチャントがディスカウントタグの表示を希望しており、**かつ**カートに一覧表示できる割引があるかどうか。                  |
| `hasSavings`        | `boolean`  | カートに割引がある場合に `true`。独自の割引行を隠すのに使います。                                    |
| `totalPrice`        | `string`   | フォーマット済みのカート合計。                                                         |
| `preSavingsPrice`   | `string`   | フォーマット済みの割引前合計。                                                         |
| `savings`           | `string`   | 割引された金額。フォーマット済み、**またはパーセント表示**(例: `15%`)。マーチャントの割引フォーマット設定によります。       |
| `itemCount`         | `number`   | カート内の合計点数。表示されているラインの数量の合計で、配送保護のラインを除きます。                              |
| `isLoading`         | `boolean`  | ここでは常に `false`。ブロックは読み込み中に組み込みのスケルトンをレンダリングし、カートの準備が整ってからテンプレートを呼び出します。 |

<Warning>
  `savings` は金額とパーセントのどちらにもなり得るため、どちらか一方を前提とした文をその周りに組み立てないでください。`{props.savings}` 単体は安全ですが、`You saved ${props.savings}` は安全ではありません。
</Warning>

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

このブロックのスタイルは、設定パネルの **Design** セクションで調整します。これらはブロック単位のオーバーライドで、グローバルデザインの上に重なり、空欄の場合はグローバル設定にフォールバックします。

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