Commerce Catalog renderings

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.

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.

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

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.

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.

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.

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.

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.

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.

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.