How to build a simple product configurator for the web with javascript

With a product configurator the customer is guided through the options of a product. (Guided selling). For example a car configurator is well known. After choosing a car model, the engine and some extra options the price and a detailed specification is created.

There are a lot of expensive solutions for this problem. Listed are a few suppliers of product configuration software.

Excel is often used as a product configurator at the back office. With excel you can make the calculation easily. More difficult in Excel are product rules. For example: Option C isn’t possible with option A. Another problem is to get the spreadsheet online. If you are Excel minded I suggest to take a look at KDCalc. With KDCalc you can turn you spreadsheet into a interactive web application.

But what if you have a small company or a small website and don’t want to spend too much money or better nothing.

After following this short hands on training you are able to make a simple product configurator for the web with tools you already have. This means you don’t have to buy anything.

Step 1:

We will start with the user interface. Open notepad and insert the following basic html code. If you are not familiar with html or want to know what the different tags means please check out http://www.w3schools.com/ for more info.

<html>
 <head> </head>
 <body>
  <h1>My First product configurator</h1>
  ...
 </body>
</html>

The next step is to add a form to collect all the required information of the product

 <h1>My First product configurator</h1>
  <form name="CarConfigurator">
  ...
  </form>

In de form we will add a drop down box to select different type of car models. In HTML code a dropdown box is added with “<Select name=”Give a name to the box”> <option value = “name of options”</option> </Select>” tag. See code below.

<form name="CarConfigurator">
 <select name="Car_type" >
  <option value=" " selected="selected">Select a car type</option>
  <option value="1">Station</option>
  <option value="2">Sedan</option>
  <option value="3">Coupe</option>
 </select>

With the tag selected after the <option value=” “ you set this options as default.

The final code for step 1 is:

<html>
 <body>
  <h1>My First product configurator</h1>   

  <form name="CarConfigurator">
    <select name="Car_type" >
      <option value=" " selected="selected">Select a car type</option>
      <option value="1">Station</option>
      <option value="2">Sedan</option>
      <option value="3">Coupe</option>
    </select>
  </form>

 </body>
</html>

Save this file in notepad as follow. Click in the menu file -> save as. Type in the Filename Carconfigurator.html and click on save. Now open your file in the explorer to test.

Step 2:

A product configuration user interface needs more then only one 1 question. The second question is in this case depending on a answer of question 1. The value’s in the second dropdown box needs to be filtered. For this filtering mechanism we will use JavaScript.

First we will add an empty question to the form.

  <select name="Roof_type" >
     <option value=" " selected="selected"></option>
  </select>

When the first question is changed we will fill the values in questions 2 with the correct values. We will use a dynamic dropdown box. We fill the dropdown box with a javascript method.

First we clear the box with “dropbox.options.length = 0;“.

We have to embed the following product rules in de code:

  • When we select a station or (||) Sedan we can select a closed roof or an Open roof with sun protector.
  • When we select a coupe we can select a Hard top or a Soft top. These product rules are created with the if-statements below.
function setRoof(Car) {

  var dropbox = document.CarConfigurator.Roof_type;

  dropbox.options.length = 0;

  if (Car == "1" || Car =="2" ) {

    dropbox.options[dropbox.options.length] = new Option('Closed roof','1');

    dropbox.options[dropbox.options.length] = new Option

    ('Open roof with sun protector','2');

  }

  if (Car == "3") {

    dropbox.options[dropbox.options.length] = new Option('Hard top','3');

    dropbox.options[dropbox.options.length] = new Option('Soft top','4');

  }

}

To trigger this function setRoof in JavaScript we have to add an onchange event to question 1. We change the select statement of question 1 in.


<select name="Car_type" >

<select name="Car_type" onchange="setRoof(this.value);">


Step 2 results in a small product configurator with 2 questions. product configurator demo With the demo file you have the full code of step 2.

Step 3:

We will add some extra options to the configurator. First we will insert the questions in the HTML section. We will add an Engine, the Gear and the Color.

<p>
	Engine: <select name="Engine" onchange="setGear();">
		<option value=" " selected="selected"></option>
		</select>
</p>
<p>
	Gear: <select name="Gear" onchange="setColor();">
		<option value=" " selected="selected"></option>
	</select>
</p>
<p>
	Color: <select name="Color" >
		<option value=" " selected="selected"></option>
	</select>
</p>

Now we have to fill the drop down boxes with data based on product rules. We will start with the engine. We’ve four different type of engine’s. Two large engines for the coupe and two smaller ones for the Sedan and the station. We make a function called setEngine() which will be triggered from the onchange event of the car model.

function setEngine() {

	var dropbox = document.CarConfigurator.Engine;
		dropbox.options.length = 0;
		dropbox.options[dropbox.options.length] = new Option(' ','0');
	if (document.CarConfigurator.Car_type.value == "3")  {
		dropbox.options[dropbox.options.length] = new Option('2.0 145 HP','1');
		dropbox.options[dropbox.options.length] = new Option('2.2 160 HP','2');
	}

	if (document.CarConfigurator.Car_type.value == "1"
|| document.CarConfigurator.Car_type.value == "2" )  {
		dropbox.options[dropbox.options.length] = new Option('1.8 120 HP','3');
		dropbox.options[dropbox.options.length] = new Option('1.6 80 HP','4');
	}
	setGear();
}

To fill the gear drop down box we insert again a new function.

function setGear() {

	var dropbox = document.CarConfigurator.Gear;
		dropbox.options.length = 0;
		dropbox.options[dropbox.options.length] = new Option(' ','0');
	if(document.CarConfigurator.Engine.value){
		dropbox.options[dropbox.options.length] = new Option('5-speed Powershift ','1');
		dropbox.options[dropbox.options.length] = new Option('5-speed Manual ','2');
	}

	if (document.CarConfigurator.Engine.value == "2" )  {
		dropbox.options[dropbox.options.length] = new Option('6-speed Manual','3');
		dropbox.options[dropbox.options.length] = new Option('6-speed Powershift','4');
	}

	if (document.CarConfigurator.Car_type.value == "2" && document.CarConfigurator.Engine.value == "3" )  {
		dropbox.options[dropbox.options.length] = new Option('Geartronic AWD','5');
	}
	setColor();
}

For the color box we have one extra product rule.
When a coupe is selected metallic blue is added as an extra options to the drop down box.

function setColor() {

	var dropbox = document.CarConfigurator.Color;
		dropbox.options.length = 0;
		dropbox.options[dropbox.options.length] = new Option(' ','0');
		dropbox.options[dropbox.options.length] = new Option('Blue','1');
		dropbox.options[dropbox.options.length] = new Option('Green','2');
		dropbox.options[dropbox.options.length] = new Option('Brown','3');

	if (document.CarConfigurator.Car_type.value == "3")  {
		dropbox.options[dropbox.options.length] = new Option('Mettalic Blue','4');
	}
}

Don’t forget to add an onchange event to the select statements in the HTML section.

Now you hava a simple free product configurator in you web browesert. With this configurator a customer can’t make a mistake. He is guided through the options. (Guided selling). Keep in mind that this is a simple configurator and not ready for end-users. I hope it will help you in developing a better configurator.

Demo file : Carconfigurator_step3

This entry was posted in Javascript. Bookmark the permalink.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>