Customize the Commerce Search Results rendering to identify product bundles

Abstract

How to customize the Commerce Search Results Scriban template so that product bundles are identified with a label in search results.

You can modify the Commerce Search Results Scriban template in order to customize the output, for example, to add a Bundle tag for product bundles.

Example of a Bundle label on the live storefront.

To add a custom label to identify product bundles:

  1. In the Content Editor, go to /sitecore/Content/<tenant>/<site>/Storefront Dictionary.

  2. Right-click Commerce Search Results and click Insert, Dictionary entry.

  3. In the Message dialog box, enter a label, for example Bundle Label, and click OK.

  4. On the Content tab, in the Data section, in the Key field, enter a name for the key you want to associate with the label, for example BUNDLE_LABEL.

  5. In the Phrase field, enter the phrase you want to display, for example Bundle, and save your changes.

  6. To modify the Commerce Search Results Scriban template, in the Content Editor, go to /sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants/Commerce Search Results/Default/Scriban.

  7. On the Content tab, in the VariantDetails section, in the Template field, insert the following code before the line <div data-bind="css: { 'promotion': promotion }".

    {{ if string.contains i_item.template_name 'Bundle' }}
        <div data-bind="css: { 'promotion': promotion }" class="promotion">
         <span class="savings-label">{{ sc_translate 'BUNDLE_LABEL' }}</span>
            </div>
         {{ end }}
    
  8. On the ribbon, click Save.

  9. Press F9 and publish your changes.