Choosing between available renderings

Abstract

A comparison of the renderings available with the Storefront site template and which ones are recommended.

To take advantage of new features and renderings in the Sitecore Experience Accelerator (SXA) and commerce components for SXA, the Storefront site template includes updated renderings, which are detailed in the following tables. The first table lists search-related renderings while the second table lists navigation renderings.

Important

The renderings in the first and second columns can exist on the same page but they cannot be mixed. In other words, you can have multiple groups of search-based renderings that work together within the groups but there cannot be a mix of renderings from column 1 and 2. For example, the Storefront site template Home page, by default, contains two groups of promoted products that both use the Commerce Search Results rendering - one for televisions and the other for Mira laptops. One group can be based on renderings from column 1 and the other based on renderings from column 2.

Recommended (1)

Precursor (2)

Advantage of (1) over (2)

Aggregated Facet Filter rendering

Product Facets

The SXA Aggregated Facet Filter rendering is easier to customize and more flexible because the facets it contains are composed of individual filter facets that are configured on a rendering variant and tied to a given search results signature.

You can change the rendering variant associated with the Aggregated Facet Filter rendering by selecting the variant you want to use from the Aggregated Facet Filter toolbar. The Aggregated Facet Filter rendering allows users to select multiple facet values and uses AJAX calls to improve page load performance. You can insert any of the filter type renderings on the Aggregated Facet Filter rendering.

The Product Facets rendering, on the other hand, does not support rendering variants and handles the rendering of all facets at once. Furthermore, all facets are of the same checklist type so there are limited presentation and customer usability options. The facets it renders are configurable on the category and page items.

Note

With both renderings, you can have a different list of facets configured per category and both renderings hide facets with no values to choose from (even if they are configured).

Commerce Search Results

Product List

Promoted Products

The Commerce Search Results rendering is based on the standard SXA Search Results rendering and uses the search signature and queries the index to retrieve items. It is used with the Storefront site template on the Home, Category, Search Results, and Product Detail pages as it is easier to customize, more flexible, and meets the requirements of a modern storefront including the support for product boosting.

For a comparison between these renderings, see Choosing between available renderings for product lists.

Filter (Checklist)

Filter (Date)

Filter (Drop-down)

Filter (Managed Range)

Filter (Radius)

Filter (Range Slider)

Filter (Slider)

Product Facets

There are seven filter type renderings ranging from checklist and date to sliders each offering different customer usability options and functionality. These Filter renderings can be dragged onto the page individually or as part of the Aggregated Facet Filter rendering. In the Product Facets rendering, all configured facets are rendered as the same checklist type, so have limited presentation and customer usability options.

Load More

(part of both the Product List and Promoted Products renderings)

For both sets of renderings, it’s optional whether to use paging or infinite scrolling. The Load More rendering lets the customer load more results in an infinite scrolling setup.

Having the Load More rendering as a separate rendering rather than part of a rendering where it appears in a fixed spot, gives you more flexibility when designing the page layout.

Page Size

Product List Items Per Page

The Page Size rendering enables the customer to select the number of items displayed per page.

Page Selector

Product List Pager

The Page Selector uses the search results signature and can be used multiple times on a page with different groups of search renderings.

Results Count

Product List Page Info

The Results Count uses the search results signature and can be used multiple times on a page with different groups of search renderings.

Results Variant Selector

NA

The Results Variant selector rendering provides the option to choose between different search result presentation options, such as a limited list, details, or tiles.

Search Box

Search Bar

The Search Box uses the search results signature and can be used multiple times on a page with different groups of search renderings. For example, with the Storefront site template, it is used to narrow down search results on the category pages both for the global search at the top of the page and the local search within a category.

The Search Box supports type-ahead and predictive suggestions.

Sort Results

Product List Sorting

The SXA Sort Results rendering is used to order search results. You can link the Sort Results rendering with other renderings such as the Load More button by defining a search signature and using the same one for both renderings. You can also define new sort options.

With the Sort Results rendering, you can sort results based on relevance or randomly. When you use relevance, you can define boosting rules to promote certain products or pages over others.

The following table details navigation renderings.

Recommended (1)

Precursor (2)

Advantage of (1) over (2)

Commerce Navigation

Category Navigation and SXA Navigation

The Commerce Navigation rendering is based on the standard SXA Navigation rendering but has a separate rendering variant root and a different MVC rendering view. Unlike the SXA Navigation rendering, it uses Bootstrap to support responsive design. It does not use the index and targets items in content. Its precursor, the Category Navigation rendering, does not work with rendering variants and is searched based.

Search Results

Page List

Page Content

Subcategory Navigation

You can use the Search Results rendering in various scenarios including listing the sub-categories in a sub-menu using Commerce search scopes.

The Search Results rendering uses a separate AJAX call to retrieve the search results. The Subcategory navigation rendering, on the other hand, does not use AJAX calls but instead processes the query as part of the initial server-side rendering, which results in better performance. This is why the Storefront site template uses the Subcategory Navigation rendering by default.

The Search Results and Subcategory Navigation renderings are both search based but the Subcategory Navigation rendering does not support rendering variants. This means it is not as easy to customize and is less flexible than the Search Results rendering.

Note

While the updated renderings are more flexible when it comes to customizing them, you should review whether they meet your caching and performance requirements.