Variants is a great way to offer up products which have varying properties, but sometimes they are just not enough or it’s too cumbersome to maintain each and every variant combination you want.
In this article you’ll discover how to build an Apple-style product configurator with uCommerce.
There are two pieces to doing a highly flexible product configurator: The configurator itself and the subsequent presentation of the basket.
We’ll cover the configurator itself in this article and do a separate article for the basket itself.
First we’ll need a main product which is the one that we want to configure. For the sake of concreteness let’s build a product configurator for an Apple MacBook Air.
We’ll build a definition to hold main products. Let’s call it “Configurable”. The product definition will hold information to present the main product unique selling proposition like what you see on the main product page on Apple.com.
We won’t be doing any variants for this product definition as the options will come from somewhere else.
Before we move on let’s create the MacBook Air in the product catalog.
For a MacBook Air we’ll need to be able to configure the CPU, the amount of storage, and a couple of add-ons like an external optical drive and display.
We’ll do the options as individual products, which incidentally they typically are anyway with their own inventory.
Let’s add a couple more product definition for the various types of options: CPU, Flash Storage, and Display.
We’ll do variants for the product options as they will become the actual choices the customer has to choose from when configuring the final product.
Here are the product options configured in a separate category for good measure. Note that each option has a number of variants configured.
I did go ahead and create a definition for each type of add-on, but that’s not a strict requirement. I’m just being a smartass and showing off some other features of uCommerce :)
Now we’ve got a catalog of products and main products and now for the good stuff: Configuring the available options for each main product. Customers will be able to select CPU, Flash Storage, and optional optical drive or Display for our MacBook Air.
uCommerce supports related products, which is a handy way of building up a list of available options for a given product. So let’s see if we can make that work for our configurator.
First let’s set up a new relationship kind called “Option” to help us find available options later on.
And now let’s actually add the options to our MacBook Air.
With the previous steps concluded we’ve got the required information set up in the catalog and now we’re ready to present the options to our rabid following; sorry, loyal customers :)
Enter Razor. Enter the code!
First we’ll load up the product that we wish to configure. Of course it would typically come from a listing, but we’ll just grab it directly to get to the point.
Finally we’ll grab the “Option” relations and present them in a list. Here’s what the Razor code in Umbraco will look like.
// Check if we're dealing with a post
// Iterate the posted values and add each value to basket
foreach (string key in Request.Params.AllKeys.Where(x => x.Substring(0, 3) == "SKU"))
// Grab a price group to work from
var priceGroup = ProductCatalog.All().Single(x => x.Name == SiteContext.Current.CatalogContext.CurrentCatalogName).PriceGroup;
// Load MacBook Air product
Product macbookAir = Product.All().Single(x => x.Sku == "MacBook-Air-11-inch");
// Load options relationship kind
ProductRelationType optionRelation = ProductRelationType.All().Single(x => x.Name == "Option");
// Load the product options, "Option" relation kind only
var options = macbookAir.GetRelatedProducts()[optionRelation];
<input type="hidden" name="masterSku" value="@macbookAir.Sku"/>
@foreach (Product option in options)
foreach (Product selectableOption in option.Variants)
<input type="radio" group="@option.Name" name="SKU,@option.Sku" value="@option.Sku,@selectableOption.VariantSku">@selectableOption.GetDescription("en-us").DisplayName</input>
if (selectableOption.GetPrice(priceGroup).Price > 0)
<input type="radio" group="@option.Name" name="SKU,@option.Name" value="@option.Sku">@option.GetDescription("en-us").DisplayName</input>
if (option.GetPrice(priceGroup).Price > 0)
<input type="submit" value="Add to basket" />
And here’s what the product configurator looks like when the customer sees it in Umbraco. Add some CSS and images to the HTML and you’ve got your product configurator.
Creating and maintaining highly configurable products in uCommerce is a perfect way to offer up nice customization opportunities for customers.
By using the out of the box capabilities like product definitions, relationship kinds, and relationships combined with the API you can build a rich product configurator, which will present product options dynamically based on the options attached to any given product.
Also doing configurable products like this is a great way to manage inventory of individual components instead of complete product configurations. This means that less inventory is required because any given option might be part of multiple different product configurations thus inventory will seem higher with this approach.
In this article you saw how we can use uCommerce to build an Apple-style configurator, but this technique can be further extended to present even more complex decision trees if required.
Imagine building the options themselves with sub-options by doing deeper relationships. This way you can support some very complex scenarios and have complete decision trees for product with very different options, e.g. triple-play service providers of TV, phone, and internet services, which require very different configuration for each option.
The opinions expressed herein are my own personal opinions and do not represent
my employer's view in any way.