Introduction
Intershop Commerce Management allows for maintaining variation products. This is often used for "Size" and "Color" options of one product which does not differ much apart from these attributes. However, any kind of custom attribute can be used as variation attribute.
This concept gives an overview of the ideas and features of variation products.
The target group is mainly the Product Content Editor.
Note
The display and filtering of variations relies on the SolR search server.
Glossary
| Name | Description |
|---|---|
| Product | An item that is sold in the online shop. |
| Variation Product | A product that is offered in multiple variants that share most of their attribute values, but differ at some of them. A variation product describes one specific combination of variation attributes, e.g., T-shirt, color: blue, size: M. A variation product can be purchased. |
| Variation Master | A virtual/abstract grouping of variation products, without variation attribute values, e.g., T-shirt. Cannot be purchased, has no own price - but can be used for displaying purposes. |
References
Display Product Variations in the Shop
Product variations can be displayed differently in the storefront, depending on the products sold in the shop as well as on the business model (B2C or B2B). This concept presents the most common ways and explains how to make the correct configuration in Intershop Commerce Management.
The different ways of displaying the product variations correspond to a specific search index configuration that is required to get the desired result. It depends on the presence or absence of specific attributes in the indexes. The following table summarizes the different approaches that are shown in the following sections and are discussed in detail in the Cookbook - Product Search Configuration.
| Individual | Master Aggregated Values | Grouped Variations | Master & Variations | |
|---|---|---|---|---|
| Requirements for Indexed Attributes and Data Providers |
No attributes with ProductVariationAV data provider |
All variation attributes with ProductVariationAV data provider | GroupMasterUUID DefaultVariation No index attributes with ProductVariationAV data provider |
MasterUUID isMastered All variation attributes with ProductVariationAV data provider |
| What is in the index? | Master products (if not excluded) and product variations | Master products and aggregated values of the variation attributes at the product master for the attributes that are indexed with ProductVariationAV | All variation products and its individual values – no master products nor any values of the master product | Master products with aggregated values and all product variations with individual values |
| Category Assignment | Assignment of master and variation products | Assignment of master products – individual variation assignment has no effect | Depends on configuration Only assignment of master product by default | Assignment of master products |
| Product Search Configuration Recipe | Remove the attributes and ProductVariationAV data provider | Index Variation Products - Grouped | ||
Display in Storefront (sections below) | Display Variation Products (Individually) | |||
| Advantages | Simple setup | Low index document count (only masters) | Correct filter value count and combinations | Performance |
| Disadvantages | Only for small variation counts | Only master product data indexed (e.g., description and price) Filter values and filter values count do not consider non-existing combinations | Performance degrades with high number of filters | Filter values and filter values count do not consider non-existing combinations |
| Recommended for | No variations at all or a small set of variation products with low variation count | No list view in product detail page In general, all combinations of variation values exist | List view in product detail page Search with variation value data High variation count | List view in product detail page High variation count High filter count |
Display Variation Products (Grouped)
If the products differ visually (e.g., different colors) and the number of variations is low, it is recommended to display product variations in the shop.
On family and search pages, the default variation is shown. In case filters in the filter navigation are used, a suitable variation (e.g., of the selected color) is displayed.
Clicking on such a product displays the product detail page of exactly this product with the option to switch to the other variations.
Info
| Page | Details | Screenshot |
|---|---|---|
Family Page (also applies to search results page) | On family and search pages, the default variation of a variation master is displayed. Controls (color swatches or drop-downs) below the product indicate that this product is also available in different versions. The controls can be used to switch between the different options without leaving the page. |
|
Family Page - filtered (also applies to search results page) | If a filter is set, another - better fitting - variation is displayed. This is usually the desired behavior for products with different colors, e.g., clothes. |
|
| Product Detail Page | Clicking on a product variation on a family or search page leads to the details page of this exact variation. The controls allow to switch between the different variations. |
|
Configuration
Set Channel Preference
Go to <Channel Name> | Preferences | Product Variations.
Deselect the checkbox for List View.
Click Apply.
Search Index Configuration
If you are starting with the settings from the inSPIRED demo content, no changes to the search index are necessary. This applies also if you only switch between "Show Variation Master" and "Show Variation Products (Grouped)".
If you are starting from scratch or from "Show Variation Products (Individually)", you need to configure the search index. You can choose from the following configuration of the search index configurations described in the Cookbook - Product Search Configuration:
- Index Master Products with Aggregated Variation Values
- Index Variation Products - Grouped (default demo setup)
- Index Master & Variation Products
Info
Depending on the configuration, it is necessary to assign the variation master to categories, or to assign the variation products to categories in addition.
Info
If you switch from "Display Variation Products (Individually)" to another configuration, make sure to remove the ExcludeFromSearchIndex attribute from the variation master products.
Display Variation Products (Individually)
In some cases it is necessary to list all variation products separately in the shop.
On family and search pages, all variations are displayed. In case filters in the filter navigation are used, all suitable variations (e.g., of the selected color) are displayed.
Clicking on such a product displays the product detail page of exactly this product with the option to switch to the other variations.
| Page | Details | Screenshot |
|---|---|---|
Family Page (also applies to search results page) | On family and search pages, all variations of a variation master are displayed. Controls (color swatches or drop downs) below the product indicate that this product is also available in different versions. The controls can be used to switch between the different options without leaving the page. |
|
Family Page - filtered (also applies to search results page) | If filters are set, all matching variations are displayed. |
|
| Product Detail Page | Clicking on a product variation on a family or search page leads to the details page of this exact variation. The controls allow for switching between the different variations. |
|
Configuration
Set Channel Preference
- Go to <Channel Name> | Preferences | Product Variations.
- Deselect the checkbox for List View.
- Click Apply.
Search Index Configuration
- Go to <Channel Name> | Mass Data Tasks | Search Indexes | <name-of-the-search-index>.
- Change the data provider of all affected variation attributes from ProductVariationAV to ProductAV.
- If it is present, remove the attribute "Group Master UUID" from the search index.
Exclude Master Products from Search Index
With this configuration, it is recommended to exclude the master from the search index. Otherwise it will be listed as default variation in the search result. See Cookbook - Product Search Configuration - Exclude Products From Search.
Rebuild Search Index
- Go to <Channel Name> | Mass Data Tasks | Search Indexes.
- Select the search index.
- Click Build.
Display Variation Master
For large numbers of variations (several hundreds for one master) and/or multiple variation attributes there is an alternative view. Here the product master is displayed on family and search pages.
Clicking on the product leads to a product detail page of the master with an advanced filter panel which allows for further drill-down to identify the desired variation.
Info
| Page | Details | Screenshot |
|---|---|---|
Family Page (also applies to search results page) | The master product is displayed with
|
|
Family Page - filtered (also applies to search results page) | When one or multiple filters are set, the master is still displayed. Example: "Color: red" is set, the master displays a black product. The number of matching variations is displayed under the price range. |
|
Product Detail Page - Master | The basic idea is to enable a product master detail page to work like a family page. The product detail page displays information on the master product (name, ID, descriptions etc.). The Quantity field and Add to Cart button are missing as the master itself is not a product that can be ordered. Below the general information there is a complete list of all variations of this master product with a filter panel and a pagination function. The view can be switched between "Tile" and "List" view and the sorting order can be changed. Filters can be used to find the desired variation, which then can be purchased. If a filter has been set on the family page, it is also set on the variation master page (in case the filter affects a variation attribute). The variation products can be added to the cart directly from the list, or the product detail page can be opened to get more information. |
|
| Product Detail Page - Variation | Clicking on a product from the variation master page opens a regular product detail page of this exact variation. Go back to the Product Detail Page - Master by using the Choose Another Variation link. |
|
Configuration
Set Channel Preference
Go to <Channel Name> | Preferences | Product Variations.
Select the checkbox for List View.
Click Apply.
Search Index Configuration
Use one of the following search index configurations
- Index Variation Products - Grouped (default demo setup)
- Index Master & Variation Products
Info
If you switch from "Display Variation Products (Individually)" to another configuration, make sure to remove the ExcludeFromSearchIndex attribute from the variation master products.
Rebuild Search Index
- Go to <Channel Name> | Mass Data Tasks | Search Indexes.
- Select the search index.
- Click Build.
CMS Configuration (Optional)
The configuration of the Product Master Detail Page is located in the Product Detail component template (cmp_tmp_productDetail) that can be found in Content | Component Templates. Different product views - List and Tile - can be selected and the sorting can be configured as shown in the following picture.
Info
For this configuration it is sufficient to assign the variation master to categories. The category assignments of the master product are indexed by default - so all variation products are found, even if not categorized.
If you want to change this behavior, please see Index Variation Products - Grouped. In this case, make sure that the variation products are assigned to the respective categories.
Migration to 7.9 Databases
In order to properly migrate the product variations feature from earlier ICM versions to ICM 7.9, the preference to enable/disable the list view for product variations (EnableAdvancedVariationHandling) is required. A new file migration-to-7.9.0.0.properties has been added to the app_sf_responsive cartridge. After executing the standard command dbmigrate, the preference will be available in the database.
Troubleshooting
If the variation list is not visible on the variation master page:
- Check whether the preference List View Product Variation is enabled in the channel preferences.
- Check whether the corresponding channel product search indexes contain the attribute
GroupMasterUUIDorMasterUUID. - Build channel product search indexes including the newly configured attribute.
- Check the configuration of the product views in the component template Product Detail.
Maintain Product Variations Swatch Image
Note
This section is valid from Intershop 7.10.5.3.
Product variations can differ by color. One way to display different color variation in the storefront is the swatch image, see Display Variation Products in this document.
Swatch images can be maintained via product custom attributes or via image management.
Swatch Image from Variation Product Custom Attribute
This source uses a custom attribute that is stored at each variation product. The name of that custom attribute is configurable per variation attribute and then uses an internal swatch image reference (shared file system only).
Swatch Image from Image Management
This source uses the image management to define the image source. The image management is used for all other product images as well and allows for having internal and external images (e.g., from an image server).
Swatch Image Sources
There are two ways to change the image source:
- Switching the swatch image sources is a preference in the channel back office:
- If set to "Image Management", the ImageType is fixed to "swatches" and the ImageView to "front".
- If not already existing, an ImageType "swatches" has to be created in the image management and assigned to ImageView: "front". (See: Concept - Image Framework | ImageTypes)
- For each variation, a swatch image has to be chosen just like any other image used in the storefront (see: Concept - Image Framework | Images).
- In the source code by overriding a template in project code, see Cookbook - Image Framework:
- Path: a_responsive/app_sf_responsive/staticfiles/cartridge/templates/default/inc/product/variation/PresentationSwatchImage.isml
- Here the image view and image type are configurable according to any project requirements.
Maintain Swatch Image Source in Channel Back Office
This screenshot shows where to change the swatch image source.
Define the Way Variation Attributes Are Displayed in the Storefront
The responsive demo storefront provides several ways variation attributes are displayed. For each variation attribute used in a master product with its variation products, a configuration can be set to define how the variation attribute values are displayed. Possible choices are: Default, Swatch Image, Default and Swatch Image, HTML Color Code and Default and HTML Color Code. The following picture shows an example of how two variation attributes can be displayed: The first (Color) is set to swatch and the second (Hard disk drive capacity) is set to default.
Configure How Variation Attribute Values are Displayed in the Storefront
The Variations tab of a master product lists all existing variation attributes. Furthermore, new ones can be created there.
By clicking on the link of the the attribute name or ID, the Variation Selection Type can be changed.
If a selection with Swatch Image or HTML Color Code is chosen, a Product Attribute Name must be entered for the feature to work. This Product Attribute Name must then be provided at each variation product to either define a swatch image or a color code. If the Swatch Image Source is set to Image Management, the Product Attribute Name is not used.