Commerce カートに進むレンダリング

概要

チェックアウト用の請求、出荷、確認ページの作成に使用されるCommerce カートに進むレンダリングの概要。

SXA ツールボックスの Commerce カートに進むグループには、チェックアウト プロセスを管理するために、ページの作成に使用できるレンダリングが多く含まれています。このトピックでは、ツールボックスの [Commerce カートに進む] セクションからアクセスできるレンダリングについて説明します。

コンテンツ エディター内のページの順序によって、チェックアウト ページの順序が決まります。これは、チェックアウト プロセスの最初のステップとして表示されるページと、顧客がプロセスの前後に移動するボタン (たとえば、[配送に戻る] ボタンまたは [確認へ進む] ボタン) をクリックしたときに表示されるページを決定します。

ツリー ビューでのチェックアウト ページ。

カートに進むレンダリングを使用して、顧客がチェックアウト プロセスを開始できるようにします。この時点で、顧客はチェックアウト ページにリダイレクトされます。このページには、実際のサイトに出力が表示されないカートに進むレンダリングのみを含める必要があります。

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

エクスペリエンス エディターに表示されるカートに進む

チェックアウト ステップ プロバイダーは、顧客をリダイレクトする先のページを決定します。関連するデータ アイテムでは、レンダリングに表示されるメッセージを設定できます。

ライブ ストアフロントでは、購入手続きを開始レンダリングによって、顧客はチェックアウト プロセスの最初に表示されるステップにリダイレクトされます。

注記

カートが空の場合、顧客は [ショッピング カート] ページにリダイレクトされます。

チェックアウト プロセスの各ステップの進行状況を表示するには、ステップ インジケーターを使用します。

チェックアウト プロセスのステップ

既定では、次のステップが定義されています。

  • カートに追加

  • 配送

  • 請求

  • レビュー

ステップ インジケーターのステップの順序は、関連するデータ アイテムの [ステップ名とラベル] フィールドの設定によって決まります。

ステップ インジケーター

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

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

ステップ インジケーターのコントロール プロパティ

[現在のステップ] フィールドに、関連するデータ アイテムに表示されるとおりのステップの名前を入力します。

配送レンダリングを使用して、顧客がアイテムの配送先と配送方法を指定できるようにします。既定では、配送はチェックアウト プロセスの最初に表示されるステップです。エクスペリエンス エディターでページにこのレンダリングを追加すると、次のようになります。

エクスペリエンス エディターでの配送レンダリング

ライブ ストアフロントで、顧客が配送方法を選択し、住所を入力して [発送オプションを表示] をクリックした後、配送レンダリングは次のようになります。

ライブ ストアフロントでの配送レンダリング

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

  • 商品を発送 – すべての商品は、顧客が指定した 1 か所の発送先住所に配送されます。有効な住所を入力すると、次の配送オプションを利用できます。

    • 陸送

    • 航空便翌日配達

    • 標準

    • 翌日配達

  • 商品を別々に発送 – 顧客はカート内の商品ごとに異なる発送先住所と配送オプションを指定できます。

  • デジタル – 顧客がデジタル アイテムを注文する場合、顧客は配信用のメール アドレスを入力する必要があります。

すべてのアイテムに発送先住所と配送オプションがある場合、[請求へ進む] ボタンが有効になり、顧客はチェックアウト プロセスの次のステップに進むことができます。

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

ライブ ストアフロントでは、顧客はボタンを使用してチェックアウト プロセスのステップ間を前後に移動できます。顧客が [請求へ進む] をクリックすると、それまで入力済みの配送情報が保存されますが、顧客がチェックアウト プロセスを終了してショッピングを続行した場合も保持されます。既定では、顧客が [ショッピングを続ける] ボタンをクリックすると、ホームページが表示されます。これは、チェックアウト ステップ プロバイダーによって決定されます。

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

エクスペリエンス エディターでの請求レンダリング

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

  • Braintree サードパーティ決済管理サービスによる統合決済

  • ギフト カード支払い

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

注記

会計時にオンライン決済を可能にするために、Storefront サイト テンプレートには、BrainTree との統合が含まれています。BrainTree に問い合わせ、契約を交渉し、必要なマーチャント ID を取得します。ストアフロントの開発やテスト用に開発者アカウントがあり、カスタムの Commerce コンポーネントを作成して選択した決済プロバイダーと統合できます。

請求書送付先には、次のオプションがあります。

  • 発送先住所と同じ – [すべてのアイテムを 1 回で発送] オプションが配送ページで選択されている場合にのみ利用可能。発送先が複数指定されている場合は、顧客は登録されている住所から選択するか、新たに入力する必要があります

  • 登録されている住所から選ぶ – 以前にアカウントに使用されたすべての請求書送付先住所と発送先住所が表示されます。

  • 別のアドレスを使用 – 新しいアドレスを入力します。

レンダリングでは、Braintree 統合決済管理を使用してクレジット カード支払いを受け入れます。顧客はクレジット カード情報を入力し、[支払いを検証] をクリックして、金額を確認します。

ギフト カード支払いを追加するには、顧客は [ギフト カードを適用] セクションを展開し、ギフト カード番号を入力して [残高を取得] を押します。ギフト カードが有効な場合、残高が表示されます。その後、顧客は注文の全額を支払いとして適用するか、それより小さい額を入力して適用することができます。

注記

支払いの一部にギフト カードを適用し、残高をクレジット カードで支払う場合は、最初にギフト カードを入力する必要があります。クレジット カード情報を入力すると、現在の残高がクレジット カードに適用され、後でクレジット カードの金額を変更することはできません。

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

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

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

レビュー レンダリングを使用して、顧客が注文をレビューして確認できるようにします。これは、請求および配送のステップが完了した後に発生します。レビュー レンダリングは注文を要約し、顧客が現在の注文をレビューして購入を確認できるようにします。

エクスペリエンス エディターでは、このレンダリングは次のように表示されます。

エクスペリエンス エディターでのレビュー レンダリング

ライブ ストアフロントでは、このレンダリングは次のように表示されます。

ライブ ストアフロントでのレビュー レンダリング

顧客が注文をする場合、[注文を確認] をクリックします。既定では、[注文を確認] をクリックすると、顧客に対して [注文確認] ページが表示されます。

設定

[コントロール プロパティ] ダイアログ ボックスで、レビュー レンダリングの次のプロパティを設定できます。

プロパティ

用途

請求ページURL

請求書送付先を編集リンクを設定します。

配送ページURL

発送先住所を編集リンクを設定します。

注記

訪問者がクライアント側の検証を迂回しようとした場合、たとえば、確認レンダリングでページの URL に直接アクセスしてから注文を送信すると、Commerce Engine は注文を拒否し、エラーが表示されます。

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

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

エクスペリエンス エディターでの注文確認レンダリング