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

動作

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

設定

配置と制限

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

カスタムテンプレート

Codeタブからカスタムテンプレートをサポートしており、このブロックの組み込みマークアップを独自のJSXに置き換えます。受け取るpropsは以下のとおりです。
カスタムのチェックアウトボタンではチェックアウトトラッキングが失われます。 組み込みのボタンには、SDKのcheckoutイベントを発行し、カート分析のためにコンバージョンを記録するクリックハンドラーが付いています。このハンドラーはカスタムテンプレートには渡されないため、hrefだけで遷移すると両方がスキップされます。イベントが必要な場合は、遷移前にonClickから自分で発行してください。ただしアトリビューションレポートはこの方法でも復元できないため、本当に異なるマークアップが必要な場合を除き、デザイン設定カスタムCSSで組み込みボタンのスタイルを変更する方法を推奨します。
hrefはデフォルト値を設定せず、そのままレンダリングしてください。hrefのない<a>は無効化された状態になり、これはエディター内での正しい動作です。

デザイン

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