Customizing the Commerce Search Results rendering

The Commerce Search Results rendering variant includes an additional renderer in the form of a Scriban template. Scriban templates are available as renderers similar to, for example, field renderers, sections, or tags and can coexist with other renderers. Scriban templates can contain sophisticated logic that cannot be expressed using other renderers and can greatly reduce the complexity of rendering variants by including numerous renderers in one template. You can also use them to replace existing rendering variants.

The Scriban template is responsible for rendering the markup for the individual product cards. It is executed within a loop in the corresponding MVC View that iterates over the product items. To change the markup generated for the product cards, you can modify the Scriban template. It is best to create a new custom rendering variant in this case so that the customization does not get overridden during software upgrades.

The following code shows the Commerce Search Results rendering Scriban template defined within the default rendering variant.

<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>
            <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>
            <a class="product-link" title="{{ displayName }}" href="{{ i_item.url }}">
                {{ sc_translate 'DETAILS' }}
            </a>
        </div>
    </div>
</div>

You can customize the following Commerce Search Results rendering Items. The Commerce Search Results rendering is a clone of the SXA Search Results rendering specific to Commerce. It has its own default rendering variant root and default rendering variant (/sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants/Commerce Search Results), which uses a Scriban template for generating the markup, JavaScript for retrieving the stock and price information (as an AJAX request), and the SXA Dictionary for label translation.

The following table details the key properties of the Commerce Search Results Scriban template.

• Property: Type
• i_item: Item
• displayName: Variable
• title: Attribute
• productImage: Variable
• Responsive Image: Responsive Image
• sc_translate: Embedded Function
• i_item.brand: Property