Commerce Catalog renderings

Last updated Wednesday, July 25, 2018 in SXA Storefront for Designer, Developer

SXA Storefront includes a number of renderings that you can use together to build a catalog on your storefront.

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

CXA_Live_ProductPage_Callouts.snag

Category page example

CXA_Live_CategoryPage_callouts.png

This topic describes the following renderings, which are located in the Commerce Catalog group in the SXA Toolbox:

Catalog Item Container

You can use the Catalog Item Container rendering on a landing page to set a product item as the data source for a group of catalog renderings. 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 contains a placeholder where you can drop other renderings.

Picture 9

Setting the data source

In the Control Properties dialog box for the rendering, you can set the data source to a product item:

Picture 11

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

You can place the Category Navigation rendering on a page to create a Navigation bar that displays the top-level categories from your product catalog.

Picture 1

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

You can 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.

SubcategoryNavigation_rendering.png

Product Facets

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

Product Facets rendering.png

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

Filtering a list on the live storefront

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.

Picture 3

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

You can add the Product Images rendering to a page in the Experience Editor 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.

ProductImages_rendering

Product Information

You can add the Product Information rendering to a page in the Experience Editor to display the product title, description, and item number.

productInfo_rendering.png

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

You can add the Product Inventory rendering to a page in the Experience Editor 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.

ProductInventory_rendering.png

If the product is out of stock, the Add to cart button is disabled.

Product List

The Product List rendering displays 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.

CXA_EE_ProductList_rendering.png

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

If you place the Product List Items per Page rendering above the Product List rendering on category and search pages, the customer can select the number of items displayed per page.

Picture 8

Default items per page

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:

Picture 16

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:

CXA_CE_ProductListHeader_ItemsPerPage_callout

Options in the drop-down menu

You can change the options included in the Results per page drop-down menu by changing the settings in the Control Properties dialog for the rendering:

Picture 15

Product List Page Info

If you place the Product List Page Info rendering above the Product List rendering on category and search pages, the rendering indicates the total number of items in the category or search, and it indicates which items from the list are shown on the current page.

Picture 17

Product List Sorting

If you place the Product List Sorting rendering above the Product List rendering on category and search pages, the customer can use the rendering to sort the category or product list.

Picture 18

Sort options

The options available in the Sort by drop-down menu are the sort fields that have been defined for the category item. You can configure the sort fields on the Category item. The following is an example of the defined values for the Appliances category in the Habitat catalog:

CXA_CE_ProductListHeader_SortByBox_callout.png

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

This gives the following result on the live storefront:

CXA_Live_ProductListSorting.png

Product List Pager

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

ProductListPager_rendering

In the SXA Storefront, this rendering appears twice on each category and search page – above and below the Product List rendering.

Product Price

You can 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.

Picture 12

Product Variants

The Product Variants rendering displays 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.

Picture 43

Note

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

Promoted Products

The Promoted Products rendering displays 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:

CXA_EE_PromotedProducts_rendering.png

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.

Lazy loading

You enable lazy loading to make a Show More button appear underneath a list of products, as illustrated in the previous screenshot of the Promoted Products rendering. When a visitor to your storefront 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.

You can configure lazy loading for either the Promoted Products rendering or the Product List rendering. 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.

CXA_EE_PromotedProductsProperties_LazyLoading.png

Note

Normally, you either enable the Show More button or insert a product list header that includes the Product List Items per Page 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

From SXA Storefront 1.0.2, you can place the Search Initiated, Visited Category Page, and Visited Product Page renderings on pages 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:

CXA_EE_SearchInitiated.png

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.

Send feedback about the documentation to docsite@sitecore.net.