Choosing between available renderings for product lists

Version: 10.0

You can use the Commerce Search Results rendering to render product lists online. This rendering is based on the standard SXA Search Results rendering and Search service. It includes the use of rendering variants and Scriban templates.

The Commerce Search Results rendering is almost identical to the SXA Search Results rendering with these key differences:

  • It uses a modified MVC View that incorporates translations.

  • It has the ability to request product price and stock status from the Commerce Engine for the list of products being rendered. JavaScript has been added to request the information using a second AJAX call and then bind the data.

  • It has a rendering variant root that is separate from the root used by the SXA Search Results component.

The following table details the differences between how you can render a product list.

Difference

Commerce Search Results rendering

Product List and Promoted Products renderings

Available in Sitecore 9.3 and later

Available in Sitecore 9.0 and later

Number of available renderings for product lists

One rendering available for all scenarios where lists of products need to be rendered. This rendering uses a standard SXA scope defined in content that contains a ContentSearch query. Dynamic query tokens are used to determine search results. See Create a Commerce search scope.

Two renderings available, each for a different scenario where lists of products need to be rendered. These renderings are similar but have different code behind that executes different queries to retrieve the products to render for the various scenarios.

The Promoted Products rendering runs queries defined in content, but without the ability to use dynamic query tokens. The Product List rendering, on the other hand, queries the catalog based on the current context item assuming it is a category or based on the query search terms, if provided as query parameter.

Customization

This rendering supports rendering variants, which contain Scriban templates that generate the output. The default implementation is based on a Scriban template that is responsible for the product cart only.

To customize the HTML output for both renderings, the MVC View must be overridden for all changes. Both renderings are responsible for outputting the entire list of product cards, so making changes to a product card requires the entire component to be customized.

Personalization

Personalization can be done at all levels (rendering, product card, within a product card) due to the personalization support in both rendering variants and in the Scriban templates.

No personalization possible at the product card level. It is only available at the component level.

Number of AJAX calls

By default, one AJAX call is used. You can change this, however, so that two AJAX calls are used. One to the SXA Search Service to get the HTML for the list of products, which is produced by processing the rendering variant server side. Another call to get the combined bulk price and stock information, which is bound to the HTML using Knockout JS.

One AJAX call that returns JSON, which is bound to the static HTML defined in the MVC View using Knockout JS. JSON includes both product data as well as price and stock information.

Caching and performance

Caching is not built into the rendering but is supported using Content Delivery Networks (CDN). Since product data is retrieved using one AJAX call and price and stock information is retrieved using a second AJAX call, both can be cached separately. Supports caching the main product data while having price and stock information retrieved live.

The Product List rendering has built-in support for caching of the AJAX call. Caching occurs at the CD instance level and is not geo-aware or as comprehensible or functional as using CDN. The Promoted Products rendering does not have built-in support for caching, but is supported using CDN for caching the AJAX call. For both renderings, enabling caching of the AJAX call also implies caching of price and stock information, which might not be desirable.

Rendering support

Works interchangeably with all the standard SXA search renderings. Several of the renderings are based on rendering variants and support Scriban templates.

Supports only commerce-specific search renderings for paging or infinite scrolling, which are not based on rendering variants and Scriban templates.

Product ranking

Supported using rules defined in the scope along with the ContentSearch query. See Sort Commerce search results and Boost products in search results.

Not supported.

Scope of functionality

The set of SXA Search renderings is extensive including the new Aggregated Facets and Facets Summary renderings.

The set of commerce-specific search renderings is limited.

Search behavior tracking

Changes to the Aggregated Facets or Sort Result renderings trigger the FacetApplied and ProductSorting events. The event data is recorded in the collection DB.

Page events are triggered through the Search Initiated rendering.

Note

The updated renderings are more flexible when it comes to customizing them but may impact the time it takes to load a page.

Do you have some feedback for us?

If you have suggestions for improving this article,