Customize the Commerce Search Results rendering to identify product bundles

Current version: 10.3

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 }".

    RequestResponse
    {{ 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.

Do you have some feedback for us?

If you have suggestions for improving this article,