Commerce Cartレンダリング

商品詳細ページでカートに追加レンダリングを使用して、お客様が現在の商品または商品バンドルをショッピングカートに追加できるようにします。

エクスペリエンス エディターで、基本的なカスタム テーマが適用されたページにレンダリングを追加すると、次のようになります。

顧客がAdd to cartをクリックすると、Quantityフィールドが正の整数であることが検証されます。 Quantityフィールドが検証に合格すると、システムは指定された数量、現在の製品の製品ID、および必要に応じてカタログとバリアントIDを使用して製品をショッピングカートに追加します。製品が別の行として追加されるかどうかは、Commerce Engineのロールアップ プロパティの構成によって異なります。オンにすると、まったく同じ製品バリアントを持つ明細行が1つに統合されます。

無料ギフト選択レンダリングを使用して、顧客が無料ギフトを選択できる製品のリストを表示します。Storefrontサイト テンプレートでは、このレンダリングがショッピング カート ページで使用されます。ただし、商品詳細ページの無料ギフトセレクションレンダリングを使用することもできます。お客様が無料ギフトを受け取る権利を持つ商品をカートに追加すると、無料ギフトの選択肢が表示されます。無料ギフト選択レンダリングは、顧客が無料ギフトの基準を満たすまで非表示になります。コマースビジネスツールで 無料ギフト として使用できる製品を設定します。ビデオの概要については、Discover Sitecoreチャネルの 「購入による無料ギフト 」を参照してください。

少なくとも、顧客に無料ギフトを提供するプロモーションは、特定の製品を購入する以外の条件に基づいている可能性があるため、ショッピング カート ページで無料ギフト選択レンダリングを利用できることを確認する必要があります。これは、Commerce Engineで定義された任意の修飾子 (カートの合計など) に基づくことができますが、顧客がチェックアウト プロセスを開始するまでキャッシュされない場合があります。

PDPでFree Gift Selectionレンダリングを行うことはオプションですが、顧客が受け取る資格のある無料ギフトをすぐに選択するように求められるため、使いやすさが向上します。デフォルトでは、お客様が無料ギフトを請求しない場合、お客様がアクセスするすべてのページで、ギフトを選択するまでプロンプトが表示されます。デフォルトの動作を変更するには、Scribanテンプレートと関連するJavaScriptを変更して、Add to Cartレンダリングによってadd-to-cartイベントがトリガーされたときにのみFree Gift Selectionレンダリングが表示されるようにすることができます。

バリアントのプロパティ (色やサイズなど) をFree Gift Selectionレンダリングの一部として表示するには、Commerce Business Tools for Merchandisingで、製品バリアントの表示プロパティを編集します。 Edit Display Propertiesダイアログボックスで、Display On Siteチェックボックスを選択します。

エクスペリエンス エディターで、Storefront Brandedテーマが適用されている場合、Free Gift Selectionレンダリングは次のように表示されます。

ライブ ストアフロントの ショッピング カート ページでは、次の例に示すように、Free Gift Selectionレンダリングに、顧客が選択できる無料ギフトのリストが表示されます。

必要に応じて、Free Gift Selectionセクションのラベルを変更できます。また、無料ギフト選択レンダリングに新しいレンダリング バリアントを追加することで、無料ギフト リストの垂直レイアウトを水平レイアウトに変更することもできます。

お客様が無料ギフトを請求すると、ショッピングカートページは次のように更新されます。

商品詳細ページでは、無料ギフトセレクションのレンダリングは次のように表示されます。

カタログページと製品ページでミニカートレンダリングを使用して、ショッピングカートの内容の概要を表示します。通常、ページのヘッダーに配置されているため、すべてのページで使用できます。ストアフロント ブランド テーマが適用されたエクスペリエンス エディターのページにミニカート レンダリングを追加すると、次のようになり、モック データと画像に基づいてすべての詳細が表示されます。

ライブストアフロントでは、ショッピングカートの数が常に表示され、カート内の商品数が表示されます。お客様がショッピングカートのリンクにマウスを合わせるか、リンクをクリックすると、カートの内容を示すドロップダウンウィンドウが表示されます。ショッピングカートに商品がある場合は、ショッピングカートの明細行と合計が表示されます。

お客様が無料ギフトの資格があり、それを請求した場合、無料ギフトは次の画像で強調表示されているようにミニカートにも表示されます。

お客様は、行をクリックして商品の詳細を表示するか、削除アイコンをクリックしてカートから行を削除できます。

お客様がView cartをクリックすると、ショッピングカートページが表示されます。お客様がCheckoutをクリックすると、最初のチェックアウトステップが表示されます。両方のボタンのリンクを設定できます。

構成

コントロール プロパティ ダイアログ ボックスでは、ミニカート レンダリングの次のプロパティを構成できます。

ショッピング カートの明細行レンダリングを使用して、ショッピング カートの内容を各製品アイテムの線とともに表示します。レンダリングは通常、チェックアウト プロセス中に、すべてのコンテンツを表示するように構成されているショッピング カート ページなど、いくつかのページで使用されます。チェックアウト プロセスの後続のページでは、通常、レンダリングで表示される情報が少なくなり、コンテンツを更新できません。すべてのコンテンツをレンダリングするように構成されている場合、各行には、製品画像、製品ページへのリンクを含む製品名、バリアント、単価、数量、行の合計、および行を削除するためのアイコンが含まれます。ミニカートのレンダリングとは異なり、お客様は各カートラインの数量を更新できます。エクスペリエンス エディターでレンダリングをページに追加すると、次のようになります。

製品バンドルの場合、バンドルを構成する個々の品目は、製品画像、製品名、使用可能なバリアント、および数量を表示するインデントされた行 (小行) に表示されます。個々のサブラインに表示される数量はバンドルごとです。お客様は、バンドルがカートに追加された後に、バンドルの選択したバリエーションまたは数量を変更することはできません。変更は、現在の商品バンドルをカートから削除し、目的の商品バリエーションで再度追加することによってのみ実行できます。

請求された無料ギフトは、無料ギフトラベルで識別され、数量を変更することはできません。ただし、カートから無料ギフトを削除することは可能であり、これは、顧客が必要に応じて別の無料ギフトを選択できることを意味します。

カートの品目に何らかのタイプの割引が適用される場合、割引のタイプは単価の下に表示され、割引額は品目の合計の下に表示されます。

チェックアウトプロセスのページでは、通常、縮小されたバージョンが、顧客がチェックアウトを進めるにつれてカートの読み取り専用コンテンツを表示するように構成されます。

エクスペリエンス エディターでは、注文のプレビューは次のように表示されます。

構成

コントロール プロパティ ダイアログ ボックスでは、ショッピング カートの明細行レンダリングの次のプロパティを構成できます。

プロモーションコードレンダリングを使用して、お客様が注文のクーポンコードを入力できるようにします。通常は、ショッピング カート ページでのプロモーション コード レンダリングを使用します。お客様は、Discount codeフィールドにクーポンコードを追加し、Add discount codeをクリックできます。顧客が入力する割引コードごとに新しい行が表示されます。各行にはDeleteアイコンが含まれているため、お客様はクーポンコードを削除できます。

エクスペリエンス エディターで、Storefront Brandedテーマが適用されている場合、次のように表示されます。

ライブストアフロントの次の例では、割引コードにより、お客様はカートの小計から10%の割引を受けることができます。

ショッピングカート合計レンダリングを使用して、ショッピングカートの内容の合計金額を集計します。レンダリングは通常、ショッピング カート ページなど、チェックアウト時にいくつかのページで使用されます。また、顧客がチェックアウトを進める際の後続のチェックアウトページでも使用されます。レンダリングされるコンテンツは、すべてのケースで同じです。エクスペリエンス エディターで、Storefront Brandedテーマが適用されている場合、次のように表示されます。

チェックアウトプロセスのページでは、通常、縮小されたバージョンが、顧客がチェックアウトを進めるにつれてカートの読み取り専用コンテンツを表示するように構成されます。

顧客がショッピングカートの品目で何かを変更すると、合計が自動的に更新されます。