ReadFAQVisitSUPPORTCheckPLUGIN DETAILS

5. Cost Calculator conditions

INTRODUCTION

Change Event Condition

From the plugin version 1.2.3, condition events can be set in Cost Calculator Item Settings.

The easiest way to learn how Cost Calculator conditions works is to import our demo content which comes with several pre-made calculators that demonstrate how conditional logic works.

Instructions on how to import demo can be found in documentation, in Installing Demo section.

The example calculators that use conditions are following – Cost Calculator Conditions and Cost Calculator Reset Value.

SECTION 01

Show / Hide elements

Cost Calculator allows for hiding and showing fields using conditional logic.

Show / Hide Condition – It allows you to hide or show a field depending on what is selected in another field.
In order to set conditional, Custom ID needs to be added first to the element that will be made hidden or visible.

Then, to the element that will set condition, you need to add the code. For example:

== 0;hide_element;hide();
== 1;hide_element;show();

Explanation: If element’s value is zero (0), certain Item (with Custom Id Attribute “hide_element”) will be hidden. Once the value is changed to one (1), mentioned Item will be visible.

Note: In Event Condition input you can use any jQuery JavaScript library. For example, instead of ‘show / hide’, you can use ‘fadeTo’.

== 0;hide_element;fadeTo('slow', 0.2);
== 1;hide_element;fadeTo('slow', 1);
SECTION 02

Lock / Unlock elements

Lock or unlock elements with conditionals.

Cost Calculator conditions also have option of locking elements when certain value is selected. For example:

== 0;hide_element;hide();lock;
== 1;hide_element;show();unlock;

Explanation: If element’s value is zero (0), certain Item (with Custom Id Attribute “hide_element”) will be hidden and locked. Once the value is changed to one (1), mentioned Item will be visible and unlocked.

Example with ‘fadeTo’:

== 0;hide_element;fadeTo('slow', 0.2);lock; 
== 1;hide_element;fadeTo('slow', 1);unlock;
SECTION 03

Reset value

Cost Calculator conditional logic allows for resetting elements’ value.

Reset value – Cost Calculator allows for condition events to be reset. The value can be reset by adding following shortcode to conditional code.

.bt_cc_set_value()

The whole condition should look like below:

== 0;hide_element;hide().bt_cc_set_value();lock; 
== 1;hide_element;show();unlock;

Explanation: If element’s value is zero (0), certain Item (with Custom Id Attribute “hide_element”) will be hidden and reset (the total will also be reset to initial value). Once the value is changed to one (1), mentioned Item will be visible and unlocked.

Example with ‘fadeTo’:

== 0;hide_element;fadeTo('slow', 0.2).bt_cc_set_value();lock; 
== 1;hide_element;fadeTo('slow', 1);unlock;

Reset value can also be used to set a certain value on one element depending on what is selected in another element. In order to set specific value, you need to add it between brackets in .bt_cc_set_value() shortcode.

Note that it has to be value that is included in element. For example if slider has values from 0 to 10, its value can’t be reset to 20.

The whole condition would look like below:

== 0;hide_element;hide().bt_cc_set_value(2);lock; 
== 1;hide_element;show().bt_cc_set_value(10);unlock;

Explanation: If element’s value is zero (0), certain Item (with Custom Id Attribute “hide_element”) will be locked and its value will be set to 2. Once the value is changed to one (1), mentioned Item will be unlocked and have its value set to 10.

Example with ‘fadeTo’:

== 0;hide_element;fadeTo('slow', 0.2).bt_cc_set_value(2);lock; 
== 1;hide_element;fadeTo('slow', 1).bt_cc_set_value(10);unlock;