Forward chaining javascript rule-engine for a product configurator

A simple product configurator with a forward chaining javascript rule engine. I tried to split the user interface, program code and the rules.

The rules used in this example are.

if ((value.curtain_body == 'on') && (value.rack == 'default'))
{
	return false
}

if ((value.type == '2-axle trailer') && (value.rack == 'high'))
{
	return false
}	

if ((value.type == '2-axle trailer') && (value.tyre_type == 'Michelin'))
{
	return false
}

After a click all the questions are checked against the rules. The background is set to grey when they are not valid.

When the user clicks a grey options the rule engine will try to solve the conflict by changing an other options. This is done by a light weigth simple forward chainging rule engine based on Javascript.

In this demo you can configure a trailer for behind a car.

Demo – Product configurator with forward chaining rule engine

The key of the rule engine is the javascirpt obj[key] = val.
Jquery is used for simple javascript handling

Next steps for me are:
Price calculation
Quote / text condition

Posted in Javascript | Leave a comment

Disabled options in a drop down box

You can gray out and disable an option in a select box (drop down box / list) with the following attributes.

  <option disabled="true" style="color:gray;">Mercedes</option>

The option can´t be selected anymore but is still visible in the select box. This is a full code for a select box.

<select>
  <option>Volvo</option>
  <option>Saab</option>
  <option disabled="true" style="color:gray;">Mercedes</option>
  <option>Audi</option>
</select>

Let’s see if this is working for you. Test the disabled option in a drop down box. Link: drop down box with a disabled option

This is very useful in a product configurator. The option is still visible instead of deleted. Normaly in a cascading drop down box the options are deleted.

Posted in Javascript | Tagged , | Leave a comment

What is a product configurator

Let’s have a closer look at an online product configurator. For example the volvo car configurator. We will analyze the first 4 questions of the configurator. With these for questions already a lot of product variants can be configured.

There are product rules between the questions. For instanse a Volvo model V70 can’t have T3 (150hp) engine.
Continue reading

Posted in Product configuration | Leave a comment

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. Continue reading

Posted in Javascript | Leave a comment