Understanding asynchronous calls and caching

Abstract

Advantages of the Commerce Search Results rendering in terms of AJAX calls and caching when compared to the Product List rendering.

The Commerce Search Results rendering handles asynchronous calls and caching differently to the Product List rendering. It is important to understand the differences so that you can make an informed decision about which rendering to use.

Note

We recommend you use the Commerce Search Results rendering because it offers the most flexibility.

The Commerce Search Results rendering is an extension of the standard SXA Search Results rendering. The SXA Search Result rendering uses the SXA Search service to make an AJAX call that queries the index and retrieves a list of items to render. The resulting items are processed server-side by the configured rendering variant and the result is returned as HTML markup.

The ProcessSearchItems pipeline is an extension point in the SXA Search Service. It is responsible for processing the items returned from the configured scope query and populating associated models before the configured rendering variant processes them further. You can extend this pipeline to populate the SearchItem pipeline argument that contains the Sitecore item, as well as a custom model of type object. The ProcessSearchItems pipeline is extended with a commerce processor called PrepareSearchItems. This processor retrieves the price and stock information from the Commerce Engine and converts the data to the ProductSummaryViewModel. This model is accessed from the Commerce Search Results Scriban template using the o_model variable to render the content. Whether the processor executes and retrieves the data depends on the configuration and setup.

In the storefront settings (/sitecore/Content/<tenant>/<site>/Settings/Commerce/Search Results Configuration), you can configure which calls are used by the Commerce Search Results rendering and when they are executed. The Use a separate AJAX call to retrieve price and stock info check box is cleared by default and the rendering makes one call.

As part of this call, the commerce ProcessSearchItems processor executes and retrieves the price and stock data. This data is used in the Scriban template to output the price and stock information when the rendering variant is processed.

Using one call is the most efficient configuration from a performance standpoint when you are not using a Content Delivery Network (CDN). This is because only one AJAX call is made from the client browser to retrieve the markup and the price and stock information. However, if you are using a CDN, be aware that you also cache the price and stock information. This might not be desirable because price and stock tend to change more frequently than product information.

Note

There is no way to force the CDN cache to be cleared from XC when you change prices directly on products or price cards, or add promotions for specific products that are already cached using CDN. You must do this separately or as part of custom scripts or a custom integration with the business tools. For this reason, we recommend you use two AJAX calls if you are using CDN.

If you select the Use a separate AJAX call to retrieve price and stock info check box, the Commerce Search Results rendering makes two asynchronous JavaScript and AJAX calls when rendering a list of catalog items:

  • The first call queries the index and retrieves the list of items to render. The Commerce Search Results rendering calls the SXA Search Service, which returns the items as HTML markup, processed server side by the rendering variant. The commerce ProcessSearchItems processor does not call the Commerce Engine to retrieve price and stock data or populate the ProductSummaryViewModel. Because the volatile price and status data is absent and the list of catalog items as well as the product content remains relatively stable, we recommend caching this call with a suitable expiry time when using a CDN.

  • The second call is commerce specific. It occurs after retrieving the markup for the list of catalog items and is made to the Commerce Engine to retrieve the price and stock information for the list of products. Data is returned in JSON format.

    Note

    We do not recommend that you cache this call because price and stock information is likely to change often.

    This call cannot be made in parallel with the first one because one of its query parameters, the list of Product IDs, is reliant on the response data retrieved from the first call. This call is only made once the list of Product IDs is populated and is no longer empty. When the price and stock information is received, it is bound to the markup using Knockout JS binding and is updated accordingly. The price and stock information is bound to the price and stockLabel attributes respectively. The JavaScript code for the second call is located in the catalog-commerce-search-results-model script stored in /sitecore/Media library/Base Themes/Commerce Components Theme/Scripts/Catalog/catalog-commerce-search-results-model/.

First call - SXA Search Service AJAX call

Full URL:http://[host name]/sxa/commercesearch/CommerceResults/?usedam= [use images from DAM]&l=[language]&amp;s=[scope]&amp;itemid=[current item id]&amp; sig=[search result signature]&amp;p=[page size]&amp;o=[sort order]&amp;v=[rendering variant id]

Example: http://mqa-ts-02-dk1//sxa/commercesearch/CommerceResults/?usedam=true&l=en&amp; s={9DCE2EF2-EE0C-4C02-B2ED-A8769FC08C3B}&amp; itemid={994EC8CB-FE90-5071-A631-4458B1E83DB3}&amp; sig=category-page&amp; p=12&amp; o=Display name,Ascending&amp; v={175DC0A7-7214-450A-8765-688D62A551D1}

Http method: GET

The following table details the parameters used in this call:

Parameters

Use

usedam

Configuration parameter to indicate whether to get the image links from DAM (when set to “true”) or from the Media Library when set to “false”.

 

Specifies the language version of the results.

 

Specifies the scope item is used for filtering the results.

itemid

The current context item ID.

sig

The commerce search result signature.

 

The page size.

 

The ordering of the results for a specific field in ascending or descending order.

 

The variant definition ID.

Second call - GetSellableItemsSummary AJAX call

Full URL: https://[host name]/api/cxa/Catalog/GetSellableItemsSummary?sc_site=[site name]

Example: https://mqa-ts-02-dk1/api/cxa/Catalog/GetSellableItemsSummary?sc_site=Storefront

Http method: POST

The following table details the parameters used in this call:

Parameters

Use

itemIds

Specifies the product ID and the catalog name for the list of products.

Example: Habitat_Master|6042976|

includeBundledItems

Includes bundle items in the results.

Example: true

The Product List rendering makes only one AJAX call. This call retrieves both product information as well as price and stock information and returns it as JSON that is bound to HTML markup using Knockout JS. The Product List rendering has built-in support for AJAX call caching, which is handled at the CD instance level.

The Promoted Products rendering is similar to the Product List rendering except for the way the product list is retrieved and that it does not support built-in AJAX call caching.

Note

Both renderings support AJAX call caching when using a Content Delivery Network (CDN) to take advantage of the distributed and geo-location caching abilities that come with it. CDN caching is superior to built-in caching because static resources are stored on servers more local to the user. When caching of the AJAX call is turned on, both content as well as price and stock information is cached. This makes it less flexible than the Commerce Search Results rendering where product content can be cached separately from retrieving price and stock information.

GetProductList Ajax call

The GetProductList Ajax call queries the index and retrieves the list of items to render along with the price and stock information for the list of products in JSON format. The call is made to the commerce components layer.

Full URL: http://[host name]/api/cxa/catalog/GetProductList?sc_site=[site name]

Example: http://mqa-ts-02-dk1/api/cxa/catalog/GetProductList?sc_site=Storefront

Http method: POST

The following table details the parameters used in this call:

Parameters

Use

pg

Specifies the page.

ps

Specifies the page size.

sd

The sort direction (asc / dsc).

cci

The current context item id used to create the cache key.

ci

The current catalog category item.