Commerce Checkoutレンダリング

チェックアウト開始レンダリングを使用して、チェックアウト プロセスを開始します。 Checkout ページには、ライブサイトに表示可能な出力を持たないStart Checkoutレンダリングのみを含める必要があります。

エクスペリエンス エディターでは、チェックアウト開始レンダリングは次のように表示されます。

Checkout Stepプロバイダーは、顧客をリダイレクトするページを決定します。関連付けられたデータ・アイテムでは、レンダリングに表示されるメッセージを構成できます。

結果

ライブストアフロントでは、Start Checkoutレンダリングにより、顧客はチェックアウトプロセスの最初の表示ステップにリダイレクトされます。

ステップ インジケータ レンダリングを使用して、チェックアウト プロセスの進行状況を示します。

デフォルトでは、次の手順が定義されています。

ステップインジケータのステップの順序は、関連付けられたデータアイテムのStep Name and Labelsフィールドの設定によって決まります。

左の列のステップ名はステップのHTML識別子で、右の列にはユーザー インターフェイスに表示されるテキスト ラベルが含まれています。

お客様がチェックアウトプロセスを進めると、現在のステップが強調表示されます。各チェックアウト ページでは、現在のステップがステップ インジケータ レンダリングのControl Propertiesダイアログ ボックスで設定されます。

「 Current Step 」フィールドに、関連付けられたデータ・アイテムに表示されるステップの名前を入力します。

配送レンダリングを使用して、顧客が商品の配送先と配送方法を指定できるようにします。デフォルトでは、配送はチェックアウトプロセスの最初の可視ステップです。 エクスペリエンス エディターでレンダリングをページに追加すると、次のようになります。

結果

ライブストアフロントでは、顧客が配送方法を選択し、住所を入力してView shipping optionsをクリックすると、配信レンダリングは次のようになります。

お客様が選択できるオプションは、カートの内容によって異なります。SXA Storefrontソリューションでは、次の配信オプションを利用でき、カスタマイズできます。

すべての商品に配送先住所と配送オプションがある場合、Continue to billingボタンが有効になり、お客様はチェックアウトプロセスの次のステップに進むことができます。

エクスペリエンス エディターでは、レンダリングのフィールドとボタンは無効になります。

ライブストアフロントでは、お客様はボタンを使用して、チェックアウトプロセスのステップ間を前後に移動できます。入力された配送情報は、顧客がContinue to billingをクリックしたときに保存され、その後、顧客がチェックアウトプロセスを離れて買い物を続行する場合にも保持されます。デフォルトでは、顧客がContinue Shoppingボタンをクリックすると、ホーム ページが表示されます。これは、チェックアウトステッププロバイダーによって決定されます。

請求レンダリングを使用して、顧客が支払い情報を指定できるようにします。顧客は請求オプションを選択し、請求情報を入力します。顧客の選択に応じて、関連するフィールドが表示されます。

レンダリングは現在、次の支払いオプションをサポートしています。

お客様は、ギフトカードの金額を注文に適用でき、現在の残高をクレジットカードで支払うことができます。

請求先住所には、次のオプションがあります。

レンダリングでは、Braintreeフェデレーション支払いコントロールを使用して、クレジット カード支払いを受け入れます。顧客はクレジットカード情報を入力し、Validate Paymentをクリックして金額を確認します。

ギフトカード決済を追加するには、お客様はApply gift cardセクションを展開し、ギフトカード番号を入力して、Get Balanceを押します。ギフトカードが有効な場合は、残高が表示されます。その後、お客様は注文の全額を支払いとして適用するか、または適用する少額を入力できます。

エクスペリエンス エディターでは、レンダリングのフィールドとボタンは無効になります。

ライブストアフロントでは、支払い情報が入力されると、Continue to confirmationボタンが有効になり、顧客はチェックアウトプロセスの次のステップに進むことができます。

お客様はボタンを使用して、チェックアウトプロセスのステップ間を前後に移動できます。入力された請求情報は、Braintreeによって記憶されます。お客様がチェックアウトに戻り、ショッピングカートと配送情報に変更がない場合は、以前に入力したカード情報を使用できます。ただし、ショッピングカートや配送情報に変更があった場合は、カード情報を再入力していただく必要があります。

レビューレンダリングを使用して、請求と配送の手順が完了した後に、顧客が注文を確認して確認できるようにします。レビューレンダリングは注文を要約し、顧客が現在の注文を確認して購入を確認できるようにします。

エクスペリエンス エディターでは、レンダリングは次のようになります。

ライブストアフロントでは、レンダリングは次のようになります。

お客様が注文を希望する場合、お客様はConfirm orderをクリックします。デフォルトでは、Confirm orderは顧客をOrder Confirmationページに誘導します。

レビュー レンダリングのControl Propertiesダイアログ ボックスを使用して、配送先住所を編集 リンクと 請求先住所を編集 リンクを設定します。

注文確認レンダリングを使用して、顧客の注文が送信されたことを確認します。

エクスペリエンス エディターでは、レンダリングに注文番号と注文ステータスのプレースホルダー データが表示されます。