Commerce Catalog renderings
SXA Storefront includes a number of renderings that you can use together to build a catalog on your storefront. This topic describes the renderings accessible from the Commerce Catalog section in the Toolbox.
Catalog Item Container rendering
You use the Catalog Item Container rendering to set a product item as the data source for a group of catalog renderings. You use it on a landing page. All the catalog renderings added inside the container rendering use the product you select as the product context. This allows the renderings to display product information on a page where there is otherwise no product context available.
When you add this rendering to a placeholder, it does not display anything. The rendering is a placeholder where you can drop other renderings.
The standard SXA container component supports similar functionality as the Catalog Item Container rendering, when setting the data source to point to a catalog item. It works well with the components used in a product page, with the exception of the Product List component where only the Catalog Item Container rendering works.
You set the data source for a product item in the Control Properties dialog box for the rendering.
After you set the product item and add catalog renderings inside the container rendering, product information for the selected product is displayed.
Catalog renderings added inside the container rendering have the same appearance as if they were added directly to the page, so the landing page looks the same as the product detail page for the selected product.
Commerce Search Results rendering
The Commerce Search Results 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 several key differences. See Use the Commerce Search Results rendering.
Configuration
In the Control Properties dialog box, in the Catalog Images section, you can configure the following property for the Commerce Search Results rendering.
|
Property |
Use |
|---|---|
|
Use images from Sitecore Digital Asset Management system |
To use images stored and managed by the Sitecore Digital Asset Management (DAM) system, select the Use images from Sitecore Digital Asset Management system check box. When the check box is cleared, images are retrieved from the Media Library. For example, if the rendering-level setting is to use the Media Library but the site-level setting is to use the images in the Digital Asset Management system, then images are retrieved from the DAM. On the other hand, if the site-level setting is cleared and the Use images from Sitecore Digital Asset Management system check box is selected at the rendering level, then the rendering retrieves the images from the DAM. Note The site-level setting for the catalog image source (sitecore/<tenant>/<site>/Settings/Commerce/Catalog Configuration) and the rendering-level setting are merged (using an OR operation) at runtime. If either one is selected, the images are retrieved from the Digital Asset Management system. |
You configure the Commerce Search Results rendering by modifying the Scriban template.
Product Bundle rendering
In a catalog, related products and/or services can be grouped together as one sellable item known as a product bundle. There are two types of product bundles:
-
Static bundles - this type of product bundle is fixed and the shopper cannot change the products or quantities available in the bundle.
-
Dynamic bundles - this type of product bundle is flexible and allows the shopper to add or remove products from the bundle, upgrade products, and specify the quantity of each product in the bundle.
The Merchandiser builds the product bundle, determines the minimum and maximum number of products in a bundle, and assigns the pricing model.
You display this sellable item on the storefront by adding the Product Bundle rendering to the Products Detail Page, for example.
The Product Bundle Scriban template supports both static bundles and dynamic bundles. The Product Bundle - deprecated rendering, which supports only static bundles, is only available for existing sites and is based on MVC view instead of a Scriban template in a rendering variant.
For additional FAQs, see Dynamic Bundle and Free Gift Selection FAQ.
The Product Page contains both a Product Variants and a Product Bundle rendering in order to show regular sellable items as well as bundles. Each component recognizes the catalog item type that it applies to and ignores the other type so only one of them ends up rendering on the page at runtime. For design purposes, both components are displayed in the Experience Editor. In the following image, the top component is the Product Variants rendering and the bottom component is the Product Bundle rendering:
On the live storefront, the product bundle looks like this:
On the storefront, the inventory of all the constituent sellable items contained in the bundle are examined and the lowest inventory number is returned as the inventory number for the product bundle.
You configure the Product Bundle rendering by modifying the Scriban template.
Product Facets rendering
We no longer recommend using the Product Facets rendering. For the recommended alternative, see Choosing between available renderings.
Product Images rendering
You use the Product Images rendering to display thumbnail images for each image related to the selected product. One thumbnail is selected and a larger image of the selected thumbnail is displayed. If no product is selected, placeholder images are displayed.
Configuration
In the Control Properties dialog box, in the Catalog Images section, you can configure the following property for the Product Images rendering.
|
Property |
Use |
|---|---|
|
Use images from Sitecore Digital Asset Management system |
To use images stored and managed by the Sitecore Digital Asset Management (DAM) system, select the Use images from Sitecore Digital Asset Management system check box. When the check box is cleared, images are retrieved from the Media Library. For example, if the rendering-level setting is to use the Media Library but the site-level setting is to use the images in the Digital Asset Management system, then images are retrieved from the DAM. On the other hand, if the site-level setting is not selected and the Use images from Sitecore Digital Asset Management system check box is selected at the rendering level, then the rendering retrieves the images from the DAM. Note The site-level setting for the catalog image source (sitecore/<tenant>/<site>/Settings/Commerce/Catalog Configuration) and the rendering-level setting are merged (using an OR operation) at runtime. If either one is selected, the images are retrieved from the Digital Asset Management system. |
Product Information rendering
You use the Product Information rendering to display the product title, description, and item number. Alternatively, you can use variants of standard SXA renderings to display product information. This allows you to control the placement of the product name, description, and item number independently of each other.
Product Inventory rendering
You use the Product Inventory rendering to display the current stock status and number of items in stock as [stock status] / [stock count]. When no product is selected, placeholder data is displayed.
If the product is out of stock, the Add to cart button is disabled.
Product List rendering
We no longer recommend using the Product List rendering. For the recommended alternative, see Choosing between available renderings.
Product List Items per Page rendering
We no longer recommend using the Product List Items per Page rendering. For the recommended alternative, see Choosing between available renderings.
Product List Page Info rendering
We no longer recommend using the Product List Page Info rendering. For the recommended alternative, see Choosing between available renderings.
Product List Sorting rendering
We no longer recommend using the Product List Sorting rendering. For the recommended alternative, see Choosing between available renderings.
Product List Pager rendering
We no longer recommend using the Product List Pager rendering. For the recommended alternative, see Choosing between available renderings.
Product Price rendering
You use the Product Price rendering to display the product price. If the product is on sale, the discounted price is displayed and the original price is displayed in strike-through font.
The Product Price - deprecated rendering is only available for existing sites and uses renderers instead of a Scriban template.
You configure the Product Price rendering by modifying the Scriban template.
Product Variants rendering
You use the Product Variants rendering to display a drop-down menu for each variant field (for example, one for size and one for color). If the customer selects an invalid combination, an error message is displayed in the message area and the Add to cart button is disabled.
In the Experience Editor, the rendering only displays a placeholder.
In the case of gift cards, the value of the card can be a variant.
Promoted Products rendering
We no longer recommend using the Promoted Products rendering. For the recommended alternative, see Choosing between available renderings.
Search Initiated, Visited Category Page, and Visited Product Page renderings
You use the Search Initiated, Visited Category Page, and Visited Product Page renderings to track visitor behavior. Each of these renderings makes an individual call to the Commerce Connect API to trigger an associated page event in xDB. You can view the resulting data in both Experience Profile and Experience Analytics.
These renderings are invisible on the live storefront, but they appear on the page in the Experience Editor so that they can be located and edited. For example, the Search Initiated rendering appears like this in the Experience Editor:
Search Initiated rendering
When a search is initiated from the search bar on a page with the Search Initiated rendering, the rendering triggers the Search Initiated page event in Commerce Connect. In the SXA Storefront template, the Search Initiated rendering is included on the Default Commerce Header partial design.
Visited Category Page rendering
When a customer visits a page with the Visited Category Page rendering, the rendering triggers the CategoryPageVisited page event in Commerce Connect. In the Storefront site template, the Visited Category Page rendering is included on the category pages, in the main content area.
Visited Product Page rendering
When a customer visits a page with the Visited Product Page rendering, the rendering triggers the ProductPageVisited page event in Commerce Connect. In the Storefront site template, the Visited Product Page rendering is included on the Product Detail Page (PDP), in the main content area.
To collect analytics and track customer visits on other storefront pages, add the Visited Product Page rendering to the page. For example, with the sample Storefront site, you might want to track customer visits to the Buy Gift Card page and the Drone landing page. To do this, simply add the Visited Product Page rendering to each respective page.
Subcategory Navigation rendering
We no longer recommend using the Subcategory Navigation rendering. For the recommended alternative, see Choosing between available renderings.