
WPCC is a plugin that allows site administrators to create a calculator form and customize calculation formulas.
CMS Wordpress Creator Calculator 3.5 has the following changes and features:
- Changed calculation algorithm
- Calculator table structure changed
- Added the ability to round the result of calculations
- Now it is possible to use arithmetic functions: Extract the square root, Raise to the power
- JQurey Copy field now works for all field types
- Fixed pattern for building lists SELECT, RADIO (earlier: [100]: title; now: 100: title)
- Added the ability to create lists for Checkbox
- Fixed logical errors in the calculation function
- Added new field: Conditions
- Automatic start of session and connection of jQuery plugin
- Removed unnecessary calculator settings
- Added field option: Exclude from formula
- Added fields option: Hide field visually (for working conditions)
- Added new field: Slider (jQuery UI Slider)
- Fixed connecting wp-load.php to the plugin files
- Added Import and Export calculator formulas
- Added the ability to send the results of user calculations to the email with saving the selected parameters
- Added new calculator themes
- Fixed field sorting
- Added the ability to connect scripts needed for the plugin to work on certain pages of the site
Demo calculator
Calculator to calculate the cost of creating a siteChoosing a brand of car without calculating the costAttention WPCC users under 3.5The structure of the table of the calculator is completely changed! This means that you will need to re-create calculators! For your convenience, added a function that allows you to view the parameters of the calculator formulas of the previous version. After you create new calculators, you can delete the old table through the plugin settings.
Large screenshot of WPCC 3.5 admin panel interface ')
Calculator Job Description
The site administrator on Wordpress can create an unlimited number of calculator forms with their placement on the pages of the site, or through widgets.
The principle of the calculator:
field1 + sqrt ((field 3 * (field 2 + field 4)))
Verbatim:(id1 (sign after the field)) square root of ((sign in front of the field id3 sign after the field) (sign in front of the field id2 sign after the field) (id4 signs after the field))
Calculator Options
Each calculator can be called by its name. This name is displayed only in the administrative panel.
Also, all calculators have the following individual settings:
General settings:
- The name of the button is the default Calculate. You can specify for example: Get the result
- Text before sum - default: Result. It is displayed before the result of the calculation.
- Text after sum - default: Rub. For example, you can specify $.
- Action forms - where to redirect the user after calculation. (Only works in cases of disabled JavaScript)
- To round the result - you can select the function with which the sum of the result will be processed. Available to you: Round (0 to 4 decimal places), Ceil and Floor.
- Calculator design: You can choose one of four ready-made themes for every taste, or make changes to existing ones.
Mail settings:
- Enable sending of letters - if you want to send letters after calculation, select Yes
- Subject - Subject of the letter that is sent to E-Mail. After the topic is automatically added Username. For example: Calculation of the calculator from the user Vasya Pupkin.
- Which E-Mail to send - specify email. Default admin email.
- Text at the beginning of the letter - Text in front of the table with the results of the calculation
- Text in front of the form - Displayed in front of the form for sending a letter by the user
- Successful send message - Appears when a message has been sent successfully.
ps Fields are not validated. What is sent is indicated or not specified by the user.
Download script plugins:
From version 3.5, for the full work of the plugin, the libraries are connected: (jquery-ui-core, jquery-ui-slider, wpcc.js, etc.). In order not to litter your page, you can specify the ID of the pages on which the plug-in shortcode is placed, then the scripts will be loaded only there. If you use a plugin widget, then specify 0 (zero) to download scripts on all pages of the site. These settings are the same for all calculators you create.
Field types, their parameters, description
In the plugin next to each field parameter there is a question mark "?". When you click on the question mark, you will be taken to the developer’s website page with a more detailed description of the parameter.Text block:
Displays the title and text specified in its parameters.- Title - is displayed above the field.
- Text - you can specify any arbitrary text that does not participate in the calculation formula. The field supports html tags. Indents are added automatically (nl2br).
All calculation results of the calculator are recorded in the session, in this connection, you can specify the following codes that will display the desired result from $ _SESSION.
[session id = "number of calculator"] specify the number of the calculator field or specify sum to display the result [/ session] - Visually hide the field - adds display: none for the field block. Needed to work with field conditions.
Select:
Displays a drop-down list with a choice of 1 parameter.- Title - is displayed above the field.
- Signs up - Arithmetic sign that will be in front of the field. For example + or + (
- Signs after - Arithmetic sign, which will cost after the field. For example - or) -
- List - This field allows you to create options in the drop-down list. In previous versions, lists were compiled according to the following pattern:
[price]: field name;
[price2]: field name2;
Since version 3.5, the list template has become simpler:
price: field name
price2: field name2 - This field is involved in the calculation formula - If you want to exclude this field from the calculation formula, select the option No. The selected parameters by the user will be recorded in the session.
- Visually hide the field - adds display: none for the field block. Needed to work with field conditions.
Checkbox:
Allows you to make multiple selections from the list.- Similar to the SELECT field except parameters:
- Action with data - Arithmetic sign, which means the action between the selected checkboxes.
- Default - You need to specify the number that will be used in the calculation in the case when no checkbox has been selected.
- This field is involved in the calculation formula - If you want to exclude this field from the calculation formula, select the option No. The selected parameters by the user will be recorded in the session. It is worth considering the moment, if the field does not participate in the formula, you do not need to specify the "Action with data" parameter, then you will be able to see all the data that the user selected in the email being sent.
Radio:
Allows you to make a single selection from the list.- Similar to the SELECT field.
Input Text:
Displays a field for entering parameters by the user.- Signs up - Arithmetic sign that will be in front of the field. For example + or + (
- Signs after - Arithmetic sign, which will cost after the field. For example - or) -
- Default - You need to specify the number that will be used in the calculation in the case when the visitor did not enter anything in the field.
- Price - You need to specify the number that will be associated with the action specified in the field parameter and produced with the data entered by the user.
- Action with data - Arithmetic sign, which means the action with the entered data by the visitor and the price of the field.
- Visually hide the field - adds display: none for the field block. Needed to work with field conditions.
- This field is involved in the calculation formula - If you want to exclude this field from the calculation formula, select the option No. The selected parameters by the user will be recorded in the session. It is worth considering the moment, if the field does not participate in the formula, you do not need to specify the “Action with data” parameter, then you will be able to see all the data that the user entered in the email being sent.
Input Hidden:
A hidden field that participates in the calculation formula but is not displayed to users.
- Signs up - Arithmetic sign that will be in front of the field. For example + or + (
- Signs after - Arithmetic sign, which will cost after the field. For example - or) -
- Price - You need to specify the number that will be involved in the calculation.
$ _SESSION:
A hidden field that participates in the calculation formula, but is not displayed to users. Allows you to get data from the calculation results of calculators.
- Signs up - Arithmetic sign that will be in front of the field. For example + or + (
- Signs after - Arithmetic sign, which will cost after the field. For example - or) -
- Default - You need to specify the number that will be used in the calculation when the data from the session is empty.
- Calculator ID - Specify the ID of the calculator from which to get data
- Field ID or sum - Specify the field ID or write sum to get the result.
jQuery field:
A hidden field that participates in the calculation formula, but is not displayed to users. Allows you to get the value of the field after the user actions with the specified field.
- Signs up - Arithmetic sign that will be in front of the field. For example + or + (
- Signs after - Arithmetic sign, which will cost after the field. For example - or) -
- Default - You need to specify the number that will be used in the calculation in the case when these fields are empty.
- Field ID - Specify the ID of the field from which you want to copy data. Works for: Input text, Select, Radio, Checkbox, Slider
Arithmetic function:
A hidden field that participates in the calculation formula, but is not displayed to users. Allows you to wrap the field in the selected function and perform with it certain actions in the calculation.
- Signs up - Arithmetic sign that will be in front of the field. For example + or + (
- Signs after - Arithmetic sign, which will cost after the field. For example - or) -
- What function we use - It is possible to choose two functions:
1. Extract square root - allows you to extract the square root of a field or group of fields. To work correctly, be sure to wrap the field in parentheses. For example:
We want to extract the square root of field 15, so the formula should look like this:
[12] (15) - square brackets only visually indicate that this field is an arithmetic function.
If we want to extract the square root of a group of fields, we should also wrap them in square brackets:
[12] (15 + 57-11)
2. Raise to Degree - allows you to raise to the power a field or a group of fields. For correct operation, the field must be covered by brackets! At the end of the bracket we indicate the degree to which the field is to be erected. For example, we will raise the field 10 to the power 2:
[12] (10, 2) - where 2 is a degree.
We must specify in the “Sign before” or “Sign after” of the field that we raise the following parameters :, 2)
Slider:
The field that allows you to display a slider (slider).
- Signs up - Arithmetic sign that will be in front of the field. For example + or + (
- Signs after - Arithmetic sign, which will cost after the field. For example - or) -
- Default - You need to specify a number that will display a slider in the specified interval between the Minimum and Maximum values.
- Visually hide the field - adds display: none for the field block. Needed to work with field conditions.
- Minimum value - You need to specify the number, which will be the minimum value of the slider.
- Maximum value - You need to specify the number, which will be the maximum value of the slider.
- Step - You need to specify the number with which step the slider will “slide”.
- Position - the position in which the slider will be displayed. Vertical or Horizontal.
- This field is involved in the calculation formula - If you want to exclude this field from the calculation formula, select the option No. The selected parameters by the user will be recorded in the session.
Condition IF VAL Field == Val User:
A field that is not visible to the user, but takes part in the calculation.
- Which field to compare - Enter the ID of the field, the value of which we will compare to fulfill the condition. Works for: Input Text, Select, Checkbox, Radio, Slider.
- What value should the field have ? Specify the value to be compared in the condition. For example 100
- Which fields are displayed - Specify the field IDs, separated by commas, to be displayed and included in the calculation formula. For the specified fields, the parameters “Visually hide this field” should be set: “Yes, add display: none”
- Which fields are hidden - Specify the field IDs, separated by commas, that need to be hidden and excluded in the calculation formula. The specified fields “Visually hide this field” must be set to: “No”
How to insert a calculator on a page:
When editing the calculator, near its name you can find a shortcode that can be used.
The shortcode looks like this:
[wpcc id="1"]
where 1 is the ID of your calculator
If you need to insert a calculator into a php theme file, use the following code:
<?php echo do_shortcode('[wpcc id="1"]'); ?>
What does the “Text Field ID Formula” mean?
Displays the field structure of your calculator with the characters set in the “before” and “after” parameters.
This paragraph makes it easy to find errors in your formula.
What does "string" mean
After calculating the calculator in the administrative panel, you can see the “String” field, which displays data from the fields, their “before” and “after” signs.
This line is executed before displaying the amount.
What is "$ _SESSION ['wpcc_X']"
After calculating the calculator in the administrative panel, you can see the data array from the session. In an array, the key is the field ID, and the value is the result of the field. The key sum contains the result of the calculation.
Also in the array there are names of the specified or selected data by the user in the calculator.
Sample session arrayContent
Array ( [2] => 3 [3] => 9000 [4] => 1 [5] => 19 [8] => 180 [9] => zetrider.ru [11] => 520 [14] => 850 [names] => Array ( [2] => [3] => , [4] => [5] => 19 [8] => [9] => zetrider.ru [11] => , [14] => 3D , ) [sum] => 15300 )
What is "ksort (array ())"
After calculating the calculator in the administrative panel, you can see a sorted array of calculating data with their “before” and “after” signs. Allows you to fully see the picture of the formula. The array key is NOT a field ID. This is the sequence number in the array.
How to change calculator styles
The calculator at the time of this writing created 4 simple themes.
Theme files are located in the plugin folder / wp-creator / calculator / theme / the name of the theme you selected for the calculator
Each folder has a style.css file which is responsible for the design of the calculator.
How to use the calculator for other purposes
There are cases when it is not necessary to calculate in the calculator, but you need to get data from users.
For example: You want to implement a form in which the choice of car brand will be offered. When selecting a particular car brand, the user can see the following options on configuration of technical characteristics when using the “Condition” field. After all the actions you receive the data that the user has selected.
To implement this task, all fields are set to “No” in the parameter: “This field participates in the calculation formula”.
With CSS, you can hide the calculation result field so that the visitor does not see the information he doesn’t need in which 0 rub will be displayed. Style is responsible for the block with the result of the calculation: .wpcc_result or wpcc_result_X where X is the ID of your calculator.
How to export a formula
You can copy the serialized array for further transfer or import into another calculator via the button “Export Formula”. In the exported data, all created fields and individual settings of the calculator are saved.
How to Import Formula
You can import a previously serialized array from another calculator using the Import Formula button. The imported data contains all the created fields and individual settings of the calculator. If you import data from another site (or transferred from a friend), do not forget to change the e-mail in the settings of the calculator to which the letters will be sent.
CSS calculator .wpcc {} .wpcc_x {} .wpcc_form {} .wpcc_form_x {} .wpcc_box {} .wpcc_box_XF {} .wpcc_description {} .wpcc_text {} .wpcc_text_XF {} .wpcc_select {} .wpcc_select_XF {} .wpcc_checkbox {} .wpcc_checkbox_XF {} .wpcc_radio {} .wpcc_radio_XF {} .wpcc_inputtext {} .wpcc_inputtext_XF {} .wpcc_jq_slider {} .wpcc_jq_slider_vertical {} .wpcc_jq_slider_horizontal {} .wpcc_jq_slider_box {} .wpcc_jq_slider_box_XF {} .wpcc_jq_slider_text {} .wpcc_jq_slider_text_XF {} .wpcc .ui-slider-horizontal {} .wpcc .ui-slider-vertical {} .wpcc .ui-slider-range {} .wpcc .ui-slider-handle {} .wpcc_submit {} .wpcc_submit_X {} .wpcc_loading {} .wpcc_result_block {} .wpcc_result_block_X {} .wpcc_result {} .wpcc_result_x {} .wpcc_mail {} .wpcc_mail_X {} .wpcc_mail .wpcc_text {} .wpcc_mail .input {} .wpcc_mail .textarea {} .wpcc_mail .wpcc_submit {} .wpcc_mail .wpcc_loading {} .wpcc_mail_success {} .wpcc_mail_success .wpcc_text {} .wpcc_widget {}
HTML calculator <div class="wpcc wpcc_X "> <form method="POST" action="#wpcc_result" class="wpcc_form wpcc_form_X"> <div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF"> <div class="wpcc_description"></div> <div class="wpcc_text wpcc_text_1"></div> <div class="clear"></div></div> <div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF"> <div class="wpcc_description"></div> <select name="" class="wpcc_select wpcc_select_XF wpcc_jq_XF" data-type="select"> <option value=""></option> </select> <div class="clear"></div></div> <div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF"> <div class="wpcc_description "></div> <div class="wpcc_checkbox wpcc_checkbox_3"> <label><input type="checkbox" name="" value="" class="wpcc_jq_XF" data-type="checkbox"></label> </div> <div class="clear"></div></div> <div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF"> <div class="wpcc_description "></div> <div class="wpcc_radio wpcc_radio_XF"> <label><input type="radio" name="" value="" class="wpcc_jq_XF" data-type="radio"></label> </div> <div class="clear"></div></div> <div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF"> <div class="wpcc_description "></div> <input type="text" name="" value="" class="wpcc_inputtext wpcc_inputtext_XF wpcc_jq_XF" data-type="inputtext"> <div class="clear"></div></div> <div class="wpcc_box wpcc_box_XF wpcc_jq_slider_vertical wpcc_jq_slider wpcc_jq_if_XF" data-value="0" data-min="0" data-max="1000" data-position="vertical" data-step="1"> <div class="wpcc_description wpcc_description_XF"></div> <div class="wpcc_jq_slider_box wpcc_jq_slider_box_XF wpcc_jq_XF" data-type="slider"> </div> <div class="wpcc_jq_slider_text wpcc_jq_slider_text_XF">0</div> <div class="clear"></div></div> <input type="submit" value="" name="wpcc_calculate" class="wpcc_submit wpcc_submit_X"> <div class="wpcc_loading"><div></div></div> </form> <div class="wpcc_result_block wpcc_result_block_X"> <div class="wpcc_mail wpcc_mail_success" id="wpcc_mail_result"> <div class="wpcc_text"> </div> </div> <div class="wpcc_result wpcc_result_X" id="wpcc_result"></div> <form method="POST" action="#wpcc_mail_result" class="wpcc_mail wpcc_mail_X"> <div class="wpcc_text"></div> <input type="text" name="wpcc_user_name" value="" placeholder="" class="input" required><br> <input type="email" name="wpcc_user_email" value="" placeholder="" class="input" required><br> <input type="text" name="wpcc_user_phone" value="" placeholder="" class="input"><br> <textarea name="wpcc_user_comment" placeholder="" value="" class="textarea"></textarea><br> <input type="submit" name="wpcc_mail" class="wpcc_submit" value=""> <div class="wpcc_loading"><div></div></div> </form> </div> </div>
How to install the plugin:1. Download plugin -
http://wordpress.org/plugins/wp-creator-calculator/2. Upload wp-content / plugins / to the plugins folder of your site
3. Activate the plugin
4. On the left in the administrative panel menu, select WPCC.
5. Create and customize your calculator.
ps I am looking for a voluntary translator for the plugin and instructions in English.
UPD: Version 3.5.2- Added parameter for the condition condition operator: ==,>, <,> =, <=
- Added filter parameter for the field “Input text”: only numbers and dot
- Fixed calculator name change bug
- Added new field "Result of fields". Allows you to select fields and apply arithmetic to them
UPD: video :
www.youtube.com/watch?v=eMHBxILCa9s