Commerce Search結果レンダリングのカスタマイズ

Commerce Search Resultsレンダリングバリアントには 、Scribanテンプレートの形でレンダラーが含まれています。

Scribanテンプレートは個々の製品カードのマークアップをレンダリングする役割を担います。これは製品アイテムを繰り返し処理するループ内で実行されます。製品カードのマークアップを変更するには、Scribanテンプレートを修正できます。この場合、ソフトウェアのアップグレード時にカスタマイズが上書きされないように、新しいカスタムレンダリングバリアントを作成するのが最善です。レンダリング用の ラベルも変更 できます。

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

性質または変数

概要

i_item

i_itemプロパティはレンダリングバリアントの文脈における現在のアイテムです。多くの場合、i_datasourceアイテムに相当しますが、この場合は個々のアイテムのカタログデータを公開しています。

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

o_model

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

画像リンクはCatalogProductImageオブジェクトのsc_imagelink関数で取得されます。カタログ画像のソースを設定すると、結果は設定に応じてメディアライブラリまたはデジタルアセット管理システムから取得されます。関数は製品画像を表す型CatalogProductImageのパラメータオブジェクトと、メイン/ヒーロー製品画像のCatalogProductImageオブジェクトを含むo_model.master_product_imageプロパティを期待します。

sc_translate

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

i_item.brand

この物件は製品のブランド名を保存し、

Escape any HTML characters in the display name

displayName = i_item.display_name | html.escape }} {{ # The

element contains the product photo }}

{{ # The element wraps the product photo with a link to navigate to the product page }} {{ ## The

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). ## }}

{{ # The promotion text is rendered on server side and will be overwritten on the client side if data binding occurs }} {{ o\_model.savings\_percentage }}% {{ sc\_translate 'SAVINGS\_LABEL' }}

{{ # The

element contains all the product information such as the display name and price }}

{{ # The element wraps the product display name with a link to navigate to the product page }} {{ displayName }}

{{ i\_item.brand }}

{{ # The

element contains the stock status of the product and a "Starting From" label }}

{{ ## The 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). ## }} {{ sc\_translate 'STARTING\_FROM' }} {{ o\_model.stock\_status\_name }}

{{ ## The

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). ## }}

{{ # The product price text is rendered on server side and will be overwritten on the client side if data binding occurs }} {{ o\_model.adjusted\_price\_with\_currency }} {{ sc\_translate 'DETAILS' }}

Commerce Search Resultsレンダリングは、Commerce特有のSXA Search Resultsレンダリングのクローンです。独自のデフォルトのレンダリングバリアントルートとデフォルトレンダリングバリアント(/sitecore/Content///Presentation/Rendering Variants/Commerce Search Results)があり、マークアップを生成するにはScribanテンプレート、AJAXリクエストとして株価情報の取得にJavaScript、ラベル翻訳にはSXA辞書を使用します。

!注Commerce Search Resultsレンダリングで使用される ラベルを変更する ことができます。

製品概要モデル表示

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