WP Creator Calculator - a plugin for creating a calculator form
A new version of the plugin has been released! Version 3.5.
I present to your attention a plugin for WordPress which allows you to create flexible forms of a calculator.
Briefly about the possibility of the plugin:
Text block - any text, it is possible to use HTML;
Dropdown list - SELECT list;
Checkbox - list CHECKBOX;
Radio buttons - list of RADIO-BUTTONS;
Input field - a text field that allows you to enter numeric values;
Hidden field - hidden field;
SESSION field - the calculation results of the calculator from the array;
Design - the ability to choose the design of the calculator;
Settings - calculator settings;
')
More than 1 calculator can be created on one site.
The principle of the fields:
Fields form the formula of the form:
For each field, you can specify the action performed before and after it.
Arithmetic operations can be any, it all depends on your imagination and level of knowledge of elementary mathematics.
Here are examples of some signs for constructing a formula:
( brackets ) : ($ a + $ b) * $ c
+ addition: $ a + $ b
- subtraction $ a - $ b
* multiplication of $ a * $ b
/ division $ a / $ b
Modulo (integer remainder of dividing $ a by $ b) - $ a% $ b
How to calculate the interest : ($ percent_number * $ amount / 100)
Let us analyze in order the possibilities of each field.
Text block
The displayed text is any text, it is possible to use HTML thereby allowing the calculator form to take on any design. From version 2.5 you can output the value from the $ _SESSION array directly in the text. About sessions in more detail below in the $ _SESSION section.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
CSS is the class for this block. You need to specify only the class name, for example: myclass, and specify the rules for the class in the file of your theme or the * .css file connected via the calculator settings. How the calculator generates CSS and HTML can be viewed below.
Drop-down list.
Field name - the entered text in this field will be displayed above the drop-down list.
To - here you need to specify an arithmetic sign that will set the action in front of this drop-down list.
After - here you need to specify an arithmetic sign that will set the action after the drop-down list.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
Values of the list - to form a drop-down list, you need to arrange the data according to certain rules! For example: [price]: name; [500]: Installation of windows; [0]: Zero;
Surely between such signs [price]: name;
If you miss at least 1, then the field will not work correctly.
ps Input is built by the substitution method via str_replace.
CSS is the class for this block. You need to specify only the class name, for example: myclass, and specify the rules for the class in the file of your theme or the * .css file connected via the calculator settings. How the CSS forms the calculator can be viewed below.
Checkbox
Field name - the entered text in this field will be displayed above the checkbox block.
To - here you need to specify an arithmetic sign that will set the action in front of a group of checkboxes.
After - here you need to specify an arithmetic sign that will set the action after a group of checkboxes.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
Values of the list - to create a list of checkboxes, you need to arrange the data according to certain rules! For example: [price]: name; [500]: Installation of windows; [0]: Zero;
Surely between such signs [price]: name;
ps Input is built by the substitution method via str_replace.
Action - an action between selected checkboxes; for example, we specify an action multiplication, if the checkboxes consist of the following list: [500]: Website creation; [200]: Layout development;
then the next line will be generated (500 * 200).
CSS is the class for this block. You need to specify only the class name, for example: myclass, and specify the rules for the class in the file of your theme or the * .css file connected via the calculator settings. How the CSS forms the calculator can be viewed below.
Radio buttons.
Field name - the entered text in this field will be displayed above the group of radio buttons.
To - here you need to specify an arithmetic sign that will set the action in front of this block of radio buttons.
After - here you need to specify an arithmetic sign that will set the action after the block of radio buttons.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
Values list - to form a group of radio buttons, you need to arrange the data according to certain rules! For example: [price]: name; [500]: Installation of windows; [0]: Zero;
Surely between such signs [price]: name;
ps Input is built by the substitution method via str_replace.
CSS is the class for this block. You need to specify only the class name, for example: myclass, and specify the rules for the class in the file of your theme or the * .css file connected via the calculator settings. How the CSS forms the calculator can be viewed below.
Input field.
Field name - the entered text in this field will be displayed above the text field.
To - here you need to specify an arithmetic sign that will set the action in front of this text field.
After - here you need to specify an arithmetic sign that will set the action after the text field.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
Price - the cost of the field, the entered price with the action described slightly below the entered data from the user.
Action - this action means what we do with the data entered by the site visitor.
CSS is the class for this block. You need to specify only the class name, for example: myclass, and specify the rules for the class in the file of your theme or the * .css file connected via the calculator settings. How the CSS forms the calculator can be viewed below.
Hidden field
To - here you need to specify an arithmetic sign that will set the action in front of this field.
After - here you need to specify an arithmetic sign that will set the action after the hidden field.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
The price is the cost of the hidden field.
SESSION field.
To - here you need to specify an arithmetic sign that will set the action before this selected session.
After - here you need to specify an arithmetic sign that will set the action after the selected session.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
Calculator ID - specify from which calculator you created you need to take data from the session.
Field ID or SUM sum of the calculator - specify the sorting ID of the desired result of the field, or the total sum of the calculator, to get the amount you need to enter SUM.
The session itself is created only after the user clicks the Calculate button. The associative array looks like this:
where wpcalculator-1, digit 1 means the calculator ID, and in the attached data, the keys of the array mean the sorting order, except the key sum is the total cost of the calculation.
To call a session in a text block, you need to create a BBCode, it looks like this:
[session id = "calc_id"] id_key or sum [/ session].
For example, from the calculator 1 we want to get the value of the key 5, then in the text block you need to generate the following code: [session id = "1"] 5 [/ session].
If the array wpcalculator-1 exists and there is a string in it with the key 5, then we will get 600 as a result.
Similarly, if you need to get the sum of the calculator, you need to substitute 5 instead of sum [session id = "1"] sum [/ session].
I would assume primitively that, having the array data, we can already form any complex calculations on our website, limiting ourselves only with simple If and Else operators in PHP ...
Sessions exist until the user closes his browser.
Design - a new feature in the WP Creator Calculator, the choice of design calculator. By default, no design is selected. Templates will be updated over time. If you have a desire to help, then you can send your template to e-amil zetrider@bk.ru.
Settings - In this section there are simple settings and complex ones that are needed to build complex calculation formulas where 2 or more calculators are involved.
The name of the button is the calculation button, the default Calculate. You can customize each calculator individually.
Text up to amount - The text is displayed before the total amount, for example: Total. You can customize each calculator individually.
Text after sum - Displayed after sum, for example: Rub. You can customize each calculator individually.
POST ACTION - If you specify a web address in this field, then after pressing the button, calculate with the calculator you have chosen, you will be taken to the specified address. You can customize each calculator individually.
CSS - Full web address to your Css file. You can specify a separate style file for the calculator. Or you can leave it blank and enter all the styles in the css file of your theme. If you choose any theme in the design, then the css file of the template you selected will be automatically recorded in this field.
How does the CSS in the WP Creator Calculator.
Where:
ID_CALC = Calculator ID
ID_ROW = field ID (not sort), and field ID from MYSQL
How HTML is organized in the WP Creator Calculator (an example of a simple formula):
As can be seen from when all arithmetic is transmitted directly through the VALUE fields .
How to edit formulas.
After adding fields to the calculator, below is a block with the name: Formula
As you can see in the screenshot, all the data for each block is laid out in order, if you get confused, hover your mouse over an incomprehensible field and in the pop-up window you will see a short hint.
The formula , the display of all the fields you added, if you need to edit, just enter the data you need and click the key on the right, if you want to delete, click the cross
The screenshot also shows an error, due to the fact that the sort fields are the same. This can not be allowed, because the formula may be built incorrectly. Indeed, it depends on the sorting fields which value will be interrelated with which.
Also on the screenshot you can see the block: Formula in the form of text, let's break this line: 12 + 13 + ((14 * 15) * 16)
here are the sort fields and from the value of Before and After, it will be easier to navigate and find errors in your formula.
How to insert a calculator on the site.
The code for your theme files: <? Php echo do_shortcode ('[wpcalculator idcalc = "1"]'); ?>
Shortcode for pages and posts: [wpcalculator idcalc = "1"]
where 1 is the ID of the calculator you want to display.
Advanced data analysis transmitted by the calculator.
In the calculator, the shortcode has a call to display a more detailed analysis of the calculations. To display a detailed analysis, you need the shortcode to look like this:
[wpcalculator idcalc = "ID" show_result = "true"].
You will receive the following:
Transmitted data (as a string, all numeric values with arithmetic signs):
8000+ (600 + 800) + ((399 * 600) * (2 * 1))
and Session list:
1. Download the plugin - http://wordpress.org/extend/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 WP Calculator
5. Customize your calculator.
Have questions? ask in the comments!
upd .:
Plugin updated to version 1.1:
Simplified plugin code
The default language is English (foreigners swear)
Russian translation available
In the settings added the ability to set the text after the total amount
Minor bugs fixed
Plugin updated to version 2.0:
Now you can create more than 1 calculator on the site.
Fixed minor bugs.
Plugin updated to version 2.1:
Checkboxes fixed, now work correctly (! Warning! Added action between selected values to Checkboxes);
Added the ability to view the full calculation of the transmitted data. To display, you need to add a new parameter to the shortcode: [wpcalculator idcalc = "ID" show_result = "true"]
What's new in version 2.5:
1. You can place several calculators on one page;
2. Added a check to prevent duplication of the same sorting values;
3. Added $ _SESSION arrays to the calculator, all values are stored in their session; you can pull out and put into the calculation or text block;
4. Added the ability to display a list of available sessions;
5. Added a style for the calculator;
6. Added the ability to set the Action for each calculator;
A new version of the plugin has been released! Version 3.5.
I present to your attention a plugin for WordPress which allows you to create flexible forms of a calculator.
Briefly about the possibility of the plugin:
Text block - any text, it is possible to use HTML;
Dropdown list - SELECT list;
Checkbox - list CHECKBOX;
Radio buttons - list of RADIO-BUTTONS;
Input field - a text field that allows you to enter numeric values;
Hidden field - hidden field;
SESSION field - the calculation results of the calculator from the array;
Design - the ability to choose the design of the calculator;
Settings - calculator settings;
')
More than 1 calculator can be created on one site.
The principle of the fields:
Fields form the formula of the form:
field1 + (field 3 * (field 2 + field 4))
For each field, you can specify the action performed before and after it.
Arithmetic operations can be any, it all depends on your imagination and level of knowledge of elementary mathematics.
Here are examples of some signs for constructing a formula:
( brackets ) : ($ a + $ b) * $ c
+ addition: $ a + $ b
- subtraction $ a - $ b
* multiplication of $ a * $ b
/ division $ a / $ b
Modulo (integer remainder of dividing $ a by $ b) - $ a% $ b
How to calculate the interest : ($ percent_number * $ amount / 100)
Let us analyze in order the possibilities of each field.
Text block
The displayed text is any text, it is possible to use HTML thereby allowing the calculator form to take on any design. From version 2.5 you can output the value from the $ _SESSION array directly in the text. About sessions in more detail below in the $ _SESSION section.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
CSS is the class for this block. You need to specify only the class name, for example: myclass, and specify the rules for the class in the file of your theme or the * .css file connected via the calculator settings. How the calculator generates CSS and HTML can be viewed below.
Drop-down list.
Field name - the entered text in this field will be displayed above the drop-down list.
To - here you need to specify an arithmetic sign that will set the action in front of this drop-down list.
After - here you need to specify an arithmetic sign that will set the action after the drop-down list.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
Values of the list - to form a drop-down list, you need to arrange the data according to certain rules! For example: [price]: name; [500]: Installation of windows; [0]: Zero;
Surely between such signs [price]: name;
If you miss at least 1, then the field will not work correctly.
ps Input is built by the substitution method via str_replace.
CSS is the class for this block. You need to specify only the class name, for example: myclass, and specify the rules for the class in the file of your theme or the * .css file connected via the calculator settings. How the CSS forms the calculator can be viewed below.
Checkbox
Field name - the entered text in this field will be displayed above the checkbox block.
To - here you need to specify an arithmetic sign that will set the action in front of a group of checkboxes.
After - here you need to specify an arithmetic sign that will set the action after a group of checkboxes.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
Values of the list - to create a list of checkboxes, you need to arrange the data according to certain rules! For example: [price]: name; [500]: Installation of windows; [0]: Zero;
Surely between such signs [price]: name;
ps Input is built by the substitution method via str_replace.
Action - an action between selected checkboxes; for example, we specify an action multiplication, if the checkboxes consist of the following list: [500]: Website creation; [200]: Layout development;
then the next line will be generated (500 * 200).
CSS is the class for this block. You need to specify only the class name, for example: myclass, and specify the rules for the class in the file of your theme or the * .css file connected via the calculator settings. How the CSS forms the calculator can be viewed below.
Radio buttons.
Field name - the entered text in this field will be displayed above the group of radio buttons.
To - here you need to specify an arithmetic sign that will set the action in front of this block of radio buttons.
After - here you need to specify an arithmetic sign that will set the action after the block of radio buttons.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
Values list - to form a group of radio buttons, you need to arrange the data according to certain rules! For example: [price]: name; [500]: Installation of windows; [0]: Zero;
Surely between such signs [price]: name;
ps Input is built by the substitution method via str_replace.
CSS is the class for this block. You need to specify only the class name, for example: myclass, and specify the rules for the class in the file of your theme or the * .css file connected via the calculator settings. How the CSS forms the calculator can be viewed below.
Input field.
Field name - the entered text in this field will be displayed above the text field.
To - here you need to specify an arithmetic sign that will set the action in front of this text field.
After - here you need to specify an arithmetic sign that will set the action after the text field.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
Price - the cost of the field, the entered price with the action described slightly below the entered data from the user.
Action - this action means what we do with the data entered by the site visitor.
CSS is the class for this block. You need to specify only the class name, for example: myclass, and specify the rules for the class in the file of your theme or the * .css file connected via the calculator settings. How the CSS forms the calculator can be viewed below.
Hidden field
To - here you need to specify an arithmetic sign that will set the action in front of this field.
After - here you need to specify an arithmetic sign that will set the action after the hidden field.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
The price is the cost of the hidden field.
SESSION field.
To - here you need to specify an arithmetic sign that will set the action before this selected session.
After - here you need to specify an arithmetic sign that will set the action after the selected session.
Order - the numeric sort order of the fields in the formula, sorting from the smallest to the largest, in order (ASC).
Calculator ID - specify from which calculator you created you need to take data from the session.
Field ID or SUM sum of the calculator - specify the sorting ID of the desired result of the field, or the total sum of the calculator, to get the amount you need to enter SUM.
The session itself is created only after the user clicks the Calculate button. The associative array looks like this:
Array
(
[wpcalculator-1] => Array
(
[2] => 8000
[sum] => 727600
[4] => 399
[5] => 600
[6] => 3
[3] => 1400
)
)
where wpcalculator-1, digit 1 means the calculator ID, and in the attached data, the keys of the array mean the sorting order, except the key sum is the total cost of the calculation.
To call a session in a text block, you need to create a BBCode, it looks like this:
[session id = "calc_id"] id_key or sum [/ session].
For example, from the calculator 1 we want to get the value of the key 5, then in the text block you need to generate the following code: [session id = "1"] 5 [/ session].
If the array wpcalculator-1 exists and there is a string in it with the key 5, then we will get 600 as a result.
Similarly, if you need to get the sum of the calculator, you need to substitute 5 instead of sum [session id = "1"] sum [/ session].
I would assume primitively that, having the array data, we can already form any complex calculations on our website, limiting ourselves only with simple If and Else operators in PHP ...
Sessions exist until the user closes his browser.
Design - a new feature in the WP Creator Calculator, the choice of design calculator. By default, no design is selected. Templates will be updated over time. If you have a desire to help, then you can send your template to e-amil zetrider@bk.ru.
Settings - In this section there are simple settings and complex ones that are needed to build complex calculation formulas where 2 or more calculators are involved.
The name of the button is the calculation button, the default Calculate. You can customize each calculator individually.
Text up to amount - The text is displayed before the total amount, for example: Total. You can customize each calculator individually.
Text after sum - Displayed after sum, for example: Rub. You can customize each calculator individually.
POST ACTION - If you specify a web address in this field, then after pressing the button, calculate with the calculator you have chosen, you will be taken to the specified address. You can customize each calculator individually.
CSS - Full web address to your Css file. You can specify a separate style file for the calculator. Or you can leave it blank and enter all the styles in the css file of your theme. If you choose any theme in the design, then the css file of the template you selected will be automatically recorded in this field.
How does the CSS in the WP Creator Calculator.
.wp_calculate{} /* div - */
.wp_calculateID_CALC{} /* div - c ID */
.wp_calculate_form {} /* form - */
.wp_calculate_formID_CALC {} /* form - c ID */
.wp_calculate_text {} /* div - */
.wp_calculate_textID_ROW {} /* div - ID */
.wp_calculate_description {} /* div - */
.wp_calculate_descriptionID_ROW {} /* div - ID */
.wp_calculate_select {} /* select - */
.wp_calculate_selectID_ROW {} /* select - ID */
.wp_calculate_checkbox {} /* input - */
.wp_calculate_checkboxID_ROW {} /* input - ID */
.wp_calculate_radio {} /* input - */
.wp_calculate_radioID_ROW {} /* input - ID */
.wp_calculate_inputtext {} /* input - */
.wp_calculate_inputtextID_ROW {} /* input - ID */
.wp_calculate_submit {} /* input - */
.wp_calculate_submitID_CALC {} /* input - c ID */
.wpcalculator_price {} /* div - */
.wpcalculator_priceID_CALC {} /* div - c ID */
Where:
ID_CALC = Calculator ID
ID_ROW = field ID (not sort), and field ID from MYSQL
How HTML is organized in the WP Creator Calculator (an example of a simple formula):
<div class="wp_calculate wp_calculate1"><br>
<form method="POST" action="#calculate1" class="wp_calculate_form
wp_calculate_form1" name="calculateform1"><br>
<div class="wp_calculate_text wp_calculate_text1 ">
</div><br>
<div class="wp_calculate_description wp_calculate_description2">
</div><br>
<select name="calculateprice[12]" class="wp_calculate_select
wp_calculate_select2 "><br>
<option value="8000+"> </option><br>
<option value="2000+"> </option><br>
<option value="1000+"> </option><br>
</select><br>
<br /><br>
<div class="wp_calculate_description wp_calculate_description3">
</div><br>
<input type="checkbox" name="calculatepricecheckbox[][13]" value="600"
class="wp_calculate_checkbox wp_calculate_checkbox3 "> <br>
<br /><br>
<input type="checkbox" name="calculatepricecheckbox[][13]" value="800"
class="wp_calculate_checkbox wp_calculate_checkbox3 ">
<br>
<br /><br>
<input type="hidden" name="calculatepricecheckboxid[3]" value="13" ><br>
<div class="wp_calculate_description wp_calculate_description4">
? </div><br>
<input type="radio" name="calculateprice[14]" value="((0*"
class="wp_calculate_radio wp_calculate_radio4 "> <br>
<br /><br>
<input type="radio" name="calculateprice[14]" value="((399*"
class="wp_calculate_radio wp_calculate_radio4 "> <br>
<br /><br>
<input type="hidden" name="calculateprice[15]" value="600)" ><br>
<div class="wp_calculate_description wp_calculate_description6">
?</div><br>
<input type="text" name="calculatepricetext[16]" value=""
class="wp_calculate_inputtext wp_calculate_inputtext6 "><br>
<br /><br>
<input type="hidden" value="calculate1" name="calc_id_post"><br>
<input type="submit" value="" class="wp_calculate_submit
wp_calculate_submit1" name="calculate1"><br>
</form><br>
<br style="clear:both;"><br>
</div><br>
<br>
<br style="clear:both;"><br>
<div class="wpcalculator_price wpcalculator_price1" id="calculate1"> 488200
.</div><br>
<br style="clear:both;">
As can be seen from when all arithmetic is transmitted directly through the VALUE fields .
How to edit formulas.
After adding fields to the calculator, below is a block with the name: Formula
As you can see in the screenshot, all the data for each block is laid out in order, if you get confused, hover your mouse over an incomprehensible field and in the pop-up window you will see a short hint.
The formula , the display of all the fields you added, if you need to edit, just enter the data you need and click the key on the right, if you want to delete, click the cross
The screenshot also shows an error, due to the fact that the sort fields are the same. This can not be allowed, because the formula may be built incorrectly. Indeed, it depends on the sorting fields which value will be interrelated with which.
Also on the screenshot you can see the block: Formula in the form of text, let's break this line: 12 + 13 + ((14 * 15) * 16)
here are the sort fields and from the value of Before and After, it will be easier to navigate and find errors in your formula.
How to insert a calculator on the site.
The code for your theme files: <? Php echo do_shortcode ('[wpcalculator idcalc = "1"]'); ?>
Shortcode for pages and posts: [wpcalculator idcalc = "1"]
where 1 is the ID of the calculator you want to display.
Advanced data analysis transmitted by the calculator.
In the calculator, the shortcode has a call to display a more detailed analysis of the calculations. To display a detailed analysis, you need the shortcode to look like this:
[wpcalculator idcalc = "ID" show_result = "true"].
You will receive the following:
Transmitted data (as a string, all numeric values with arithmetic signs):
8000+ (600 + 800) + ((399 * 600) * (2 * 1))
and Session list:
Array
(
[wpcalculator-1] => Array
(
[2] => 8000
[sum] => 727600
[4] => 399
[5] => 600
[6] => 3
[3] => 1400
)
)
Installation:
1. Download the plugin - http://wordpress.org/extend/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 WP Calculator
5. Customize your calculator.
Have questions? ask in the comments!
upd .:
Plugin updated to version 1.1:
Simplified plugin code
The default language is English (foreigners swear)
Russian translation available
In the settings added the ability to set the text after the total amount
Minor bugs fixed
Plugin updated to version 2.0:
Now you can create more than 1 calculator on the site.
Fixed minor bugs.
Plugin updated to version 2.1:
Checkboxes fixed, now work correctly (! Warning! Added action between selected values to Checkboxes);
Added the ability to view the full calculation of the transmitted data. To display, you need to add a new parameter to the shortcode: [wpcalculator idcalc = "ID" show_result = "true"]
What's new in version 2.5:
1. You can place several calculators on one page;
2. Added a check to prevent duplication of the same sorting values;
3. Added $ _SESSION arrays to the calculator, all values are stored in their session; you can pull out and put into the calculation or text block;
4. Added the ability to display a list of available sessions;
5. Added a style for the calculator;
6. Added the ability to set the Action for each calculator;
A new version of the plugin has been released! Version 3.5.
Source: https://habr.com/ru/post/129396/
All Articles