Sitecore Experience Commerce

Using rendering variants to display product information

Abstract

You can use variants of the SXA renderings to display product information instead of using Commerce specific renderings.

The Commerce renderings for SXA include a Product Information rendering that is used to show the product title and description on the product details page. An alternative method to display this information is to use variants of standard SXA renderings.

This topic describes:

When you install SXA Storefront, SXA rendering variants are installed in the /sitecore/Content/Sitecore/Storefront/Presentation/Rendering Variants folder. An additional commerce-specific rendering variant is available for the Page Content rendering that enables you to display a name, description and other product fields with a single SXA component. This provides you with an alternative to the Product Information component that is available in the Commerce Catalog section of the Experience Editor Toolbox.

You can use the SXA renderings Rich Text and Title with catalog items as well. To do so, create a custom rendering variant that allows you to display, for example, a product description or display name. You need to create a custom rendering variant because catalog items use field names that are different than those used in the default rendering variants.

The storefront uses a single page to display different products. The CatalogItemResolver pipeline processor sets the current product context.

To enable you to use product item fields in SXA rendering variants, the ResolveCatalogContext pipeline processor dynamically sets the data source for these renderings to the current product, based on the following conditions:

  • The rendering is one of the following: Page Content, Rich Text, or Title.

  • The product context is set.

  • The data source for the rendering is not already set in the control properties.

The product page in the SXA Storefront uses a variant of the Page Content rendering to display product information. The Product Information rendering contains these fields:

  • Display Name

  • Item Number

  • Description

  • Features

You can insert the Page Content rendering on a page to display product information. You do this in the Experience Editor by dragging the rendering from the toolbox onto the page and then selecting the Product Information variant from the drop-down menu.

C2E9835D27CF48A39E9850838BF93421.png

Behavior of the rendering variant in the Experience Editor

In the Experience Editor, if a product has been selected, the Product information variant displays the product information from the commerce system.

A9DE90B0185E4B7D9BE1956F7F595032.png

Unlike the Commerce Product Information rendering, the Page Content rendering variant cannot display placeholder data. If data is not available for a field, then the Page Content rendering displays the field name, for example, Features field. If no product is selected, the product title is displayed as * and field names are displayed for all fields.

C374002879034AB9B0E55DD9DC7316BC.png

Behavior of the rendering variant on the live storefront

On the live storefront, the product information is displayed. If there is no data available for a field, the field is hidden.

65F9A8BD8E0A4D39B06E1ECE0155BAB5.png

Another way to display product information is to use two rendering variants.

  • To display the product name, insert the Title rendering and select the Display Name Heading variant.

  • To display the product description, insert the Rich Text rendering and select the Description variant.