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

# チェックアウトボタンブロック

> Aftersell CartのCheckoutボタンブロック：購入者をチェックアウトへ送る必須のフッターCTA。

> **Checkout button**ブロックは、購入者をチェックアウトへ導くカートフッターの主要なコールトゥアクションで、カートからチェックアウトへの明確で目立つ導線を提供します。必須のブロックです。

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

* このボタンは**ローカライズされた、マーケットに適したチェックアウトURL**を解決するため、購入者は正しいマーケットのチェックアウトに到達します。解決できない場合は、標準の`/checkout`リンクにフォールバックします。
* **Go to cart page instead of checkout**を有効にすると、ボタンは代わりに`/cart`へリンクします。
* クリック時はJavaScript経由で遷移するため、テーマ独自のカート処理に横取りされることがなく、新しいタブで開く操作（Cmd/Ctrlクリック、ミドルクリック）も尊重されます。
* クリックするとSDKの[`checkout`イベント](/ja/aftersell/cart/sdk-events)が発行され、これをサブスクライブできます。

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

| 設定                                      | 制御内容                                                | デフォルト                        |
| --------------------------------------- | --------------------------------------------------- | ---------------------------- |
| **Button label**                        | テキストエリアに入力するプレーンテキストのラベル。`{{total_price}}`をサポートします。 | `Checkout • {{total_price}}` |
| **Go to cart page instead of checkout** | 購入者をチェックアウトに直接送る代わりに、`/cart`ページへ送ります。               | オフ                           |

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

* **領域：** 下部。
* **最大数：** カート状態ごとに1つ。
* **状態：** 商品が入ったカートのみ。
* **ロックされており、デフォルトで追加されます。** Checkoutボタンは削除や非表示にはできず、フッター内での位置変更のみ可能です。

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

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

| Prop        | 型                     | 用途                                                                       |
| ----------- | --------------------- | ------------------------------------------------------------------------ |
| `label`     | `string`              | サニタイズされたHTMLとしてのボタンラベル。`{{total_price}}`は解決済みです。                         |
| `href`      | `string \| undefined` | チェックアウトURL。エディタープレビューでは遷移先がないため`undefined`になります。                         |
| `isLoading` | `boolean`             | ここでは常に`false`です。ブロックは読み込み中に組み込みのスケルトンをレンダリングし、カートの準備が整ってからテンプレートを呼び出します。 |

<Warning>
  **カスタムのチェックアウトボタンではチェックアウトトラッキングが失われます。** 組み込みのボタンには、SDKの[`checkout`イベント](/ja/aftersell/cart/sdk-events#checkout)を発行し、[カート分析](/ja/aftersell/cart/analytics)のためにコンバージョンを記録するクリックハンドラーが付いています。このハンドラーはカスタムテンプレートには渡されないため、`href`だけで遷移すると両方がスキップされます。

  イベントが必要な場合は、遷移前に`onClick`から自分で発行してください。ただしアトリビューションレポートはこの方法でも復元できないため、本当に異なるマークアップが必要な場合を除き、[デザイン設定](/ja/aftersell/cart/design-settings)や[カスタムCSS](/ja/aftersell/cart/custom-css)で組み込みボタンのスタイルを変更する方法を推奨します。
</Warning>

`href`はデフォルト値を設定せず、そのままレンダリングしてください。`href`のない`<a>`は無効化された状態になり、これはエディター内での正しい動作です。

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

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

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