Product builders are useful shopping tools, that allow potential customers to “build” an ideal version of a product by combining different options. At the end of this process the user is generally given an action to perform: save the build, share it or buy the product directly.
Creating such a web component from scratch is no easy work. Therefore we decided to create an easy-to-customize template that can help you realize your own product builder!
Photo credits for the demo: BMW.
Creating the structure
The HTML structure is composed of three main elements: a header.main-header for the builder top navigation, a div.cd-builder-steps for the builder steps and a footer.cd-builder-footer for the builder bottom navigation and the overview of the selected product.
<div class="cd-product-builder">
<header class="main-header">
<h1>Product Builder</h1>
<nav class="cd-builder-main-nav disabled">
<ul>
<li class="active"><a href="#models">Models</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#accessories">Accessories</a></li>
<li><a href="#summary">Summary</a></li>
</ul>
</nav>
</header>
<div class="cd-builder-steps">
<ul>
<li data-selection="models" class="active builder-step">
<section class="cd-step-content">
<header>
<h1>Select Model</h1>
<span class="steps-indicator">Step <b>1</b> of 4</span>
</header>
<a href="#0" class="cd-nugget-info">Article & Downaload</a>
<ul class="models-list options-list cd-col-2">
<!-- models here -->
</ul>
</section>
</li>
<!-- additional content will be inserted using ajax -->
</ul>
</div>
<footer class="cd-builder-footer disabled step-1">
<div class="selected-product">
<img src="img/product01_col01.jpg" alt="Product preview">
<div class="tot-price">
<span>Total</span>
<span class="total">$<b>0</b></span>
</div>
</div>
<nav class="cd-builder-secondary-nav">
<ul>
<li class="next nav-item">
<ul>
<li class="visible"><a href="#0">Colors</a></li>
<li><a href="#0">Accessories</a></li>
<li><a href="#0">Summary</a></li>
<li class="buy"><a href="#0">Buy Now</a></li>
</ul>
</li>
<li class="prev nav-item">
<ul>
<li class="visible"><a href="#0">Models</a></li>
<li><a href="#0">Models</a></li>
<li><a href="#0">Colors</a></li>
<li><a href="#0">Accessories</a></li>
</ul>
</li>
</ul>
</nav>
<span class="alert">Please, select a model first!</span>
</footer>
</div>As for the builder steps, only the first one can be found in the index.html file. The other steps depend on the model the user selects and are loaded using Ajax (more in the Events handling section).
Adding style
The CSS used for this resource is quite simple, you can download the demo file to take a look at the entire code.
Just one note about the style of the main elements of the builder: the div.cd-builder-steps is used to wrap the different builder steps; its list items are in absolute position, have a height and width of 100%, are one on top of the others and are hidden by default; the class .active is then used to reveal the active step.
.cd-builder-steps > ul {
height: 100%;
overflow: hidden;
}
.cd-builder-steps .builder-step {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
visibility: hidden;
transition: visibility .5s;
}
.cd-builder-steps .builder-step.active {
position: relative;
z-index: 2;
visibility: visible;
}Events handling
To implement the product builder, we created a ProductBuilder object and used the bindEvents function to attach event handlers to the proper elements.
function ProductBuilder( element ) {
this.element = element;
this.stepsWrapper = this.element.children('.cd-builder-steps');
//...
this.bindEvents();
}
if( $('.cd-product-builder').length > 0 ) {
$('.cd-product-builder').each(function(){
//create a productBuilder object for each .cd-product-builder
new ProductBuilder($(this));
});
}When the user selects one of the models, an Ajax call takes care of loading the new content for the model selected; a data-model attribute is added to each list item inside the ul.models-list and is equal to the name of the HTML file the new content has to be retrieved from (modelType in the code below).
$.ajax({
type: "GET",
dataType: "html",
url: modelType+".html",
beforeSend: function(){
self.loaded = false;
},
success: function(data){
self.models.after(data);
self.loaded = true;
//...
},
error: function(jqXHR, textStatus, errorThrown) {
//...
}
});Each list item has also a data-price, which is the price of the model selected. Data-price attributes are also added to the other options inside the builder (colors, accessories) and are used to update the final price of the product.
As for the possible product customizations, we used the .options-list class to target lists of options among which the user can choose (in our example models and accessories). When the user selects an option, the updateListOptions() function takes care of updating the product price (and builder content, if a model has been selected).
//detect click on one element in an options list (e.g, models, accessories)
this.optionsLists.on('click', '.js-option', function(event){
self.updateListOptions($(this));
});The class .js-option is added to each list item inside the ul.options-list and is used to detect the click event. If the options are exclusive (like with models since you can select just one), a second class (.js-radio) is added.
The .cd-product-customizer class is instead used for customizations like Colors, where the user can select an option and see a change in the product. When one of these options is selected, the customizeModel() function takes care of updating the product preview and the product price (if necessary).
//detect clicks on customizer controls (e.g., colors ...)
this.stepsWrapper.on('click', '.cd-product-customizer a', function(event){
event.preventDefault();
self.customizeModel($(this));
})
