6. Cost Calculator Group

Cost Calculator Group is a container element. You can place calculator items within it.

Up until now, you have probably already noticed that the final calculation result is calculated by adding up the values of all calculator items. In fact it is calculated by adding up the values of all calculator items and calculator groups.

Just as a calculator item, cost calculator group returns one value which contributes to the total by being added with the rest.

Each cost calculator group has a setting called Pseudo JS which allows you to define the calculation logic inside the group.

Pseudo JS is almost identical to ordinary JavaScript, so if you feel comfortable with basic JS structures and statements you should not have any problems implementing the desired functionality.

While writing the Pseudo JS you will have to follow some basic convention though.

Initialization of variables

First couple of lines in your code should be the lines which assign the current values of contained calculator items to your variables. You need to have one line for EACH calculator item within the calculator group.

For example for the cost calculator group from the image above, first lines of pseudo JS have to be:

var item_type = $1;
var num_of_items = $2;
var include_shipping = $3;

This means that variable item_type gets the value of the first item in the calculator group, num_of_items gets the value of the second item and so on…

REMEMBER, you have to have one line for each item.

Calculation logic

Then you can use JavaScript operators to create the logic for your calculation and assign it to the variable.

For example for the cost calculator group from the image above this could be:

var final_res = item_type * num_of_items + 20 * include_shipping;

Returning the value

Finally you have to return the final value to the calculator:

return final_res;

REMEMBER that the returned value will be added to the sum of values of other calculator groups or items in the calculator and contribute to the total.

The calculator has three items within one cost calculator group. Since there are no other elements within calculator, the result of the cost calculator group will be the total. The layout is illustrated below:

JS pseudo code is the following:

var type = $1;
var number_items = $2;
var shipping = $3;

var result = type * number_items + shipping * number_items * 1.5;

return result;

If Item type is 50, Number of Items are 5 and Shipping is included (10) then Total will be:

 50 * 5 + 10 * 5 * 1.5 = 250 + 75 = 325

var type = $1; // get first item value
var number_items = $2; // get second item value
var shipping = $3; // get third item value
var result = 0;

if (type == 0) result = 0;
if (type == 50) result = type * number_items + shipping * number_items * 1.5;
if (type == 100) result = type * number_items + shipping * number_items * 3;
return result;

Here’s the explanation of pseudo code:

If none of the options in select element (type) is chosen, total will be 0 (zero).
If the first option is selected, which has the value of 50, the total will be calculated as following:

result = type * number_items + shipping * number_items * 1.5;

If the second option is selected, with value of 100, total is then calculated like this:

result = type * number_items + shipping * number_items * 3;

If we take second IF clause as an example, values are the following: Type is Type 1 (50), Number of items are 2 and Shipping is included (10) then the Total will be:

50 * 2 + 10 * 2 * 1.5 = 100 + 30 = 130

var type = $1; // get first item value
var number_items = $2; // get second item value
var shipping = $3; // get third item value
var result = 0;

if (number_items == 0) result = 0;
if (number_items >= 1) result = type * number_items + shipping * number_items * 0.5;
if ((number_items >= 5) && (number_items < 10)) result = type * number_items + shipping * number_items * 1.5;

Here’s the explanation of pseudo code:

If slider value (number_items) is not changed, total will be 0 (zero).
If slider value (number_items) is equal to or greater than 1 (one), total is calculated as following:

result = type * number_items + shipping * number_items * 0.5;

If slider value (number_items) is equal to or greater than 5 (five) and less than 10, the total is calculated like this:

result = type * number_items + shipping * number_items * 1.5;

Let’s have a look at the following examples:
1) If we take second IF clause as an example, the values are the following: Type is Type 1 (50), Number of items are 3 and Shipping is included (10) then the Total will be:

50 * 3 + 10 * 3 * 0.5 = 150 + 15 = 165

2) If we take third IF clause as an example, the values are the following: Type is Type 1 (50), Number of items are 5 and Shipping is included (10) then the Total will be:

50 * 5 + 10 * 5 * 1.5 = 250 + 45 = 325