---
title: "コマースカートのレンダリング"
slug: "commerce-cart-renderings"
abstract: "ショッピングカートの内容を表示するレンダリングを含むCommerce Cartグループの概要。"
---
# コマースカートのレンダリング

コマースカートのレンダリングを店舗に追加すれば、顧客が店舗を閲覧する際に商品をカートに追加できます。このトピックでは、ツールボックスの **コマースカート** セクションからアクセス可能なレンダリングについて説明します。

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

![Example of the product page on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/CartRenderingsPDP.png)

PDPでは、顧客が **カートに追加**をクリックすると、無料ギフト選択のレンダリングとミニカートのレンダリングが適切に更新されます。同様に、ショッピングカートページでは、無料ギフト選択レンダリング、ショッピングカートラインレンダリング、ショッピングカート合計レンダリング、プロモーションコードのレンダリングが適切に連携し更新されます。

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

![Example of a shopping cart page on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/ShoppingCartPage10plus.png)

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

![Illustration of cart merge functionality.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/CartMerge.png)

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

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

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

![Add To Cart rendering](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/AddToCartBranded.png)

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

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

無料ギフトセレクションレンダリングを使って、顧客が無料ギフトを選べる商品のリストを表示します。ストアフロントサイトのテンプレートでは、このレンダリングはショッピングカートページで使用されます。ただし、商品詳細ページでは無料ギフトセレクションレンダリングも使用できます。お客様が無料ギフトの権利を得る商品をカートに追加すると、無料ギフトセレクションが表示されます。フリーギフトセレクションのレンダリングは、お客様が無料ギフトの条件を満たすまで非表示になります。コマースBusiness Toolsでどの商品が [無料ギフト](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/work-with-promotions.html#UUID-e8015345-6954-5e38-12f5-38e7d82acb39_para-idm273167555154294) として利用可能か設定できます。ビデオ概要については、Discover Sitecoreチャンネルの「 [購入時の無料ギフト](https://www.youtube.com/watch?v=xPD-3QXIUCY) 」をご覧ください。

> !注製品バンドルはサポートされていません。追加のFAQについては、[ダイナミックバンドルおよび無料ギフトセレクション](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/dynamic-bundle-and-free-gift-selection-faq.html "Dynamic Bundle and Free Gift Selection 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** 」チェックボックスを選択します。

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

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

![Free Gift Selection rendering in the Experience Editor.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/FreeGiftSelectionInEE.png)

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

> !注無料ギフトセレクションレンダリングに表示される画像は [、サイトレベルで設定](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/configure-the-source-for-catalog-images.html)されています。

![Free Gift Selection rendering displayed in the cart.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/FreeGiftSelectionLiveStorefront.png)

必要に応じて**「フリーギフトセレクション**」セクションで[ラベルを変更](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/modify-a-label-for-a-rendering-that-uses-a-scriban-template.html)できます。また、フリーギフトリストの縦レイアウトを、新しいレンダリングバリアントを追加することで横方向に変更することもできます。

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

![Shopping Cart page after Claim Gift action.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/FreeGiftSelectionAfterSelection.png)

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

![Free Gift Selection rendering on the Product Detail Page.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/FreeGiftPDP.png)

> !注無料ギフトセレクションのレンダリングは、[Scribanテンプレート](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/customizing-the-free-gift-selection-rendering.html)を修正することでカスタマイズできます。

## ミニカートレンダリング

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

![Minicart rendering displayed in the Experience Editor.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/MinicartEE.png)

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

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

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

![Minicart showing a free gift.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/MinicartLive10.png)

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

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

> !重要パフォーマンスを向上させるために、[ミニカートカウントキャッシュを無効にし、ミニカートの再計算](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/configure-the-minicart-rendering.html)も可能です。

##### 構成

[コントロールプロパティ](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/configure-a-commerce-rendering.html "Configure a Commerce rendering")のダイアログボックスで、ミニカートレンダリング用の以下のプロパティを設定できます。

> !注ミニ [カートのラベル](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/modify-a-label-for-a-rendering-that-uses-a-scriban-template.html) やレンダリング画像の読み込み画像を変更することができます。ミニカートが読み込まれていることを示す画像をカスタマイズするには、使用したい画像をメディアライブラリに [アップロード](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-platform/en/upload-a-file-to-the-media-library.html) する必要があります。

財産

使用方法

カートリンクを見る

ショッピングカートページへのリンクを設定してください。

チェックアウトリンク

チェックアウトのプロセスで最初のページへのリンクを設定してください。

チェックアウトボタンを非表示

チェックアウトボタンを表示するか非表示するかを設定してください。無料ギフト機能を使っていて、ショッピングカートページで無料ギフト選択レンダリングを設定している場合、顧客がPDPにアクセスして無料ギフトを受け取るよう、チェックアウトボタンを非表示にすると良いでしょう。

> !注ミニカートのレンダリングは、[Scribanテンプレート](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/customizing-the-minicart-rendering.html)を修正することでカスタマイズできます。

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

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

![Shopping Cart Lines rendering displayed in the Experience Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/ShoppingCartLines10.png)

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

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

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

![Shopping Cart Lines on the live storefront.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/ShoppingCartLinesLive.png)

> !注ショッピングカートラインのレンダリングで表示される画像は [、サイトレベルで設定](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/configure-the-source-for-catalog-images.html)されています。

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

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

![Checkout process order summary](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/CheckoutProcessShoppingCartContents.png)

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

![Order Preview shown in the Experience Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/OrderPreviewEE.png)

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

##### 構成

[コントロールプロパティ](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/configure-a-commerce-rendering.html "Configure a Commerce rendering")ダイアログボックスで、ショッピングカートラインのレンダリング用に以下のプロパティを設定できます。

財産

使用方法

**ディスプレイ**

テーブルヘッダー  
  
削除ボタン  
  
数量  
  
単価  
  
船隻情報  
  
サブライン

ショッピングカートラインのセクションで表示したい商品の横にあるチェックボックスを選択してください。

**スタイリング - 商業**

コンパクトカート

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

メインタイトル

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

マージンなし

これにより、より狭い差が設定されます。

プライマリボタンが満たされました

表示されている場合は、しっかりとしたプライマリボタンが表示されます。

プライマリーボタンライン

主ボタンを縁取りで表示します。

丸角コンテナ

角が丸みを帯びたショッピングカートラインのコンテナを展示しています。

セカンダリーボタンライン

セカンダリボタン(表示されている場合)に境界線が表示されます。

セカンダリータイトル

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

> !注ショッピングカートラインのレンダリングは、[Scribanテンプレート](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/customizing-the-shopping-cart-lines-rendering.html)を修正することでカスタマイズできます。

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

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

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

![Promotion Codes rendering](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/PromotionCodesEE.png)

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

![Promotion Codes rendering on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/PromotionCodesLive.png)

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

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

![Shopping Cart Total rendering](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/ShoppingCartTotalMockUpTheme.png)

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

![Checkout process order summary](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/CheckoutProcessShoppingCartContents.png)

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