September 29, 2011 at 11:35WP Creator Calculator - plugin for creating a calculator form
A new version of the plugin has been released! Version 3.5.
I present to your attention a WordPress plugin that allows you to create flexible calculator forms.
Briefly about the possibility of the plugin:
Text block - any text, it is possible to use HTML;
Drop-down list - SELECT list;
Checkbox - CHECKBOX list;
Radio buttons - RADIO-BUTTONS list;
Input field - a text field that allows you to enter digital values;
Hidden field - a hidden field;
SESSION field - results of calculating a calculator from an array;
Design - the ability to choose a calculator design;
Settings - calculator settings;
You can create more than 1 calculator on one site.
The principle of the fields:
Fields form a formula of the form:
For each field, you can assign an action to be performed before it and after it.
Arithmetic operations can be any, it all depends on your imagination and the level of knowledge of basic mathematics.
Here are examples of some signs for constructing the formula:
( brackets ) : ($ a + $ b) * $ c
+ addition: $ a + $ b
- subtraction $ a - $ b
* multiplication $ a * $ b
/ division $ a / $ b
Modulo division (the integer remainder of dividing $ a by $ b) - $ a% $ b
How to calculate percentages : ($ percent_number * $ sum / 100)
Let us analyze in order the possibilities of each field.
Text block
Display text- any text, it is possible to use HTML thereby allowing the calculator form to accept any design. Since version 2.5, you can output a value from the $ _SESSION array directly in the text. About sessions, see below in the $ _SESSION section for more details.
Order - the numerical order of sorting the fields in the formula, sorting from smallest to largest, in order (ASC).
CSS is the class for this block. You need to specify only the name of the class, for example: myclass, and specify the rules for the class in the file of your topic or the * .css file connected via the calculator settings. How the calculator forms CSS and HTML can be viewed a little lower.
Drop-down list.
Field name - the entered text in this field will be displayed above the drop-down list.
Before- here you need to specify the arithmetic sign that will set the action before this drop-down list.
After - here you need to specify the arithmetic sign that will set the action after the drop-down list.
Order - the numerical order of sorting the fields in the formula, sorting from smallest to largest, in order (ASC).
Values of the list - in order to form a drop-down list, you need to draw up data according to certain rules! For example: [price]: name; [500]: Installation of windows; [0]: Zero;
Necessarily between such signs [price]: name;
If you skip at least 1, then the field will not work correctly.
ps Input is built by the substitution method through str_replace.
CSSIs the class for this block. You need to specify only the name of the class, for example: myclass, and specify the rules for the class in the file of your topic or the * .css file connected via the calculator settings. How the calculator forms CSS can be seen below.
Checkbox.
Field name - the entered text in this field will be displayed above the block of checkboxes.
Before - here you need to specify the arithmetic sign that will set the action in front of the group of checkboxes.
After - here you need to specify the arithmetic sign that will set the action after the group of checkboxes.
Order - the numerical order of sorting the fields in the formula, sorting from smaller to larger in order (ASC).
List Values- to create a list of checkboxes, you need to draw up data according to certain rules! For example: [price]: name; [500]: Installation of windows; [0]: Zero;
Necessarily between such signs [price]: name;
ps Input is built by the substitution method through str_replace.
Action - the action between the selected checkboxes, for example, we set the multiplication action if the checkboxes consist of the following list: [500]: Creating a site; [200]: Layout development;
then the next line will be formed (500 * 200).
CSS is the class for this block. You need to specify only the name of the class, for example: myclass, and specify the rules for the class in the file of your topic or in the * .css file connected via the calculator settings. How the calculator forms CSS can be seen 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 the arithmetic sign that will set the action in front of this block of radio buttons.
After - here you need to specify the arithmetic sign that will set the action after the block of radio buttons.
Order - the numerical order of sorting the fields in the formula, sorting from smallest to largest, in order (ASC).
Values of the list - to form a group of radio buttons, you need to format the data according to certain rules! For example: [price]: name; [500]: Installation of windows; [0]: Zero;
Necessarily between such signs [price]: name;
ps Input is built by the substitution method through str_replace.
CSSIs the class for this block. You need to specify only the name of the class, for example: myclass, and specify the rules for the class in the file of your topic or in the * .css file connected via the calculator settings. How the calculator forms CSS can be seen below.
The input field.
Field name - the entered text in this field will be displayed above the text field.
To - here you need to specify the arithmetic sign that will set the action in front of this text field.
After - here you need to specify the arithmetic sign that will set the action after the text field.
Order - the numerical order of sorting the fields in the formula, sorting from smallest to largest, in order (ASC).
Price- the value of the field, the entered price with the action described a little lower on the entered data by 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 name of the class, for example: myclass, and specify the rules for the class in the file of your topic or in the * .css file connected via the calculator settings. How the calculator forms CSS can be seen below.
Hidden field.
To - here you need to specify the arithmetic sign that will set the action in front of this field.
After - here you need to specify the arithmetic sign that will set the action after the hidden field.
Order- the numerical order of sorting the fields in the formula, sorting from smallest to largest, in order (ASC).
Price - the value of the hidden field.
SESSION field.
Before - here you need to specify the arithmetic sign that will set the action before this selected session.
After - here you need to specify the arithmetic sign that will set the action after the selected session.
Order - the numerical order of sorting the fields in the formula, sorting from smallest to largest, in order (ASC).
ID of which calculator - indicate from which calculator you created you need to take data from the session.
Field ID or Sum of calculator SUM- indicate the sorting ID of the desired field result, or the total amount of the calculator; to get the amount, enter SUM.
The session itself is created only after the user clicks the Calculate button. An associative array looks like this: where wpcalculator-1, the number 1 means the ID of the calculator, and for the embedded data, the keys of the array mean the sort order, except for the sum key, this 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 calculator 1 we want to get the value of key 5, then in the text block we need to generate the following code: [session id = "1"] 5 [/ session].
If the array wpcalculator-1 exists and there is a row with key 5 in it, we get the result of the number 600.
Similarly, if you need to get the sum of the calculator, you need to substitute 5 with sum [session id = "1"] sum [/ session].
I’ll primitively assume that after having the array data, we can already form any complex calculations on our website, restricting ourselves to the simple If and Else operators in PHP ...
Sessions exist until the user closes his browser.
Design is a new feature in WP Creator Calculator, the choice of calculator design. By default, no skin is selected. Templates will replenish 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 and complex settings that are needed to build complex calculation formulas where 2 or more calculators are involved.
The name of the button is the calculation button; by default, Calculate. You can customize each calculator individually.
Text to sum - Text is displayed before the total amount, for example: Total. You can customize each calculator individually.
Text after amount - Displayed after amount, for example: Rub. You can customize each calculator individually.
POST ACTION - If you specify a web address in this field, then after clicking on the button, calculate the calculator of your choice, you will be redirected to the specified address. You can customize each calculator individually.
CSS- Full web address to your css file. You can specify a separate stylesheet for the calculator. Or you can leave it blank and enter all the styles into the css file of your theme. If you have chosen a theme in the design, then the css file of the template you selected is automatically written to this field.
How CSS works in WP Creator Calculator. where: ID_CALC = ID of the calculator ID_ROW = ID of the field (not sorting), and ID of the field from MYSQL How HTML works in WP Creator Calculator (an example of a simple formula): As you can see from when all arithmetic is transmitted directly through VALUE fields . How to edit formulas. After adding fields to the calculator, below is the block with the name: Formula
As you can see in the screenshot, all the data for each block is arranged in order, if you are confused, hover the 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, simply drive in the data you need and press the key button on the right, if you need to delete press the cross.
The error is also visible in the screenshot, it arose because the sorting fields coincide. This should not be allowed, as the formula may be built incorrectly. After all, what sort of value will be interconnected depends on the sorting fields.
The block is also visible in the screenshot: The formula is in the form of text, we will analyze this line: 12 + 13 + ((14 * 15) * 16)
sorting fields are indicated here and from the values Before and After, it will be easier to navigate and find errors in your formula.
How to insert a calculator on the site.
Code for the files of your topic:
Shortcode for pages and posts: [wpcalculator idcalc = "1"]
where 1 is the ID of the calculator that you want to display.
Advanced analysis of data 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 numerical 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. Download wp-content / plugins /
3 into the plugins folder of your site. 3. Activate the plugin
4. Select the item on the left of the admin panel menu WP Calculator
5. Customize your calculator.
Have questions? ask in the comments!
upd .:
The plugin has been updated to version 1.1: The
plugin code has been simplified.
By default, the language is English (foreigners swear).
There is a Russian translation.
The ability to set text after the total amount has been added . Minor
bugs have been fixed.
The plugin has been updated to version 2.0:
Now you can create more than 1 calculator on the site .
Minor bugs fixed.
The plugin has been updated to version 2.1:
Checkboxes have been fixed, now they work correctly (! Attention! An action between the selected values has been added to the Checkboxes);
Added the ability to view the complete 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. Several calculators can be placed on one page;
2. Added check for the prohibition of duplication of the same sorting values;
3. Added $ _SESSION arrays to the calculator, all values are remembered in their session; can be pulled out and substituted into the calculation or text block;
4. Added the ability to display a list of available sessions;
5. Added style for the calculator;
6. Added the ability to set Action for each calculator;
A new version of the plugin has been released! Version 3.5.
I present to your attention a WordPress plugin that allows you to create flexible calculator forms.
Briefly about the possibility of the plugin:
Text block - any text, it is possible to use HTML;
Drop-down list - SELECT list;
Checkbox - CHECKBOX list;
Radio buttons - RADIO-BUTTONS list;
Input field - a text field that allows you to enter digital values;
Hidden field - a hidden field;
SESSION field - results of calculating a calculator from an array;
Design - the ability to choose a calculator design;
Settings - calculator settings;
You can create more than 1 calculator on one site.
The principle of the fields:
Fields form a formula of the form:
field1 + (field 3 * (field 2 + field 4))
For each field, you can assign an action to be performed before it and after it.
Arithmetic operations can be any, it all depends on your imagination and the level of knowledge of basic mathematics.
Here are examples of some signs for constructing the formula:
( brackets ) : ($ a + $ b) * $ c
+ addition: $ a + $ b
- subtraction $ a - $ b
* multiplication $ a * $ b
/ division $ a / $ b
Modulo division (the integer remainder of dividing $ a by $ b) - $ a% $ b
How to calculate percentages : ($ percent_number * $ sum / 100)
Let us analyze in order the possibilities of each field.
Text block
Display text- any text, it is possible to use HTML thereby allowing the calculator form to accept any design. Since version 2.5, you can output a value from the $ _SESSION array directly in the text. About sessions, see below in the $ _SESSION section for more details.
Order - the numerical order of sorting the fields in the formula, sorting from smallest to largest, in order (ASC).
CSS is the class for this block. You need to specify only the name of the class, for example: myclass, and specify the rules for the class in the file of your topic or the * .css file connected via the calculator settings. How the calculator forms CSS and HTML can be viewed a little lower.
Drop-down list.
Field name - the entered text in this field will be displayed above the drop-down list.
Before- here you need to specify the arithmetic sign that will set the action before this drop-down list.
After - here you need to specify the arithmetic sign that will set the action after the drop-down list.
Order - the numerical order of sorting the fields in the formula, sorting from smallest to largest, in order (ASC).
Values of the list - in order to form a drop-down list, you need to draw up data according to certain rules! For example: [price]: name; [500]: Installation of windows; [0]: Zero;
Necessarily between such signs [price]: name;
If you skip at least 1, then the field will not work correctly.
ps Input is built by the substitution method through str_replace.
CSSIs the class for this block. You need to specify only the name of the class, for example: myclass, and specify the rules for the class in the file of your topic or the * .css file connected via the calculator settings. How the calculator forms CSS can be seen below.
Checkbox.
Field name - the entered text in this field will be displayed above the block of checkboxes.
Before - here you need to specify the arithmetic sign that will set the action in front of the group of checkboxes.
After - here you need to specify the arithmetic sign that will set the action after the group of checkboxes.
Order - the numerical order of sorting the fields in the formula, sorting from smaller to larger in order (ASC).
List Values- to create a list of checkboxes, you need to draw up data according to certain rules! For example: [price]: name; [500]: Installation of windows; [0]: Zero;
Necessarily between such signs [price]: name;
ps Input is built by the substitution method through str_replace.
Action - the action between the selected checkboxes, for example, we set the multiplication action if the checkboxes consist of the following list: [500]: Creating a site; [200]: Layout development;
then the next line will be formed (500 * 200).
CSS is the class for this block. You need to specify only the name of the class, for example: myclass, and specify the rules for the class in the file of your topic or in the * .css file connected via the calculator settings. How the calculator forms CSS can be seen 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 the arithmetic sign that will set the action in front of this block of radio buttons.
After - here you need to specify the arithmetic sign that will set the action after the block of radio buttons.
Order - the numerical order of sorting the fields in the formula, sorting from smallest to largest, in order (ASC).
Values of the list - to form a group of radio buttons, you need to format the data according to certain rules! For example: [price]: name; [500]: Installation of windows; [0]: Zero;
Necessarily between such signs [price]: name;
ps Input is built by the substitution method through str_replace.
CSSIs the class for this block. You need to specify only the name of the class, for example: myclass, and specify the rules for the class in the file of your topic or in the * .css file connected via the calculator settings. How the calculator forms CSS can be seen below.
The input field.
Field name - the entered text in this field will be displayed above the text field.
To - here you need to specify the arithmetic sign that will set the action in front of this text field.
After - here you need to specify the arithmetic sign that will set the action after the text field.
Order - the numerical order of sorting the fields in the formula, sorting from smallest to largest, in order (ASC).
Price- the value of the field, the entered price with the action described a little lower on the entered data by 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 name of the class, for example: myclass, and specify the rules for the class in the file of your topic or in the * .css file connected via the calculator settings. How the calculator forms CSS can be seen below.
Hidden field.
To - here you need to specify the arithmetic sign that will set the action in front of this field.
After - here you need to specify the arithmetic sign that will set the action after the hidden field.
Order- the numerical order of sorting the fields in the formula, sorting from smallest to largest, in order (ASC).
Price - the value of the hidden field.
SESSION field.
Before - here you need to specify the arithmetic sign that will set the action before this selected session.
After - here you need to specify the arithmetic sign that will set the action after the selected session.
Order - the numerical order of sorting the fields in the formula, sorting from smallest to largest, in order (ASC).
ID of which calculator - indicate from which calculator you created you need to take data from the session.
Field ID or Sum of calculator SUM- indicate the sorting ID of the desired field result, or the total amount of the calculator; to get the amount, enter SUM.
The session itself is created only after the user clicks the Calculate button. An associative array looks like this: where wpcalculator-1, the number 1 means the ID of the calculator, and for the embedded data, the keys of the array mean the sort order, except for the sum key, this 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 calculator 1 we want to get the value of key 5, then in the text block we need to generate the following code: [session id = "1"] 5 [/ session].
Array
(
[wpcalculator-1] => Array
(
[2] => 8000
[sum] => 727600
[4] => 399
[5] => 600
[6] => 3
[3] => 1400
)
)
If the array wpcalculator-1 exists and there is a row with key 5 in it, we get the result of the number 600.
Similarly, if you need to get the sum of the calculator, you need to substitute 5 with sum [session id = "1"] sum [/ session].
I’ll primitively assume that after having the array data, we can already form any complex calculations on our website, restricting ourselves to the simple If and Else operators in PHP ...
Sessions exist until the user closes his browser.
Design is a new feature in WP Creator Calculator, the choice of calculator design. By default, no skin is selected. Templates will replenish 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 and complex settings that are needed to build complex calculation formulas where 2 or more calculators are involved.
The name of the button is the calculation button; by default, Calculate. You can customize each calculator individually.
Text to sum - Text is displayed before the total amount, for example: Total. You can customize each calculator individually.
Text after amount - Displayed after amount, for example: Rub. You can customize each calculator individually.
POST ACTION - If you specify a web address in this field, then after clicking on the button, calculate the calculator of your choice, you will be redirected to the specified address. You can customize each calculator individually.
CSS- Full web address to your css file. You can specify a separate stylesheet for the calculator. Or you can leave it blank and enter all the styles into the css file of your theme. If you have chosen a theme in the design, then the css file of the template you selected is automatically written to this field.
How CSS works in WP Creator Calculator. where: ID_CALC = ID of the calculator ID_ROW = ID of the field (not sorting), and ID of the field from MYSQL How HTML works in WP Creator Calculator (an example of a simple formula): As you can see from when all arithmetic is transmitted directly through VALUE fields . How to edit formulas. After adding fields to the calculator, below is the block with the name: Formula
.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 калькулятора */
Итого 488200
руб.
As you can see in the screenshot, all the data for each block is arranged in order, if you are confused, hover the 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, simply drive in the data you need and press the key button on the right, if you need to delete press the cross.
The error is also visible in the screenshot, it arose because the sorting fields coincide. This should not be allowed, as the formula may be built incorrectly. After all, what sort of value will be interconnected depends on the sorting fields.
The block is also visible in the screenshot: The formula is in the form of text, we will analyze this line: 12 + 13 + ((14 * 15) * 16)
sorting fields are indicated here and from the values Before and After, it will be easier to navigate and find errors in your formula.
How to insert a calculator on the site.
Code for the files of your topic:
Shortcode for pages and posts: [wpcalculator idcalc = "1"]
where 1 is the ID of the calculator that you want to display.
Advanced analysis of data 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 numerical 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. Download wp-content / plugins /
3 into the plugins folder of your site. 3. Activate the plugin
4. Select the item on the left of the admin panel menu WP Calculator
5. Customize your calculator.
Have questions? ask in the comments!
upd .:
The plugin has been updated to version 1.1: The
plugin code has been simplified.
By default, the language is English (foreigners swear).
There is a Russian translation.
The ability to set text after the total amount has been added . Minor
bugs have been fixed.
The plugin has been updated to version 2.0:
Now you can create more than 1 calculator on the site .
Minor bugs fixed.
The plugin has been updated to version 2.1:
Checkboxes have been fixed, now they work correctly (! Attention! An action between the selected values has been added to the Checkboxes);
Added the ability to view the complete 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. Several calculators can be placed on one page;
2. Added check for the prohibition of duplication of the same sorting values;
3. Added $ _SESSION arrays to the calculator, all values are remembered in their session; can be pulled out and substituted into the calculation or text block;
4. Added the ability to display a list of available sessions;
5. Added style for the calculator;
6. Added the ability to set Action for each calculator;
A new version of the plugin has been released! Version 3.5.