Announcement: You can find the guides for Commerce 7.5 and later on the new Elastic Path Documentation site. This Developer Center contains the guides for Commerce 6.13.0 through 7.4.1.Visit new site

This version of Elastic Path Commerce is no longer supported or maintained. To upgrade to the latest version, contact your Elastic Path representative.

Guided Product Selection

Guided Product Selection

Guided Product Selection lets the user select a SKU when a product has configurable options. Where possible, guided product selection limits the selectable options to combinations for which a SKU exists that matches the selected set of options.

As the user selects options, further options are dynamically filtered through Javascript and DWR calls to the server.

Key classes and files

In Core:

  • SkuOption - A user-selectable product option such as "Size" or "Color." A SkuOption has a collection of SkuOptionValues.
  • SkuOptionValue - A valid value for the given SkuOption. For example, "Red," "Green," or "Blue."
  • ProductType - A collection of SkuOptions that are configurable for products of that type. For example, a "Shoe" product type has a "Size" and "Color" SkuOption.
  • ProductSku - A collection of the SkuOptionValues that correspond to the ProductType. For example, a "Shoe" SKU has SkuOptionValues "Red" and "Small."

In Storefront:

  • SkuConfigurationService - Displays the valid option values the user has selected and finds the corresponding SKUs.
  • GuidedSkuSelectionBean - A bean that wraps data sent to the Javascript client.
  • ProductViewBean - A bean that sets the product to display.
  • DefaultProductConfigControllerImpl - A class that allow configuration to be customized based on product template.

In Store Assets:

  • guidedSkuTemplate.vm - The Velocity template that displays products with multiple SKUs.
  • productMacro.vm - Velocity macro for displaying products. Contains a map of SEO product URLs.

How it works

  1. The customer requests a product page for a product with multiple SKUs.
  2. productMacro.vm dynamically generates the option widgets for the product being displayed. The options available are from a collection of SkuOptions defined on the product's ProductType.
  3. Given some selected default values, productMacro.vm invokes the skuConfigurationService to retrieve valid values for the remaining options. The selected default values are determined from the SkuOptionValues of the product's default SKU.
  4. When the customer selects an option value, SkuConfigurationService retrieves a SKU corresponding to the selected values that can be added to the cart. If no SKU is found because the user hasn't selected a value for all options, the checkout button is disabled. Selecting an option value also invokes a method on the SkuConfigurationService to retrieve valid option values for the remaining options given the prior selected values..
  5. The product screen updates based on the SKU returned from the SkuConfigurationService and the available option values.
Note:

The filtering algorithm expects the customer to select options from left to right. If the customer selects options at random, only options to the right of the changed option are filtered for valid values. If a customer then selects an option to the left that invalidates some of the prior selections, the invalid choices are automatically updated to valid values.