---
title: "Commerce Search Results Scribanテンプレートを修正"
slug: "modify-the-commerce-search-results-scriban-template"
abstract: "Commerce Search Results Scribanテンプレートの修正方法の例。"
---
# Commerce Search Results Scribanテンプレートを修正

このトピックでは、Scribanテンプレートを編集してCommerce Search結果のレンダリングを変更する方法の例を提供します。

変更前は、ライブストアフロントの商取引検索結果に在庫状況ラベルと詳細ボタンが含まれていました。

![Example of the default Commerce Search Results on the live storefront.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/ScribanTemplateBefore.png)

Scribanテンプレートを修正した後、詳細ラベルは在庫ステータスに置き換えられます。

![Example of the Commerce Search Results on the live storefront after modifying the Scriban template.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/ScribanTemplateAfter.png)

> !注Commerce Search Results Scribanテンプレートの変更方法については、Discover Sitecoreチャンネルで公開されている [動画](https://youtu.be/HgwnRTYtTXs?t=160) をご覧ください。

Scribanテンプレートを使ったCommerce Search結果のレンダリングを変更するには:

1.  コンテンツエディターで*sitecore\\Content\\\\\\Presentation\\Rendering Variants*へ行ってください。
    
2.  **Commerce Search Results**項目と**Default**項目を展開し、「**Scriban**」をクリックします。
    
    ![Commerce Search Results Scriban template location in the Content Editor.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/CommerceSearchResultsScriban.png)
    
3.  **コンテンツ**タブの**VariantDetails**セクションの**テンプレート**フィールドで、以下の行を修正してください:
    
    <div class="product-summary" data-id="{{ i\_item.name }}">
     {{ displayName = i\_item.display\_name | html.escape }}
     <div class="product-photo">
     <a title="{{ displayName }}" href="https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/%7B%7B%20i/_item.url%20%7D%7D">
     {{
     productImage = i\_item.images.targets | array.first
     if productImage
     sc\_execute productImage "Responsive Image"
     end
     }}
     <div data-bind="css: { 'promotion': promotion }" class="hidden">
     <span data-bind="text: promotion" class="savings-percentage"></span>
     <span class="savings-label">{{ sc\_translate 'SAVINGS\_LABEL' }}</span>
     </div>
     </a>
     </div>
     <div class="product-info">
     <a class="product-title" title="{{ displayName }}" href="https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/%7B%7B%20i/_item.url%20%7D%7D">
     {{ displayName }}
     </a>
     <div class="product-brand">
     {{ i\_item.brand }}
     </div>
     <div class="product-indicator">
     <label class="hidden" data-bind="css: { 'price-difference': hasDifferentPrice }">
     {{ sc\_translate 'STARTING\_FROM' }}
     </label>
     1<label class="stock-status" data-bind="text: stockLabel"></label>
     </div>
     <div class="product-detail" data-bind="css: { 'on-sale': promotion }">
     <span data-bind="text: price" class="product-price"></span>
     2<a class="product-link" title="{{ displayName }}" href="https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/%7B%7B%20i/_item.url%20%7D%7D">
     3{{ sc\_translate 'DETAILS' }}
     </a>
     </div>
     </div>
    </div>
    
    \[\*\***1**
    
    この行からdata-bind="text: stockLabel"をクリップボードにコピーし、その行を削除してください。
    
    \[\*\***2**
    
    行末尾にdata-bind="text: stockLabel"を追加します。
    
    \[\*\***3**
    
    {{ sc\_translate 'DETAILS' }}} 行を削除してください。
    
    > !注編集を容易にするために、Scribanのコードをコードエディタにコピーし、修正してからテンプレートフィールドに戻すことができます。
    
4.  リボンメニューで「 **保存**」をクリックします。
    
5.  F9を押して**Smart Publish**を使って変更を公開してください。