Using rendering variants to display product information
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.
Rendering variants installed with SXA Storefront
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 rendering 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 data source for the renderings
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 Page Content rendering
The product page in 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.
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.
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.
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.
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.