Commerce Checkoutレンダリング
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
SXAツールボックスのCommerce Checkoutグループには、チェックアウト プロセスを管理するための ページを作成するために使用できる レンダリングが多数含まれています。このトピックでは、ツールボックスのCommerce Checkoutセクションからアクセスできるレンダリングについて説明します。
コンテンツ エディターのページの順序によって、チェックアウト ページの順序が決まります。チェックアウトプロセスの最初のステップとして表示されるページと、お客様がプロセス内を前後に移動するボタン ( Back to DeliveryボタンやContinue to Confirmationボタンなど) をクリックしたときに表示されるページを決定します。
チェックアウト レンダリングの開始
Start Checkoutレンダリングを使用して、顧客がチェックアウト プロセスを開始できるようにします。この時点で、顧客はCheckoutページに移動します。このページには、ライブ サイトに表示される出力を持たないStart Checkoutレンダリングのみを含める必要があります。
エクスペリエンス エディターでは、チェックアウト開始レンダリングは次のように表示されます。
Checkout Stepプロバイダーは、顧客をリダイレクトするページを決定します。関連付けられたデータ・アイテムでは、レンダリングに表示されるメッセージを構成できます。
ライブストアフロントでは、Start Checkoutレンダリングにより、顧客はチェックアウトプロセスの最初の表示ステップにリダイレクトされます。
カートが空の場合、お客様はShopping Cartページにリダイレクトされます。
ステップインジケーターのレンダリング
ステップインジケータを使用して、チェックアウトプロセスのステップの進行状況を示します。
デフォルトでは、次の手順が定義されています。
-
カート
-
配達
-
請求
-
復習
ステップインジケータのステップの順序は、関連付けられたデータアイテムのStep Name and Labelsフィールドの設定によって決まります。
左の列のステップ名はステップのHTML識別子で、右の列にはユーザー インターフェイスに表示されるテキスト ラベルが含まれています。
お客様がチェックアウトプロセスを進めると、現在のステップが強調表示されます。各チェックアウト ページでは、現在のステップがステップ インジケータ レンダリングのControl Propertiesダイアログ ボックスで設定されます。
「 Current Step 」フィールドに、関連付けられたデータ・アイテムに表示されるステップの名前を入力します。
配信レンダリング
Deliveryレンダリングを使用して、顧客がアイテムの配送先と配送方法を指定できるようにします。デフォルトでは、配送はチェックアウトプロセスの最初の可視ステップです。エクスペリエンス エディターでレンダリングをページに追加すると、次のようになります。
ライブストアフロントでは、顧客が配送方法を選択し、住所を入力してView shipping optionsをクリックすると、配信レンダリングは次のようになります。
お客様が選択できるオプションは、カートの内容によって異なります。SXA Storefrontソリューションでは、次の配信オプションを利用でき、カスタマイズできます。
-
Ship items – すべての商品は、お客様が指定した単一の配送先住所に配送されます。有効な住所を入力すると、次の配送オプションを利用できます。
-
地面
-
翌日の空気
-
標準
-
スタンダード オーバーナイト
-
-
Ship items individually – お客様は、カート内の商品ごとに異なる配送先住所と配送オプションを指定できます。
-
Digital – お客様がデジタル商品を注文する場合、お客様は配送用のメールアドレスを入力する必要があります。
すべての商品に配送先住所と配送オプションがある場合、Continue to billingボタンが有効になり、お客様はチェックアウトプロセスの次のステップに進むことができます。
エクスペリエンス エディターでは、レンダリングのフィールドとボタンは無効になります。
ライブストアフロントでは、お客様はボタンを使用して、チェックアウトプロセスのステップ間を前後に移動できます。入力された配送情報は、顧客がContinue to billingをクリックしたときに保存され、その後、顧客がチェックアウトプロセスを離れて買い物を続行する場合にも保持されます。デフォルトでは、顧客がContinue Shoppingボタンをクリックすると、ホーム ページが表示されます。これは、チェックアウトステッププロバイダーによって決定されます。
課金レンダリング
請求レンダリングを使用して、顧客が支払い情報を指定できるようにします。顧客は請求オプションを選択し、請求情報を入力します。顧客の選択に応じて、関連するフィールドが表示されます。
レンダリングは現在、次の支払いオプションをサポートしています。
-
Braintreeの第三者決済管理サービスによるフェデレーテッド決済
-
ギフトカード決済
お客様は、ギフトカードの金額を注文に適用でき、現在の残高をクレジットカードで支払うことができます。
チェックアウト時にオンライン決済を可能にするために、StorefrontサイトテンプレートにはBrainTreeとの統合が含まれています。BrainTreeに連絡して契約を交渉し、必要なマーチャントIDを取得してください。開発者アカウントはストアフロントの開発とテストに利用できます。カスタムコマースコンポーネントを作成して、選択した支払いプロバイダーを統合できます。
請求先住所には、次のオプションがあります。
-
Same as shipping address – 配送ページでSingle shipment for all itemsオプションが選択されている場合にのみ使用できます。複数の配送先住所が指定されている場合、お客様は登録済みの住所から選択するか、新しい住所を入力する必要があります
-
Select from registered addresses – アカウントに以前に使用されていたすべての請求先住所と配送先住所が表示されます。
-
Use another address – 新しい住所を入力します。
レンダリングでは、Braintreeフェデレーション支払いコントロールを使用して、クレジット カード支払いを受け入れます。顧客はクレジットカード情報を入力し、Validate Paymentをクリックして金額を確認します。
ギフトカード決済を追加するには、お客様はApply gift cardセクションを展開し、ギフトカード番号を入力して、Get Balanceを押します。ギフトカードが有効な場合は、残高が表示されます。その後、お客様は注文の全額を支払いとして適用するか、または適用する少額を入力できます。
支払いの一部にギフトカードを適用し、クレジットカードを使用して残高を支払う場合は、最初にギフトカードを入力する必要があります。クレジットカード情報を入力すると、現在の残額がクレジットカードに適用され、後からクレジットカードの金額を変更することはできません。
エクスペリエンス エディターでは、レンダリングのフィールドとボタンは無効になります。
ライブストアフロントでは、支払い情報が入力されると、Continue to confirmationボタンが有効になり、顧客はチェックアウトプロセスの次のステップに進むことができます。
お客様はボタンを使用して、チェックアウトプロセスのステップ間を前後に移動できます。入力された請求情報は、Braintreeによって記憶されます。お客様がチェックアウトに戻り、ショッピングカートと配送情報に変更がない場合は、以前に入力したカード情報を使用できます。ただし、ショッピングカートや配送情報に変更があった場合は、カード情報を再入力していただく必要があります。
レンダリングのレビュー
レビューレンダリングを使用して、顧客が注文を確認して確認できるようにします。これは、請求と配信の手順が完了した後に行われます。レビューレンダリングは注文を要約し、顧客が現在の注文を確認して購入を確認できるようにします。
エクスペリエンス エディターでは、レンダリングは次のようになります。
ライブストアフロントでは、レンダリングは次のようになります。
お客様が注文を希望する場合、お客様はConfirm orderをクリックします。デフォルトでは、Confirm orderは顧客をOrder Confirmationページに誘導します。
構成
コントロール プロパティ ダイアログ ボックスでは、レビュー レンダリングの次のプロパティを構成できます。
|
財産 |
使う |
|---|---|
|
請求ページのURL |
請求先住所の編集 リンクを構成します。 |
|
配信ページURL |
「配送先住所を編集」リンクを設定します。 |
訪問者がクライアント側の検証をバイパスしようとすると(たとえば、Confirmレンダリングを使用してページのURLに直接アクセスし、注文を送信した場合)、Commerceエンジンは注文を拒否し、エラーが表示されます。
注文確認レンダリング
注文確認を使用して、顧客の注文が送信されたことを確認します。
エクスペリエンス エディターでは、レンダリングに注文番号と注文ステータスのプレースホルダー データが表示されます。
