Document Tree
Document Properties
Kbid
2T8921
Last Modified
07-Jul-2023
Added to KB
09-Nov-2018
Public Access
Everyone
Status
Online
Doc Type
Concepts
Product
ICM 7.10
Concept - Product Variations 7.10


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

NameDescription
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.


IndividualMaster Aggregated ValuesGrouped VariationsMaster & Variations
Requirements for Indexed Attributes and Data Providers

GroupMasterUUID

MasterUUID

No attributes with ProductVariationAV data provider

GroupMasterUUID

MasterUUID

All variation attributes with ProductVariationAV data provider

GroupMasterUUID

DefaultVariation

No index attributes with ProductVariationAV data provider

GroupMasterUUID

MasterUUID

isMastered

All variation attributes with ProductVariationAV data provider

What is in the index?Master products (if not excluded) and product variationsMaster products and aggregated values of the variation attributes at the product master for the attributes that are indexed with ProductVariationAVAll variation products and its individual values – no master products nor any values of the master productMaster products with aggregated values and all product variations with individual values
Category AssignmentAssignment of master and variation productsAssignment 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 RecipeRemove the attributes and ProductVariationAV data provider

Index Master Products with Aggregated Variation Values

Index Variation Products - Grouped

Index Master & Variation Products

Display in Storefront (sections below)

Display Variation Products (Individually)

Display Variation Products (Grouped)

Display Variation Products (Grouped)

Display Variation Master

Display Variation Products (Grouped)

Display Variation Master

Advantages

Simple setup

Low index document count (only masters)Correct filter value count and combinationsPerformance
DisadvantagesOnly 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 forNo 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

This is the default setting of the B2C demo store inTRONICS.
PageDetailsScreenshot

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

  1. Go to <Channel Name> | Preferences | Product Variations.

  2. Deselect the checkbox for List View.

  3. 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:


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.

PageDetailsScreenshot

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

  1. Go to <Channel Name> | Preferences | Product Variations.
  2. Deselect the checkbox for List View.
  3. Click Apply.

Search Index Configuration

  1. Go to <Channel Name> | Mass Data Tasks | Search Indexes | <name-of-the-search-index>.
  2. Change the data provider of all affected variation attributes from ProductVariationAV to ProductAV.
  3. 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

  1. Go to <Channel Name> | Mass Data Tasks | Search Indexes.
  2. Select the search index.
  3. 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

This is the default setting of the B2B demo store inTRONICS Business. No Solr version upgrade is necessary.
PageDetailsScreenshot

Family Page

(also applies to search results page)

The master product is displayed with

  • Price range (of all variation products) from the cheapest to the most expensive variation and
  • Number of variations,
  • The Add to Cart button is replaced by Choose Variation,
  • No options for Add to Quote Request, Compare and Add to Order Template,
  • No stock information (in the list view)

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

  1. Go to <Channel Name> | Preferences | Product Variations.

  2. Select the checkbox for List View.

  3. Click Apply.

Search Index Configuration

Use one of the following search index configurations

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

  1. Go to <Channel Name> | Mass Data Tasks | Search Indexes.
  2. Select the search index.
  3. 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 GroupMasterUUID or MasterUUID.
  • 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:

  1. 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).
  2. 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.

Disclaimer
The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.
The Intershop Knowledge Portal uses only technically necessary cookies. We do not track visitors or have visitors tracked by 3rd parties. Please find further information on privacy in the Intershop Privacy Policy and Legal Notice.
Home
Knowledge Base
Product Releases
Log on to continue
This Knowledge Base document is reserved for registered customers.
Log on with your Intershop Entra ID to continue.
Write an email to supportadmin@intershop.de if you experience login issues,
or if you want to register as customer.