Commerce Catalog renderings

Version: 9.2

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.

The following screenshots show examples of a product page and a category page from the SXA Storefront. The red boxes indicate the Commerce Catalog renderings used to build the pages.

Product detail page example

Category page example

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 will 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.

Note

The standard SXA container component supports similar functionality as the Catalog Item Container when setting the data source to point to a catalog item. While 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 works)

Configuration

You can set the data source to 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.

Category Navigation rendering

You use the Category Navigation rendering to display the top-level categories of your product catalog (in a menu or navigation bar for example).

The customer can navigate to a category page by clicking a category in the Navigation bar.

The displayed categories are based on the content of the search index.

Subcategory Navigation rendering

You use the Subcategory Navigation rendering to display a list of the subcategories of the selected top-level category. In the Experience Editor, if no top-level category is selected, the rendering is displayed with placeholder text.

Product Bundle rendering

In a catalog, related products and/or services can be grouped together as one sellable item (a bundle). You display this item on the Storefront by adding the Product Bundle rendering to the Products page.

Note

Only static bundles are available. On the storefront, the inventory of the 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.

The Product Page contains both a Product Variant and a Product Bundle component 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 Variant and the bottom component is the Product Bundle.

Configuration

You define the bundle name, the " Go to product" text as well as the "Save up to" text in the Content Editor (<storefront>/Data/Commerce/Catalog/Product Bundle). You can also specify an information message that displays when the customer selects an invalid variant combination.

Product Facets rendering

You use the Product Facets rendering to display a list of available facets for the currently selected category. You add the Product Facets rendering to the category page. If no category is selected, then the rendering is displayed with placeholder text.

The Product Facets rendering is also used on the standard storefront Search page.

Result

When the customer clicks a facet value in a facet list, the facet list is filtered to only show the selected facet value, and the product list is filtered based on the selected facet value.

It is possible to narrow a filter by selecting multiple facets at once. If the customer clicks a selected facet value, the facet is removed from the search filter.

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.

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

You use the Product List rendering to display a list of products with the product image and price, and a link to the product page. If you place the Product List rendering on a category page, it displays the products for the selected category. If no category is selected, placeholder images and data are displayed.

The Product List is also used on the Search page to display search results, which can be a combination of products and categories.

You can place the Product List Items per Page, Product List Page Info, and Product List Sorting renderings above the product list to enable the customer to configure the order of the products in the list and the number of products displayed per page.

If you prefer to display all products in the list on the same page, you can configure the list to use lazy loading.

When a product has variants of different prices, the lowest available price is displayed, prefixed with a text, for example, Starting from. If no variants are defined, or if all variants have the same price, the price is displayed without the text.

If a product is on sale at a discounted price, an overlay banner appears overlapping the product picture and displays the amount of the discount as a percentage of the original price. The price that appears in the product list is the discounted price.

The current stock status of the product is displayed.

The customer can navigate to the product details page by clicking the product image or the Details link.

Product List Items per Page rendering

You use the Product List Items per Page rendering to enable the customer to select the number of items displayed per page. To do this, place the Product List Items per Page rendering above the Product List rendering on category and search pages.

Configuration

In the Commerce Control Panel, you can define a default value for all pages. Enter the overall default value in the Catalog Configuration item, in the Default Items Per Page field:

This is the number of items that will appear on the page until the user selects a different value.

You can configure the value in the Items Per Page field for a specific category page on the Category item. This value overrides the default from the catalog configuration. In the following example, the default number of items that will appear on a page for the Appliances category has been defined as 4:

In the Control Properties dialog box for the rendering you can change the options included in the Results Per Page drop-down menu.

Product List Page Info rendering

You use the Product List Page Info rendering to display the total number of items in the category or search and indicate which items from the list are shown on the current page. You place the Product List Page Info rendering above the Product List rendering on category and search pages.

Product List Sorting rendering

You use the Product List Sorting rendering to enable the customer to sort the category or product list. You place the Product List Sorting rendering above the Product List rendering on category and search pages.

Sort by Category

The Sort by field lists the sort criteria in the Selected field, with an ascending (Asc) option and a descending (Desc) option for each.

Result

On the live storefront, the Sort By list looks like this:

Product List Pager rendering

You use the Product List Page rendering to enable the customer to navigate through the product list. You use the Product List Pager rendering on category and search pages.  The current page is highlighted in the Product List Pager rendering. The customer can click a page number or they can click Next or Previous to navigate between pages.

Result

On the live storefront, this rendering appears twice on each category and search page – above and below the Product List rendering.

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 strikethrough font.

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 displays only a placeholder.

Note

In the case of gift cards, the value of the card can be a variant.

You use the Promoted Products rendering to display a list of products in a format similar to the Product List rendering.

There are three types of lists that can be displayed in the Promoted Products rendering:

  • Named search – a dynamic list of products that is created by searching the product catalog at runtime.

  • Selected products – a static list of selected products.

  • Related products – a list based on relationship data from your commerce system.

In the SXA Storefront, the home page contains an example of a promoted products list that was configured for the page, and the product details page contains an example of a related products list based on relationships in the catalog.

When you insert the Promoted Products rendering in the Experience Editor, it contains placeholder data:

Configuration

After you add the Promoted Products rendering to a page, you must configure it. You create a Product List and configure the Promoted Products rendering to display it.

To make a Show More button appear underneath a list of products, as illustrated in the previous screenshot of the Promoted Products rendering, you enable lazy loading. When a visitor to your storefront and clicks Show More, more items are loaded and displayed in the list. This is an alternative to displaying a fixed number of items at a time.

In the Control Properties dialog box for the rendering, under Lazy Loading, select the Use Lazy Loading check box. In the Max Page Size field, indicate how many items you want to appear in the list when the visitor arrives on the page. This is also the number of items that are added to the list each time the visitor clicks Show More.

Note

Normally, you either enable the Show More button or insert a product list header that includes the Product List Items per Page rendering rendering. They are not designed to be used together, and the lazy loading settings override the selection in the Results per page field if they conflict.

Search Initiated, Visited Category Page, and Visited Product Page rendering

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:

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.

When a customer visits a page with the Visited Category Page rendering, the rendering triggers the CategoryPageVisited page event in Commerce Connect. In the SXA Storefront template, the Visited Category Page rendering is included on the category pages, in the main content area.

When a customer visits a page with the Visited Product Page rendering, the rendering triggers the ProductPageVisited page event in Commerce Connect. In the SXA Storefront template, the Visited Product Page rendering is included on the product detail pages, in the main content area.

Do you have some feedback for us?

If you have suggestions for improving this article,