📜 ⬆️ ⬇️

WPCC 3.5 - plugin for creating calculators in WordPress

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:


Demo calculator


Calculator to calculate the cost of creating a site
Choosing a brand of car without calculating the cost

Attention WPCC users under 3.5
The 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:




Mail settings:



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.


Select:


Displays a drop-down list with a choice of 1 parameter.


Checkbox:


Allows you to make multiple selections from the list.


Radio:


Allows you to make a single selection from the list.


Input Text:


Displays a field for entering parameters by the user.


Input Hidden:


A hidden field that participates in the calculation formula but is not displayed to users.



$ _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.



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.



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.



Slider:


The field that allows you to display a slider (slider).



Condition IF VAL Field == Val User:


A field that is not visible to the user, but takes part in the calculation.



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 array
Content
 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
 /* X = ID  XF = ID  */ .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"> <!-- Text --> <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> <!-- Select --> <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> <!-- Checkbox --> <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> <!-- Radio --> <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> <!-- Input Text --> <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> <!-- Slider --> <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"> <!-- and Style jQuery UI Slide --> </div> <div class="wpcc_jq_slider_text wpcc_jq_slider_text_XF">0</div> <div class="clear"></div></div> <!-- Submit --> <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"> <!-- IF SUCCESS SEND --> <div class="wpcc_mail wpcc_mail_success" id="wpcc_mail_result"> <div class="wpcc_text"> </div> </div> <!-- end IF SUCCESS SEND --> <!-- SUM --> <div class="wpcc_result wpcc_result_X" id="wpcc_result"></div> <!-- Mail --> <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



UPD: video : www.youtube.com/watch?v=eMHBxILCa9s

Source: https://habr.com/ru/post/202246/


All Articles