Commerce Cartレンダリング
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Commerce Cartレンダリングをストアフロントに追加して、取引先担当者がストアフロントを閲覧するときにショッピングカートにアイテムを追加できるようにすることができます。
Example product page on the live storefront
Example shopping cart page
お客様は、ストアフロントを閲覧し、匿名でカートに商品を追加することができます。顧客が匿名でサイトを閲覧しているときにカートにアイテムを追加した場合、それらのアイテムはログインが成功した後もカートに残ります。お客様がログイン中に商品をカートに追加した場合、セッション終了後も商品はカートに残ります。その後、顧客が匿名でカートにアイテムを追加してログインすると、保存されたカートは匿名カートとマージされます。
このトピックでは、SXAツールボックスのCommerce Cartグループにある次のレンダリングについて説明します。
お買い物カゴに追加
お買い物カゴに追加
「カートに追加」レンダリングを使用して、顧客が現在の製品をショッピングカートに追加できるようにします。商品詳細ページでは、カートに追加レンダリングを使用します。
エクスペリエンス エディターで、基本的なカスタム テーマが適用されたページにレンダリングを追加すると、次のようになります。
顧客がAdd to cartをクリックすると、システムはQuantityフィールドを検証します。フィールドが空の場合は、デフォルトのテキスト「 このフィールドは必須です」というメッセージが表示されます。フィールドに正の整数以外の値が含まれている場合は、デフォルトのテキスト「 Please enter a value greater than or equal to 1」というメッセージが表示されます。
Quantityフィールドが検証に合格すると、指定した数量、現在の製品の製品ID、および必要に応じてカタログとバリアントIDを含むカート品目がショッピング カートに追加されます。
ミニカート
ミニカート
ミニカート レンダリングを使用して、ショッピング カートの内容の概要を表示します。ミニカートレンダリングは、カタログページと商品ページで使用します。
ストアフロント モックアップ テーマが適用されたエクスペリエンス エディターのページにミニカート レンダリングを追加すると、次のようになります。
ライブストアフロントでは、ショッピングカートのリンクは常に表示されます。お客様がショッピングカートのリンクにマウスを合わせるか、リンクをクリックすると、ミニカートのレンダリングが表示されます。ショッピングカートに商品がある場合は、ショッピングカートの明細行と合計が表示されます。
お客様は、行をクリックして商品の詳細を表示するか、削除アイコンをクリックしてカートから行を削除できます。
お客様がView cartをクリックすると、Shopping Cartページが表示されます。お客様がCheckoutをクリックすると、最初のチェックアウトステップが表示されます。
ショッピングカートライン
ショッピングカートライン
ショッピング カートの明細行レンダリングを使用して、ショッピング カートの内容を各製品アイテムの線とともに表示します。各行には、商品画像、商品名、商品ページへのリンク、バリエーション、単価、数量、行の合計、および行を削除するためのアイコンが含まれています。エクスペリエンス エディターでページにレンダリングを追加すると、次のようになります。
製品バンドルの場合、バンドルを構成する個々の品目は、製品画像、製品名、使用可能なバリアント、および数量を表示するインデントされた行に表示されます。個々のアイテムに表示される数量はバンドルごとです。ストアフロントでは、お客様は、バンドルがカートに追加された後に、バンドルの選択したバリエーションまたは数量を変更することはできません。変更を行うには、現在の商品バンドルをカートから削除し、目的の商品バリエーションで再度追加する必要があります。
いずれかのタイプの割引が明細行に適用される場合、割引の種類は単価の下に表示され、割引額は明細行の合計の下に表示されます。
構成
ショッピング カートの明細行の表示は、Control Propertiesダイアログ ボックスで構成します。エクスペリエンス エディターで、ショッピング カートの品目 コンポーネントがあるページに移動します。構成部品を選択し、ツールバーの「 More」、「 Edit component properties」の順にクリックします。
Control PropertiesダイアログボックスのDisplayセクションで、Shopping Cart Linesセクションに表示する項目の横にあるチェックボックスをオンにします。
Stylingセクションまでスクロールし、ショッピングカートのラインのルックアンドフィールを指定します。
-
コンパクトカート - ショッピングカートの品目コンポーネントを小さくコンパクトなビューで表示します。
-
メインタイトル - ショッピングカートラインコンテンツのフォントサイズを30pxに設定します。
-
余白なし: 余白を狭く設定します。
-
塗りつぶされたプライマリ ボタン - 塗りつぶされたプライマリ ボタンが表示されます (表示されている場合)。
-
プライマリ ボタン行 - プライマリ ボタンを境界線で表示します。
-
丸みを帯びたコーナーコンテナ - 角が丸いショッピングカートラインコンテナを表示します。
-
セカンダリ ボタン ライン - セカンダリ ボタン (表示されている場合) を境界線付きで表示します。
-
セカンダリタイトル - ショッピングカートラインコンテンツのフォントサイズを18pxに設定します。
プロモーションコード
プロモーションコード
プロモーションコードレンダリングを使用して、お客様が注文のクーポンコードを入力できるようにします。プロモーション コードは、Shopping Cartページでレンダリングします。お客様は、Discount codeフィールドにクーポンコードを追加し、Add discount codeをクリックできます。システムは、顧客が入力する各割引コードに対してレンダリングに新しい行を作成します。各行にはDeleteアイコンが含まれているため、お客様はクーポンコードを削除できます。
エクスペリエンス エディターで、ストアフロント モックアップ テーマが適用されている場合、次のように表示されます。
ショッピングカート合計
ショッピングカート合計
ショッピングカート合計レンダリングを使用して、ショッピングカートの内容の合計金額を集計します。 Shopping Cartページのショッピング カート合計レンダリングを使用します。エクスペリエンス エディターで、ストアフロント モックアップ テーマが適用されている場合、次のように表示されます。
顧客がショッピングカートの品目で何かを変更すると、合計が自動的に更新されます。