---
title: "Commerce Search結果レンダリングのカスタマイズ"
slug: "customizing-the-commerce-search-results-rendering"
abstract: "Commerce Search Results rendering Scribanテンプレートの概要。"
---
# Commerce Search結果レンダリングのカスタマイズ

Commerce Search Resultsレンダリングバリアントには [、Scriban](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/working-with-scriban-templates.html "Working with Scriban templates")テンプレートの形でレンダラーが含まれています。

Scribanテンプレートは個々の製品カードのマークアップをレンダリングする役割を担います。これは製品アイテムを繰り返し処理するループ内で実行されます。製品カードのマークアップを変更するには、Scribanテンプレートを修正できます。この場合、ソフトウェアのアップグレード時にカスタマイズが上書きされないように、新しいカスタムレンダリングバリアントを作成するのが最善です。レンダリング用の [ラベルも変更](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/modify-a-label-for-a-rendering-that-uses-a-scriban-template.html "Modify a label for a rendering that uses a Scriban template") できます。

![Location of the Scriban template in the content tree](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/102/sitecore-experience-commerce/images/CommerceSearchRenderingVariant.png)

以下の表は、Commerce Search ResultsレンダリングScribanテンプレートの主要なプロパティを詳述しています。

性質または変数

概要

[i\_item](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/item-and-field-extensions.html)

i\_itemプロパティはレンダリングバリアントの文脈における現在のアイテムです。多くの場合、i\_datasourceアイテムに相当しますが、この場合は個々のアイテムのカタログデータを公開しています。  
  
デフォルトの実装では、アイテムはすべて型 productsであると仮定していますが、バンドル、カテゴリ、またはバリアントである場合もあります。 i\_item アイテムはこのテンプレート内のさまざまな種類のデータを保存するために使われます。例えば、 i\_item.name プロパティはProduct IDを格納し、 idという名前のデータ属性に割り当て、 i\_item.url プロパティは製品詳細ページへのリンクを保存し、href属性に割り当てます。

[o\_model](https://doc.sitecore.com/xp/en/developers/sxa/104/sitecore-experience-accelerator/the-embedded-items-and-objects-in-the-scriban-context.html#UUID-14718e71-5607-902d-579c-4f6da3b3849d_para-idm273166667358066)

o\_modelプロパティは、MVCコントローラーのレンダリングに渡されます。これは、カタログ名と商品バンドルIDが MVC コントローラーに渡されることを意味します。o\_modelプロパティは価格やプロモーション情報の伝達にも使われます。

displayName

displayName変数はさまざまな文脈で使われます。例えば、 i\_item.display\_nameに初期化され、製品のDisplay Nameを格納します。この変数は組み込み関数 html.escape に渡され、返される文字列がテキストブロックとなります。  
  
また、アンカータグの title 属性にも割り当てられています。商品ページへのリンクを格納する i\_item.url プロパティは href 属性に割り当てられています。 displayName 変数は anchor タグのテキストとしても割り当てられています。

[sc\_imagelink](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/the-embedded-commerce-functions-for-scriban-templates.html)

画像リンクはCatalogProductImageオブジェクトのsc\_imagelink関数で取得されます。カタログ画像のソースを設定すると、結果は設定に応じてメディアライブラリまたはデジタルアセット管理システムから取得されます。関数は製品画像を表す型CatalogProductImageのパラメータオブジェクトと[](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/configure-the-source-for-catalog-images.html)、メイン/ヒーロー製品画像のCatalogProductImageオブジェクトを含むo\_model.master\_product\_imageプロパティを期待します。

[sc\_translate](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/the-embedded-functions-for-the-scriban-template.html)

この機能は、サイトの辞書ドメイン(*sitecore/Content///Storefront Dictionary*)で定義された項目を表示するために使用されます。

i\_item.brand

この物件は製品のブランド名を保存し、 <div> 要素に表示されます。

以下のコードは、デフォルトのレンダリングバリアント内で定義されたCommerce Search ResultsレンダリングScribanテンプレートを示しています。

{{ # The <div> element renders a product item with values from the search item (i\_item) and the ProductSummaryViewModel (o\_model) }}
<div class="product-summary" data-id="{{ i\_item.name }}">
 {{
 # If the o\_model is not available, set it to an empty object to be accessed by the rest of the template without null reference error
 if !o\_model
 o\_model = {}
 end

 # Escape any HTML characters in the display name
 displayName = i\_item.display\_name | html.escape
 }}
 {{ # The <div> element contains the product photo }}
 <div class="product-photo">
 {{ # The <a> element wraps the product photo with a link to navigate to the product page }}
 <a title="{{ displayName }}" href="https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/%7B%7B%20i/_item.url%20%7D%7D">
 <img src="https://doc.sitecore.com/api/markdown-image/xp/ja/developers/102/sitecore-experience-commerce/%7B%7B%20o/_model.master/_product/_image%20|%20sc/_imagelink%20220%20220%20%7D%7D" alt="{{ o\_model.master\_product\_image.alternate\_text }}" />
 {{ ## The <div> element contains the savings percentage and savings label.
 The CSS class "promotion" is added on server side (if "o\_model.is\_on\_sale" is true) or on client side after the data binding (if "promotion" has a true value). ## }}
 <div data-bind="css: { 'promotion': promotion }"
 class="hidden {{ if o\_model.is\_on\_sale }} promotion {{ end }}">
 {{ # The promotion text is rendered on server side and will be overwritten on the client side if data binding occurs }}
 <span data-bind="text: promotion" class="savings-percentage">{{ o\_model.savings\_percentage }}%</span>
 <span class="savings-label">{{ sc\_translate 'SAVINGS\_LABEL' }}</span>
 </div>
 </a>
 </div>
 {{ # The <div> element contains all the product information such as the display name and price }}
 <div class="product-info">
 {{ # The <a> element wraps the product display name with a link to navigate to the product page }}
 <a class="product-title" title="{{ displayName }}" href="https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/%7B%7B%20i/_item.url%20%7D%7D">
 {{ displayName }}
 </a>
 <div class="product-brand">
 {{ i\_item.brand }}
 </div>
 {{ # The <div> element contains the stock status of the product and a "Starting From" label }}
 <div class="product-indicator">
 {{ ## The <label> element contains the "Starting From" label.
 The CSS class "price-difference" is added on server side (if "o\_model.display\_starting\_from" is true) or on client side after the data binding (if "hasDifferentPrice" is true). ## }}
 <label class="hidden {{ if o\_model.display\_starting\_from }} price-difference {{ end }}"
 data-bind="css: { 'price-difference': hasDifferentPrice }">
 {{ sc\_translate 'STARTING\_FROM' }}
 </label>
 <label class="stock-status" data-bind="text: stockLabel">{{ o\_model.stock\_status\_name }}</label>
 </div>
 {{ ## The <div> element contains the product price and product details link.
 The CSS class "on-sale" is added on server side (if "o\_model.is\_on\_sale" is true) or on client side after the data binding (if "promotion" has a truthy value). ## }}
 <div class="product-detail {{ if o\_model.is\_on\_sale }} on-sale {{ end }}"
 data-bind="css: { 'on-sale': promotion }">
 {{ # The product price text is rendered on server side and will be overwritten on the client side if data binding occurs }}
 <span data-bind="text: price" class="product-price">{{ o\_model.adjusted\_price\_with\_currency }}</span>
 <a class="product-link" title="{{ displayName }}" href="https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/%7B%7B%20i/_item.url%20%7D%7D">
 {{ sc\_translate 'DETAILS' }}
 </a>
 </div>
 </div>
</div>

[Commerce Search Resultsレンダリング](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-commerce/use-the-commerce-search-results-rendering.html)は、Commerce特有のSXA Search Resultsレンダリングのクローンです。独自の[デフォルトのレンダリングバリアントルートとデフォルトレンダリングバリアント](https://doc.sitecore.com/xp/en/users/93/sitecore-experience-commerce/en/using-rendering-variants-to-display-product-information.html)(*/sitecore/Content///Presentation/Rendering Variants/Commerce Search Results*)があり、マークアップを生成するにはScribanテンプレート、[AJAXリクエスト](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/understanding-asynchronous-calls-and-caching.html "Understanding asynchronous calls and caching")として株価情報の取得にJavaScript、ラベル翻訳にはSXA辞書を使用します。

> !注Commerce Search Resultsレンダリングで使用される [ラベルを変更する](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/modify-the-commerce-search-results-scriban-template.html "Modify the Commerce Search Results Scriban template") ことができます。

## 製品概要モデル表示

検索結果が処理されると、価格と在庫情報がCommerce Engineから取得され、Scribanテンプレート内でレンダリングされるProductSummaryViewModelモデルに変換されます( o\_model変数を通じてアクセス)。

![Class diagram for the ProductSummaryView Model](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/102/sitecore-experience-commerce/images/ProductSummaryViewModelDiagram10.png)