---
title: "商業カタログのレンダリング"
slug: "commerce-catalog-renderings"
abstract: "商品やカタログページのデザインに使用されるCommerce Catalogレンダリングの概要。"
---
# 商業カタログのレンダリング

SXA Storefrontには、ストア [フロント上でカタログを作成する](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/build-a-storefront-with-commerce-renderings.html "Build a storefront with Commerce renderings")ために組み合わせて使える複数のレンダリングが含まれています。このトピックでは、ツールボックス内の**Commerce Catalog**セクションからアクセス可能なレンダリングについて説明します。

## カタログアイテムコンテナレンダリング

カタログアイテムコンテナレンダリングを使って、カタログレンダリング群のデータソースとして商品項目を設定します。ランディングページで使用します。コンテナレンダリング内に追加されたすべてのカタログレンダリングは、選択した製品コンテキストを使用します。これにより、製品コンテキストが利用できないページに商品情報を表示できます。

このレンダリングをプレースホルダーに追加しても、何も表示されません。レンダリングは他のレンダリングをドロップするためのプレースホルダーです。

> !注標準のSXAコンテナコンポーネントは、カタログアイテムを指すように設定する際にカタログアイテムコンテナレンダリングと同様の機能をサポートしています。製品ページで使われるコンポーネントと良好に動作しますが、製品リストコンポーネントはカタログアイテムコンテナレンダリングのみが動作します。

![Catalog Item Container toolbar](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Commerce_Catalog_renderings-Picture_9.png)

レンダリング時の**コントロールプロパティ**ダイアログボックスで製品アイテムのデータソースを設定します。

![Control Properties](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Commerce_Catalog_renderings-Picture_11.png)

商品項目を設定し、コンテナレンダリング内にカタログレンダリングを追加すると、選択した製品の製品情報が表示されます。

コンテナレンダリング内に追加されたカタログレンダリングは、ページに直接追加された場合と同じ見た目をします。つまり、ランディングページは選択した製品の製品詳細ページと同じように見えます。

## カテゴリナビゲーションレンダリング

カテゴリーナビゲーションレンダリングの使用は今後推奨しません。推奨される代替案については、「 [利用可能なレンダリングの選択](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/choosing-between-available-renderings.html "Choosing between available renderings")」をご覧ください。

## Commerce Search結果のレンダリング

Commerce Search Resultsレンダリングは標準SXA Search Resultsレンダリングおよび[Searchサービス](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/the-sxa-search-service.html)に基づいています。レンダリングバリアントやScribanテンプレートの使用が含まれます。Commerce Search Resultsレンダリングは、いくつかの重要な違いがあるものの、SXA Search Resultsレンダリングとほぼ同一です。詳細は「 [Commerce Search Results](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/use-the-commerce-search-results-rendering.html "Use the Commerce Search Results rendering")レンダリングの使用」を参照してください。

##### 構成

[Control Properties](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/configure-a-commerce-rendering.html "Configure a Commerce rendering")ダイアログボックスの**カタログ画像**セクションで、Commerce Search Resultsレンダリング用の以下のプロパティを設定できます。

財産

使用方法

Sitecoreデジタル資産管理システムの画像を使用してください

Sitecoreデジタル資産管理(DAM)システムで保存・管理されている画像を使用するには、「 **Sitecoreデジタル資産管理システムから画像を使用する** 」チェックボックスを選択してください。このチェックボックスがクリアされると、メディアライブラリから画像が取得されます。  
  
例えば、レンダリングレベルの設定がメディアライブラリの使用で、サイトレベルの設定がデジタルアセット管理システム内の画像を使用する場合、画像はDAMから取得されます。一方で、サイトレベルの設定がクリアされ、レンダリングレベルで「 **Sitecoreデジタルアセット管理システムから画像を使用する** 」チェックボックスが選択されている場合、レンダリングはDAMから画像を取得します。  
  
\> \[!注\]  
\> [カタログ画像ソースのサイトレベル設定](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/configure-the-source-for-catalog-images.html) (*sitecore///Settings/Commerce/Catalog Configuration*)とレンダリングレベルの設定は、実行時にOR操作を用いて統合されます。どちらか一方を選択すると、画像はデジタル資産管理システムから取得されます。

> !注Commerce Search Resultsのレンダリングは、[Scribanテンプレート](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/customizing-the-commerce-search-results-rendering.html)を修正して設定します。

## プロダクトバンドルレンダリング

カタログでは、関連する商品やサービスを一つの販売可能なアイテムとしてまとめて「プロダクトバンドル」としてまとめることができます。製品バンドルには2種類あります:

-   [静的バンドル](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/static-bundles.html "Static bundles") - このタイプの商品バンドルは固定されており、買い物客はバンドル内の商品や在庫を変更できません。
-   [動的バンドル](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/dynamic-bundles.html "Dynamic bundles") - このタイプの商品バンドルは柔軟で、買い物客がバンドルから商品を追加・削除したり、商品をアップグレードしたり、各商品の数量を指定したりできます。

マーチャンダイザーは商品バンドルを構築し、バンドル内の最小・最大商品数を決定し、価格モデルを割り当てます。

例えば、商品のパッケージレンダリングを [商品詳細ページ](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-product-detail-page.html "Commerce Product Detail page")に追加することで、この販売可能な商品をストアフロントに表示します。

> !注Product Bundle Scribanテンプレートは静的バンドルと動的バンドルの両方をサポートしています。Product Bundle - 廃止されたレンダリングは静的バンドルのみをサポートし、既存サイトでのみ利用可能で、レンダリングバリアントのScribanテンプレートではなくMVCビューに基づいています。
> 
> 追加の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をご覧ください。

製品ページには製品バリアントと製品バンドルの両方のレンダリングが含まれており、通常の販売可能なアイテムとバンドルの両方を表示できます。各コンポーネントは適用されるカタログアイテムタイプを認識し、もう一方のタイプを無視するため、実行時にページ上にレンダリングされるのはどちらか一方だけです。デザイン上の目的では、両方のコンポーネントはエクスペリエンスエディターに表示されます。以下の画像では、上部コンポーネントが製品バリアントレンダリング、下部コンポーネントがプロダクトバンドルレンダリングです:

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

ライブストアフロントでは、商品バンドルはこんな感じです:

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

店舗フロントでは、バンドルに含まれるすべての構成品の在庫が確認され、最も低い在庫番号が商品バンドルの在庫番号として返されます。

> !注Product Bundleのレンダリングは[Scribanテンプレート](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/customizing-the-product-bundle-rendering.html)を修正して設定します。

## プロダクト・ファセットのレンダリング

現在では、Product Facetsレンダリングの使用を推奨しません。推奨される代替手段については [、「利用可能なレンダリングの選択](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/choosing-between-available-renderings.html "Choosing between available renderings")」をご覧ください。

## 製品画像レンダリング

製品画像レンダリングを使って、選択した製品に関連する各画像のサムネイル画像を表示します。1つのサムネイルを選択すると、そのサムネイルの大きな画像が表示されます。製品が選択されていない場合は、プレースホルダー画像が表示されます。

![Product image placeholder](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Commerce_Catalog_renderings-Picture_24.png)

##### 構成

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

財産

使用方法

Sitecoreデジタル資産管理システムの画像を使用してください

Sitecoreデジタル資産管理(DAM)システムで保存・管理されている画像を使用するには、「 **Sitecoreデジタル資産管理システムから画像を使用する** 」チェックボックスを選択してください。このチェックボックスがクリアされると、メディアライブラリから画像が取得されます。  
  
例えば、レンダリングレベルの設定がメディアライブラリの使用で、サイトレベルの設定がデジタル資産管理システム内の画像を使用する場合、画像はDAMから取得されます。一方、サイトレベルの設定が選択されておらず、レンダリングレベルで「 **Sitecoreデジタルアセット管理システムから画像を使用** 」のチェックボックスが選択されている場合、レンダリングはDAMから画像を取得します。  
  
\> \[!注\]  
\> [カタログ画像ソースのサイトレベル設定](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/configure-the-source-for-catalog-images.html) (*sitecore///Settings/Commerce/Catalog Configuration*)とレンダリングレベルの設定は、実行時にOR操作を用いて統合されます。どちらか一方を選択すると、画像はデジタル資産管理システムから取得されます。

## 製品情報レンダリング

製品情報レンダリングを使って、製品タイトル、説明、商品番号を表示します。あるいは、[標準的なSXAレンダリングのバリエーションを使って](https://doc.sitecore.com/xp/en/users/93/sitecore-experience-commerce/en/using-rendering-variants-to-display-product-information.html) 商品情報を表示することもできます。これにより、製品名、説明、商品番号の配置をそれぞれ独立して管理できます。

## 製品在庫レンダリング

商品在庫レンダリングを使い、現在の在庫状況と在庫数を在庫状況 / 在庫数として表示します。商品が選択されていない場合は、プレースホルダーデータが表示されます。

![Stock status](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Commerce_Catalog_renderings-Picture_26.png)

在庫切れの場合は「 **カートに追加** 」ボタンが無効になります。

## プロダクトリストレンダリング

製品リストレンダリングの使用はもはや推奨しません。推奨される代替案については [、「利用可能なレンダリングの間の選択](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/choosing-between-available-renderings.html "Choosing between available renderings")」をご覧ください。

## ページごとの商品リスト項目表示

現在では、製品リストのページごとの項目表示の使用は推奨しません。推奨される代替案については、「 [利用可能なレンダリングの選択](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/choosing-between-available-renderings.html "Choosing between available renderings")」をご覧ください。

## 製品リストページ情報レンダリング

製品リストページ情報レンダリングの使用はもはや推奨しません。推奨される代替案については、「 [利用可能なレンダリングの選択肢](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/choosing-between-available-renderings.html "Choosing between available renderings")」を参照してください。

## プロダクトリストソートレンダリング

製品リストのソーティングレンダリングの使用は現在推奨しません。推奨される代替案については [、「利用可能なレンダリングの選択](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/choosing-between-available-renderings.html "Choosing between available renderings")」を参照してください。

## 製品リストページャーレンダリング

製品リストのページ描画はもはや推奨していません。推奨される代替案については [、「利用可能なレンダリングの間の選択](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/choosing-between-available-renderings.html "Choosing between available renderings")」をご覧ください。

## 製品価格レンダリング

商品価格表示には商品価格のレンダリングを使用します。商品がセール中の場合、割引価格が表示され、元の価格は消線文字で表示されます。

> !note The Product Price - 廃止されたレンダリングは既存サイトのみで利用可能で、Scribanテンプレートの代わりにレンダラーを使用します。

![Product Price in the Experience Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Commerce_Catalog_renderings-Picture_12.png)

> !注Product Priceレンダリングは[Scribanテンプレート](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/customizing-the-product-price-rendering.html)を修正して設定します。

## 製品バリアントレンダリング

商品バリアントレンダリングを使って、各バリアントフィールド(例えばサイズ用と色用)にドロップダウンメニューを表示します。お客様が無効な組み合わせを選択すると、メッセージエリアにエラーメッセージが表示され、「 **カートに追加** 」ボタンは無効になります。

エクスペリエンスエディターではレンダリングはプレースホルダーのみを表示します。

![Product Variants placeholder](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Commerce_Catalog_renderings-Picture_43.png)

> !注ギフトカードの場合、カードの価値はバリエーション(バリエーション)となることがあります。

## プロモートプロダクトレンダリング

現在、Promoted Productsレンダリングの使用は推奨しません。推奨される代替案については [、「利用可能なレンダリングの選択](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/choosing-between-available-renderings.html "Choosing between available renderings")」をご覧ください。

## Search開始、訪問済みカテゴリページ、訪問済み商品ページのレンダリング

Searchの開始済み、訪問済みカテゴリページ、訪問済み製品ページのレンダリングを使って訪問者の行動を追跡します。これらのレンダリングはそれぞれ、コマース・Connect APIに個別に呼び出しを行い、関連するページイベントをxDBトリガーします。その結果のデータはエクスペリエンスプロファイルとエクスペリエンス分析の両方で閲覧可能です。

これらのレンダリングはライブストアフロントでは見えませんが、エクスペリエンスエディターのページに表示されるため、検索や編集が可能です。例えば、Search Initiatedレンダリングはエクスペリエンスエディターで次のように表示されます:

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

**Search Initiated レンダリング**

Search Initiatedレンダリングが施されたページの検索バーから検索を開始すると、そのレンダリングはCommerce ConnectでSearch Initiatedページイベントをトリガーします。SXA Storefrontテンプレートでは、Search InitiatedレンダリングがデフォルトのCommerceヘッダー部分デザインに含まれています。

**訪問されたカテゴリページレンダリング**

顧客がVisited Category Pageレンダリングでページを訪れると、そのレンダリングはCommerce ConnectでCategoryPageVisitedページイベントをトリガーします。Storefrontサイトテンプレートでは、Visited Category Pageのレンダリングがカテゴリページのメインコンテンツエリアに含まれています。

**訪問された製品ページレンダリング**

顧客がVisited Product Pageのレンダリングでページを訪れると、そのレンダリングはCommerce ConnectでProductPageVisitedページイベントをトリガーします。Storefrontサイトテンプレートでは、Visited Product Pageのレンダリングは製品詳細ページ(PDP)のメインコンテンツエリアに含まれています。

分析データを収集し、他のストアフロントページの顧客訪問を追跡するには、そのページに「Visited Product Page」のレンダリングを追加してください。例えば、サンプルのStorefrontサイトでは、ギフトカード購入ページやDroneランディングページの顧客訪問を追跡したい場合があります。そのためには、各ページにVisited Product Pageのレンダリングを追加するだけです。

## サブカテゴリナビゲーションレンダリング

サブカテゴリナビゲーションレンダリングの使用は今後推奨しません。推奨される代替案については、「 [利用可能なレンダリングの選択](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/choosing-between-available-renderings.html "Choosing between available renderings")」をご覧ください。