コマースカートのレンダリング

カートに追加レンダリング

商品詳細ページで「カートに追加」レンダリングを使い、顧客が現在の商品や商品バンドルをショッピングカートに追加できるようにします。

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

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

無料ギフトセレクションレンダリング

無料ギフトセレクションレンダリングを使って、顧客が無料ギフトを選べる商品のリストを表示します。ストアフロントサイトのテンプレートでは、このレンダリングはショッピングカートページで使用されます。ただし、商品詳細ページでは無料ギフトセレクションレンダリングも使用できます。お客様が無料ギフトの権利を得る商品をカートに追加すると、無料ギフトセレクションが表示されます。フリーギフトセレクションのレンダリングは、お客様が無料ギフトの条件を満たすまで非表示になります。コマースBusiness Toolsでどの商品が 無料ギフト として利用可能か設定できます。ビデオ概要については、Discover Sitecoreチャンネルの「 購入時の無料ギフト 」をご覧ください。

!注製品バンドルはサポートされていません。追加のFAQについては、ダイナミックバンドルおよび無料ギフトセレクションFAQをご覧ください。

無料ギフトセレクションのレンダリングは、少なくともショッピングカートページで利用可能であることを確認しましょう。なぜなら、顧客に無料ギフトを贈るプロモーションは、特定の商品を購入する以外の基準に基づいている場合があるからです。それは、例えばカート総数など、Commerce Engineで定義された任意の条件に基づいており、顧客がチェックアウトプロセスを始めるまでキャッシュされないことがあります。

PDP上で無料ギフトセレクションのレンダリングは任意ですが、顧客が即座に自分が受け取るべき無料ギフトを選択するよう促されるため、使いやすさが向上します。デフォルトでは、顧客が無料ギフトを請求しない場合、選択したすべてのページでプロンプトが表示されます。デフォルトの動作を変更することで、Scribanテンプレートと関連するJavaScriptを変更し、Free Gift SelectレンダリングはAdd to Cartレンダリングによって「Add to Cart」イベントがトリガーされた場合にのみ表示されるようにできます。

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

!重要商品詳細ページで無料ギフトセレクションのレンダリングを使用すると、このページが頻繁に閲覧されるためパフォーマンスに影響を与える可能性があります。比較すると、ショッピングカートページはチェックアウト時のみ閲覧されます。

エクスペリエンスエディターでストアフロントブランドテーマを適用すると、無料ギフトセレクションのレンダリングは以下のようになります:

ライブストアフロントのショッピングカートページでは、無料ギフトセレクションのレンダリングで顧客が選べる無料ギフトのリストが表示されます。以下の例のように:

!注無料ギフトセレクションレンダリングに表示される画像は 、サイトレベルで設定されています。

必要に応じて**「フリーギフトセレクション**」セクションでラベルを変更できます。また、フリーギフトリストの縦レイアウトを、新しいレンダリングバリアントを追加することで横方向に変更することもできます。

お客様が無料ギフトを受け取った後、ショッピングカートページは以下のように更新されます:

商品詳細ページでは、無料ギフトセレクションのレンダリングは以下の通りです:

!注無料ギフトセレクションのレンダリングは、Scribanテンプレートを修正することでカスタマイズできます。

ミニカートレンダリング

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

!note The Minicart - 廃止されたレンダリングは既存サイトのみで利用可能で、レンダリングバリアントのScribanテンプレートではなくMVCビューに基づいています。

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

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

顧客は商品の詳細を見るために行をクリックするか、カートから行を削除するために削除アイコンをクリックできます。

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

!重要パフォーマンスを向上させるために、ミニカートカウントキャッシュを無効にし、ミニカートの再計算も可能です。

ショッピングカートラインのレンダリング

ショッピングカートラインレンダリングを用いて、ショッピングカートの内容を各商品ごとにラインで表示します。レンダリングは通常、チェックアウトプロセス中の複数のページで使われます。例えばショッピングカートページでは、すべてのコンテンツを表示するように設定されています。チェックアウト後のページでは、レンダリングは一般的に情報量が少なく、コンテンツの更新はできません。すべてのコンテンツをレンダリングする設定では、各行に商品画像、商品名(商品ページへのリンク)、バリアント、単価、数量、ライン合計、そしてラインを削除するアイコンが含まれています。ミニカートレンダリングとは異なり、顧客は各カートラインの数量を更新できます。エクスペリエンスエディターでレンダリングを追加すると、以下のようになります。

!注ショッピングカートライン - 廃止されたレンダリングは既存サイトのみで利用可能で、Scribanテンプレートの代わりにレンダラーを使用しています。

製品バンドルの場合、バンドルを構成する各品目は、商品画像、製品名、利用可能なバリアント、数量を示すインデント行(サブライン)に表示されます。個々のサブラインの表示量はバンドルごあたりです。顧客は、カートに追加されたバンドルのバリアントや数量を変更することはできません。変更は、現在の商品バンドルをカートから削除し、希望する製品バリアントで再度追加することでのみ可能です。

請求された無料ギフトには無料ギフトラベルが付けられ、数量は変更できません。ただし、カートから無料ギフトを削除することは可能であり、顧客は希望すれば別の無料ギフトを選択できます。

!注ショッピングカートラインのレンダリングで表示される画像は 、サイトレベルで設定されています。

カートラインに何らかの割引が適用される場合、割引の種類は単価の下に、割引金額はライン合計の下に表示されます。

チェックアウトのページでは、縮小版が通常、顧客がチェックアウトを進めるにつれてカートの読み取り専用内容を表示するように設定されます。

エクスペリエンスエディターの注文プレビューは以下の通りです:

!注ショッピングカートライン - 廃止されたレンダリングは既存サイトのみで利用可能で、レンダリングバリアントのScribanテンプレートではなくMVCビューに基づいています。

昇進コードのレンダリング

プロモーションコードのレンダリング機能を使って、顧客が注文の割引コードを入力できるようにします。通常、ショッピングカートページでプロモーションコードのレンダリングを使います。お客様は割引 コード 欄に割引コードを追加し、「 割引コードを追加」をクリックできます。顧客が入力した割引コードごとに新しい行が表示されます。各行には 「削除」 アイコンがあり、顧客は割引コードを削除できます。

エクスペリエンスエディターでストアフロントブランドテーマを適用すると、以下のようになります:

以下のライブストアフロントの例では、割引コードがカート小計から10%割引を提供します。

ショッピングカート トータルレンダリング

ショッピングカートの合計レンダリングは、ショッピングカートの中身の総額を要約するために使います。このレンダリングは通常、ショッピングカートページなど、チェックアウト中の複数のページで使用されます。また、顧客がチェックアウトを進む際の後のチェックアウトページでも使用されます。レンダリングされるコンテンツは、いずれの場合も同じです。エクスペリエンスエディターでストアフロントブランドテーマを適用すると、以下のようになります:

チェックアウトのページでは、縮小版が通常、顧客がチェックアウトを進めるにつれてカートの読み取り専用内容を表示するように設定されます。

顧客がショッピングカートの列で何かを変更した場合、合計額は自動的に更新されます。