4. Cost Calculator Items

INTRODUCTION

Define CC Items

Cost Calculator Items (Text, Select, Slider and Switch) can be added by selecting ‘+’ sign.



Cost Calculator Items can be configured by entering the name in Name field and defining the required settings and the Value.


ITEM 01

Number Input Field

Example from “Renovation Cost Calculator“ Demo page:


Backend:



General


  • Label – Enter Item title (e.g. Facade square feet ($2))
  • Description – Enter description of the item / product
  • Unit value – Value that is multiplied with the number users enter in input field. If client enters, for example 10 in Number Input element, the total will be 20 (2 * 10).
  • Example Value – From the plugin version 1.2.1, initial value can be set in Cost Calculator Item Settings. In order to set initial value for Number Input item, you need to add the starting value you want, to ‘Initial value’ field.

Example: If you have Number Input item with unit 2 and you want the initial value to be 4 items, the initial Total will be 8 (2*4).

  • Change Event Condition – From the plugin version 1.2.3, condition events can be set in Cost Calculator Item Settings. You can learn more on conditions on the following link.

Design


In Design tab enter Id attributte, extra class name(s) and required CSS statements for inline style in Custom ID AttributeExtra Class Name(s) and Inline style field.


FAQ

  • Can I use text as an input?
Can I use text as an input?

Currently, that is not possible. Cost Calculator does not support textual inputs for text box meaning that everything that is entered is evaluated as a number.


ITEM 02

Slider Bar

Example from “Renovation Cost Calculator“ Demo page:


Backend:



General


    • Label – Enter Item title (e.g. Square Feet ($50))
    • Description – Enter description of the item / product
    • Min Value – minimum Slider value (e.g. 0)
    • Max Value – maximum Slider value (e.g. 200)
    • Slider Handle Moves By – Defines how much the quantity will increase each time slider is toggled (e.g. if step is 10, then slider will increase by 10, and values will be: 0,10,20,30…200)
    • Unit value – Value multiplied with each step. For example, if user toggles slider to 30 and unit value is 50, the total will be 150 (30 * 50).
    • Offset – The Slider control has price offset property which allows you to introduce fixed cost regardless of the volume.

*Note that offset value is ignored if PayPal is used (active), as well as when the slider is added to the Cost Calculator group.

  • Example Value – From the plugin version 1.2.1, initial value can be set in Cost Calculator Item Settings. In order to set initial value for Slider item, you need to add the starting value you want, to ‘Initial value’ field.

Example: If you have Slider Item with unit 50 and you want the initial value to be 10 items, the initial Total will be 500 (50*10).

  • Change Event Condition – From the plugin version 1.2.3, condition events can be set in Cost Calculator Item Settings. You can learn more on conditions on the following link.

Design


In Design tab enter Id attributte, extra class name(s) and required CSS statements for inline style in Custom ID AttributeExtra Class Name(s) and Inline style field.


FAQ

  • Add % in slider
Add % in slider

Adding the following custom CSS to the page, percent sign should be added to the sliders:

span.btQuoteSliderValue:after {
    content: '%';
}

ITEM 03

Select List

Example from “Renovation Cost Calculator“ Demo page:


Backend:



General


  • Label – Enter Item title (e.g. Bathroom type)
  • Description – Enter description of the item / product
  • List Of Dropdown Options – For example: Low end;400.23;Ut iaculis mollis nulla in etc. Numbers 400, 600 and 800 are values for each selected Item from the list. For example, if user select Mid range (second option from the list), 600 will be added to the Total.
  • Example Value – From the plugin version 1.2.1, initial value can be set in Cost Calculator Item Settings. In order to set initial value for Select item, you need to add the starting select item you want, to ‘Initial value’ field.

Example: If you want to have first Select Item (value 400) listed as initial, than enter 1 in ‘Initial value’ field and Total will be 400.

  • Images For Dropdown Options and Images Height in px – You can optionally select images and enter images height in px. Number of images and select options should be the same.
  • Change Event Condition – From the plugin version 1.2.3, condition events can be set in Cost Calculator Item Settings. You can learn more on conditions on the following link.

Design


In Design tab enter Id attributte, extra class name(s) and required CSS statements for inline style in Custom ID AttributeExtra Class Name(s) and Inline style field.


FAQ

  • Common Issue: Missing Item
Common Issue: Missing Item

If there is missing Select Item on the frontend, please make sure to check if ; is missing in Value box.


ITEM 04

Switch Toggle

Example from “Renovation Cost Calculator“ Demo page:


Backend:



General


  • Label – Enter Item title (e.g. Facade Works ($1))
  • Description – Enter description of the item / product
  • Value Off – For example: 0, initial value when Switch Item is “off”
  • Value On – For example: 1, once switch is selected, 1 will be added to the Total value.
  • Suggested Option – From the plugin version 1.2.1, initial value can be set in Cost Calculator Item Settings. In order to set initial value for Switch item, you need to add the switch value you want, to ‘Initial value’ field.

Example: If you want to have Switch Item on, than enter 1 in ‘Initial value’ field and Total will be 1.

  • Change Event Condition – From the plugin version 1.2.3, condition events can be set in Cost Calculator Item Settings. You can learn more on conditions on the following link.

Design


In Design tab enter Id attributte, extra class name(s) and required CSS statements for inline style in Custom ID AttributeExtra Class Name(s) and Inline style field.


Please note that not all combinations of options will give good results, so it is best to start with included demo content and modify demo according to your needs.


ITEM 05

Multiply

Example from “Renovation Cost Calculator“ Demo page:


Backend – Choose Multiply from the element list:



Once the Multiply is added to the Cost Calculator select + sign in order to add CC Items which will be multiplied:



If the selected item has value 300 (first option – “Window Air Conditioner”)  and slider is 5, total will be: 300 * 5 = 1500