Modify the Commerce Search Results Scriban template

Version:

This topic provides an example of how to modify the Commerce Search Results rendering by editing the Scriban template.

Before the modification, commerce search results on the live storefront include a stock status label and a Details button.

Example of the default Commerce Search Results on the live storefront.

After modifying the Scriban template, the Details label is replaced with the stock status.

Example of the Commerce Search Results on the live storefront after modifying the Scriban template.

Note

To see how to modify the Commerce Search Results Scriban template, watch the video available on the Discover Sitecore channel.

To modify the Commerce Search Results rendering through the Scriban template:

In the Content Editor, go to sitecore\Content\<tenant>\<site>\Presentation\Rendering Variants.
Expand the Commerce Search Results item, as well as the Default item, and click Scriban.

On the Content tab, in the VariantDetails section, in the Template field, modify the following lines:

<div class="product-summary" data-id="{{ i_item.name }}">
    {{ displayName = i_item.display_name | html.escape }}
    <div class="product-photo">
        <a title="{{ displayName }}" href="{{ i_item.url }}">
            {{
                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="{{ i_item.url }}">
            {{ 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="{{ i_item.url }}">
                3{{ sc_translate 'DETAILS' }}
            </a>
        </div>
    </div>
</div>

1	Copy data-bind="text: stockLabel" from this line to the clipboard and delete the line.
2	Add data-bind="text: stockLabel" to the end of the line.
3	Delete the {{ sc_translate 'DETAILS' }} line.

Note

For easier editing, you can copy the Scriban code into a code editor, modify it, and copy it back into the Template field.

On the ribbon menu, click Save.
Press F9 and publish your changes using Smart Publish.

If you have suggestions for improving this article, let us know!