Commerce カート レンダリング

概要

ショッピング カートの内容を表示するためのレンダリングを含む、Commerce カート グループの概要。

Commerce カート レンダリングをストアフロントに追加して、顧客がストアフロントを閲覧するときにショッピング カートにアイテムを追加できるようにすることができます。このトピックでは、ツールボックスの [Commerce カート] セクションからアクセスできるレンダリングについて説明します。

次の画像は、ライブ ストアフロントの商品の詳細ページ (PDP) の例を示しています。

ライブ ストアフロントでの商品ページの例

PDP で、顧客が [カートに追加] をクリックすると、無料ギフトのセレクション レンダリングとミニカート レンダリングがそれに応じて更新されます。同様に、ショッピング カート ページでは、無料ギフトのセレクション レンダリング、ショッピング カート品目レンダリング、ショッピング カート合計レンダリング、プロモーション コード レンダリングが通信し、それに応じて更新されます。

次の画像は、ショッピング カート ページの例を示しています。

ライブ ストアフロントのショッピング カート ページの例

顧客は匿名でストアフロントを閲覧し、アイテムをカートに追加できます。顧客がサイトを匿名で閲覧中にカートにアイテムを追加した場合、それらのアイテムはログインに成功した後にカートに残ります。顧客がログイン中に商品をカートに追加すると、セッションが終了した後にも商品はカートに残ります。後で、顧客が匿名でカートにアイテムを追加してログインすると、保存されたカートは匿名のカートとマージされます。

カート マージ機能の図。

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

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

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

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

無料ギフトのセレクション レンダリングを使用して、顧客が無料ギフトとして選択できる商品のリストを表示します。Storefront サイト テンプレートでは、このレンダリングはショッピング カート ページで使用されます。ただし、商品の詳細ページで無料ギフトのセレクション レンダリングを使用することもできます。顧客が無料ギフトの対象となる商品をカートに追加すると、無料ギフトのセレクションが表示されます。顧客が無料ギフトの条件を満たすまで、無料ギフトのセレクション レンダリングは非表示になります。どの商品を無料ギフトとして用意するかは Commerce Business Tools で設定します。概要については、Discover Sitecore チャンネルの動画「Free Gift with Purchase」を参照してください。

注記

商品バンドルはサポートされていません。追加の FAQ については、「動的バンドルと無料ギフトのセレクションに関する FAQ」を参照してください。

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

PDP に無料ギフトのセレクション レンダリングを設置するかどうかはオプションですが、設置すると、顧客が受け取り資格のある無料ギフトをすぐに選択するように求められるため、使いやすさが向上します。既定では、顧客が無料ギフトを選択しない場合、アクセスするすべてのページで、無料ギフトを選択するまでメッセージが表示されます。Scriban テンプレートと関連する JavaScript を変更することで既定の動作を変更して、カートに追加イベントがカートに追加レンダリングによってトリガーされた場合にのみ無料ギフトのセレクション レンダリングが表示されるようにすることができます。

無料ギフトのセレクション レンダリングの一部としてバリアント プロパティ (色やサイズなど) を表示するには、Commerce Business Tools for Merchandising で、商品バリアントの表示プロパティを編集します。[表示プロパティを編集] ダイアログ ボックスで、[Display On Site] チェックボックスをオンにします。

重要

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

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

エクスペリエンス エディターでの無料ギフトのセレクション レンダリング。

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

注記

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

カートに表示される無料ギフトのセレクション レンダリング。

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

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

「ギフトをもらう」アクション後のショッピング カート ページ。

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

商品の詳細ページでの無料ギフトのセレクション レンダリング。

注記

Scriban テンプレートを変更して、無料ギフトのセレクション レンダリングをカスタマイズします。

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

エクスペリエンス エディターに表示されるミニカート レンダリング。

注記

ミニカート - 廃止予定レンダリングは、既存のサイトでのみ使用でき、レンダリング バリアントの Scriban テンプレートではなく MVC ビューに基づいています。

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

顧客に無料ギフトの受け取り資格があり、無料ギフトを選択した場合、次の画像で強調表示されているように、無料ギフトがミニカートにも表示されます。

無料ギフトを表示しているミニカート。

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

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

重要

パフォーマンスを向上させるには、ミニカート数のキャッシュとミニカートの再計算を無効にします。

設定

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

注記

ミニカートのラベルやミニカート レンダリング用のローディング画像は変更することができます。ミニカートが読み込み中であることを示すために表示される画像をカスタマイズするには、メディア ライブラリに、使用する画像をアップロードする必要があります。

プロパティ

用途

カートを表示 リンク

ショッピング カート ページへのリンクを設定します。

レジに進む リンク

チェックアウト プロセスの最初のページへのリンクを設定します。

レジに進む ボタンを非表示

[レジに進む] ボタンの表示/非表示を設定します。無料ギフト機能を使用していて、ショッピング カート ページで無料ギフトのセレクション レンダリングを設定している場合は、[レジに進む] ボタンを非表示にして、顧客を PDP に強制的にアクセスさせ、無料ギフトを選択させることができます。

注記

Scriban テンプレートを変更して、ミニカート レンダリングをカスタマイズします。

ショッピング カート品目レンダリングを使用して、ショッピング カートの内容を各商品アイテムの品目で表示します。このレンダリングは通常、チェックアウト プロセス中に多くのページで使用され、たとえばショッピング カート ページでは、すべての内容を表示するように設定されています。チェックアウト プロセスの以降のページでは通常、レンダリングによって表示される情報が少なくなり、内容を更新できなくなります。すべての内容をレンダリングするように設定されている場合、各品目には、商品画像、商品ページへのリンク付きの商品名、バリアント、単価、数量、品目合計、さらに品目を削除するためのアイコンが含まれます。ミニカート レンダリングとは異なり、顧客は各カート品目の数量を更新できます。エクスペリエンス エディターでページにレンダリングを追加すると、次のようになります。

エクスペリエンス エディターに表示されるショッピング カート品目レンダリング

注記

ショッピング カート品目 - 廃止予定レンダリングは、既存のサイトでのみ使用でき、Scriban テンプレートの代わりにレンダラーを使用します。

商品バンドルの場合、バンドルを構成する個々のアイテムは、商品画像、商品名、利用可能なバリアント、および数量を表示するインデントされた行 (サブライン) に表示されます。個々のサブラインに表示される数量は、バンドルごとです。顧客は、バンドルをカートに追加した後で、バンドルに対して選択したバリアントまたは数量を変更することはできません。変更を行うには、現在の商品バンドルをカートから削除し、必要な商品バリアントを追加して再度追加する必要があります。

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

ライブ ストアフロントのショッピング カート品目。

注記

ショッピング カート品目レンダリングで表示される画像は、サイト レベルで設定されます。

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

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

チェックアウト プロセスの注文の概要

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

エクスペリエンス エディターに表示される注文プレビュー

注記

ショッピング カート品目 - 廃止予定レンダリングは、既存のサイトでのみ使用でき、レンダリング バリアントの Scriban テンプレートではなく MVC ビューに基づいています。

設定

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

プロパティ

用途

表示

テーブル ヘッダー

削除ボタン

数量

単価

発送情報

サブライン

ショッピング カート品目セクションに表示するアイテムの横にあるチェックボックスをオンにします。

スタイリング - Commerce

コンパクト カート

ショッピング カート品目コンポーネントを小さくコンパクトなビューで表示します。

メイン タイトル

ショッピング カート品目のコンテンツのフォント サイズを 30 px に設定します。

余白無し

余白を狭くします。

塗りつぶされた主ボタン

塗りつぶされた主ボタンを表示します (表示されている場合)。

主ボタンの線

境界線のある主ボタンを表示します。

角丸コンテナー

角が丸いショッピング カート品目コンテナーを表示します。

二次ボタンの線

境界線のある二次ボタン (表示されている場合) を表示します。

二次タイトル

ショッピング カート品目のコンテンツのフォント サイズを 18 px に設定します。

注記

Scriban テンプレートを変更して、ショッピング カート品目レンダリングをカスタマイズします。

プロモーション コード レンダリングを使用して、顧客が注文の割引コードを入力できるようにします。通常、ショッピング カート ページのプロモーション コード レンダリングを使用します。顧客は割引コードを [割引コード] フィールドに追加し、[割引コードを追加] をクリックします。顧客が入力する割引コードごとに新しい品目がレンダリングされます。各品目には [削除] アイコンがあり、顧客が割引コードを削除できるようになっています。

エクスペリエンス エディターで、Storefront ブランドのテーマを適用すると、次のように表示されます。

プロモーション コード レンダリング

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

ライブ ストアフロントでのプロモーション コード レンダリング

ショッピング カート合計レンダリングを使用して、ショッピング カートの内容の合計金額を要約します。このレンダリングは通常、ショッピング カート ページなどのチェックアウト中に多くのページで使用されます。これは、顧客がチェックアウトを進めているときに、以降のチェックアウト ページでも使用されます。レンダリングされたコンテンツはすべての場合で同じです。エクスペリエンス エディターで、Storefront ブランドのテーマを適用すると、次のように表示されます。

ショッピング カート合計レンダリング

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

チェックアウト プロセスの注文の概要

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