Walkthrough: Configuring visual navigation by category

Current version: 10.1

If you want to navigate by category in a more visual way that just rendering a regular menu, you can use the SXA Search Results rendering to display categories with images by using a query.

This procedure assumes you are using the Storefront site template and the Habitat catalog but the same steps apply to custom catalogs and sites.

Note

You can extend this configuration to list multiple levels of categories by extending the sample Scriban template to use nested sc_search methods or by nesting a Scriban template for each level in the rendering variant.

This walkthrough shows you how to:

Create a search scope and query

To configure a search scope and query:

In the Content Editor, go to /sitecore/Content/<tenant>/<site>/Settings.
Right-click Scopes and click Insert, Scope.
In the Message dialog box, enter Categories catalog scope and click OK.
On the Content tab, in the Scope section, click the Build query hyperlink.
In the Build Search Query dialog box, add filters so that the search query matches the following image, and then click OK.
- Commercesearchitemtype:category so that the search focuses only on categories.
- _Parent: {B893C063-6238-ED57-700D-72862C56038D} so that the parent is Departments. If you are using a custom catalog, copy and insert the item ID for the parent item instead.
Click the search icon to execute the search and validate that the desired list of categories appears. Categories in multiple languages may appear in the results but these will be filtered out later on.
On the ribbon menu, click Save.

Configure an image field

To associate an image with each top-level category, you need first to modify the Commerce Category template to make an image field available for each catalog category. Alternatively, you can modify the category template in Commerce Engine to include an image field, but for simplicity this option is not used here. For more information, see Add new fields to a catalog item template.

To configure an image field:

In the Content Editor go to /sitecore/Templates/Project/<tenant>/Commerce Category and, on the Builder tab, click in the Add a new section field and enter Category Images.
Click in the Add a new field box and enter Images and, from the associated type list, click Treelist and save your changes.
Go to the catalog category, for example /sitecore/Content/Sitecore/Storefront/Home/Catalogs/Habitat_Master/Habitat_Master-Departments/Habitat_Master-Cameras and click the Content tab.
In the Category Images section, in the Images field, go to the image you want to associate with the category, and then double-click it to move it to the Selected list.
Repeat step 3 to associate images with all the categories in the catalog.
Save and publish your changes.

Create a Search Results rendering variant

To create a Search Results rendering variant:

In the Content Editor, go to /sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants, right-click Search Results, click Insert, Variant Definition.
In the Message dialog box, enter Category variant and click OK.
In the tree view, right-click Category variant, click Insert, Scriban and, in the Message dialog box, accept the default name and click OK.
Right-click Scriban, click Insert, Responsive Image and, in the Message dialog box accept the default name and click OK.

In the tree view, click Scriban and, on the Content tab, in the VariantDetails section, copy and paste the following code into the Template field.

RequestResponse

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

In the tree view, click Responsive Image and, on the Content tab, in the Variant Details section, enter the following values:
- In the Sizes field, enter (max-width:320px)280px, (max-width:480px) 440px, 800px
- In the Widths field, enter 320,480,800
- In the Default size field, enter 400
Save your changes.

Configure a Search Results rendering

Because stock and price information is not needed when displaying top-level categories, you can use the SXA Search Results rendering instead of the Commerce Search Results rendering.

To configure a Search Results rendering:

In the Experience Editor, go to the page where you want to see categories and, in the Toolbox, in the Search section, click the Search Results rendering, drag it onto the page.
In the Associated Content dialog box, click Default and then click OK.
On the Search Results toolbar, from the Variant list, select Category variant.
On the Search Results toolbar, click More, Edit component properties and, in the Control Properties dialog box, in the SearchCriteria section, in the Search scope field, click Categories catalog scope.
In the Default language filtering field, click Current language.
In the Default sort order field, click Title Desc and then click OK.
Save your changes.

You now have category navigation showing images for each category that once clicked redirect to the regular category page, which shows the product cards for each product within the category.

Do you have some feedback for us?

If you have suggestions for improving this article,