Cost Calculator - WordPress Plugin

Contents

1. How to translate plugin?

2. Contact form visible by default

3. How to change the e-mail address from Wordpress?

4. How to edit clients email?

5. How to set initial value for Text item?

6. How to remove the 'Next' button?

7. I don’t have installed WP Bakery. How to edit the calculator without it?

8. How do I remove the bar with Total and leave contact form?

9. Where is my Purchase Code?

10. How do I get 1.000,00 format for the total value?

11. How to set initial value for Switch item to True?

12. How to redirect users to another page after the "Next" button?

13. I can’t upload plugin. It’s saying it is invalid. What went wrong?

14. Importing Demo

15. Translate Datepicker

16. How to set initial value for Slider item?

17. Can I redirect users to another page after submiting message?

18. How to set the initial value for Select item?

19. How to update a plugin?

20. I want to add custom CSS statements to style my calculator. Where should I add them?

21. How to add additional fields to contact form part of Cost Calculator?

22. Will I loose content with updating the plugin?

23. How can I round up the total value and remove .00?

1. How to translate plugin?

The procedure is standard – you can find the .pot file in the plugin’s languages folder. 

Please use PoEdit - https://poedit.net/ to translate the .pot file and create respective .po and .mo fies.

You should upload .po and .mo files created using PoEdit back to plugin's languages folder. 

Please name .po and .mo files e.g. bt_plugin-nl_NL.po and bt_plugin-nl_NL.mo (nl_NL is the language code for dutch) and place them in /wp-content/plugins/bt_cost_calculator/languages/. 

For other languages code, please refer to the following link: Internationalization.

You can set the site language of your WordPress installation on Settings > General. WordPress will automatically use the right language files if they exist. 


2. Contact form visible by default

If you want the form to be open by default, please add the following css statements to the page:

.btQuoteBooking .btTotalQuoteContactGroup {
    opacity: 1;
    filter: alpha(opacity=100);
    max-height: 1000px;
}

.btQuoteBooking .btQuoteBookingForm.btActive .btContactNext {
    display: none;
}

.btQuoteBooking .btQuoteBookingForm.btActive .btTotalNextWrapper {
    padding-right: 0px;
}

3. How to change the e-mail address from Wordpress?

In order to change the sender name, if the visitor and admin are receiving an e-mail from "Wordpress", we suggest you to avoid code customization and to install a third party plugin which will allow this. For example this one: WP Simple Mail Sender.


4. How to edit clients email?

In order to change the clients email, then you should locate the bt_cost_calculator.php file and find function bt_cc_callback() in the code. The email formatting starts from the line:

$message_to_admin = ...

5. How to set initial value for Text item?

From Cost Calculator Version 1.2.1, initial value can be set in Cost Calculator Item Settings.

In order to set initial value for Text item, you need to add the starting value you want to 'Initial value' field.



Have a look how it looks at the frontend:



6. How to remove the 'Next' button?

From Cost Calculator Version 1.2.1, 'Next' button can be removed in Cost Calculator settings.

In order to hide ‘Next’ button, deselect the ‘Display Next Button and Contact Form’ field.



7. I don’t have installed WP Bakery. How to edit the calculator without it?

From the plugin version 2.0.0, Cost Calculator can be edited as a custom post type.

In order to create new calculator, click on Add New option. Should you want to edit one of the existing calculators, you need to import demo content. Instructions on how to install demo content can be found in Installing Demo section.

8. How do I remove the bar with Total and leave contact form?

In order to remove Total bar and leave Next button please add the following css statements to the page:

.btQuoteTotal {
    display: none !important;
} .btQuoteBooking .btQuoteBookingForm.btActive .btTotalNextWrapper {
    padding-right: 0px;
} .btQuoteBooking .btContactNext {
    margin: auto;
} .btQuoteBooking .btQuoteBookingForm .boldBtn {
    float: none;
    margin: auto !important;
}

9. Where is my Purchase Code?

If you are having some troubles finding your Purchase Code, please have a look at the following article: Envato Market Help - Where Is My Purchase Code?

10. How do I get 1.000,00 format for the total value?

The best way to change the total format from e.g. 1,000.00 to 1.000,00 is to modify plugin’s code.

Please locate the following line in cc.main.js in plugin’s folder. It should have the following code:

total = total.toFixed( 2 ).replace( /(\d)(?=(\d{3})+\.)/g, '$1,' );

Replace the noted line with the following statements:

var n = total, c1 = 2;
var d = ",";
var t = ".", s = total < 0 ? "-" : "";
var i = parseInt(n = Math.abs(+n || 0).toFixed(c1)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
 
total = s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c1 ? d + Math.abs(n - i).toFixed(c1).slice(2) : "");

It should change the format of your total.

In addition, if you want to allow users to enter the numbers in text fields in the format with comma as a decimal separator, please locate the following code segment:

window.bt_parse_float = function( x ) {
    r = parseFloat( x );
    if ( isNaN( r ) ) r = 0;
    return r;
}

and replace it with:

window.bt_parse_float = function( x ) {
    r = parseFloat( x.toString().replace( ',', '.' ) );
    if ( isNaN( r ) ) r = 0;
    return r;
}

Please note that plugin update will override this changes. In order to save them, make sure to back up the modified file and repeat the steps from above.

11. How to set initial value for Switch item to True?

From Cost Calculator Version 1.2.1, initial value can be set in Cost Calculator Item Settings.

In order to set initial value for Switch item, you need to add 'On' value to 'Initial value' field.

For example, if 'On' value is 1, you should add number 1 to the field.


12. How to redirect users to another page after the "Next" button?

Please find the following lines in cc.main.js file:

c.find( '.btContactNext' ).click(function() {
                    $( 'html, body' ).delay( 1000 ).animate({
                        scrollTop: ( $( this ).closest( '.btQuoteBooking' ).find( '.btTotalQuoteContactGroup' ).offset().top - 30 )
                    }, 400 );
                    
                    var contact_group = $( this ).closest( '.btQuoteBooking' ).find( '.btTotalQuoteContactGroup' );
                    
                    $( this ).closest( '.btQuoteBooking' ).find( '.btTotalQuoteContactGroup' ).addClass( 'btActive' );
                    $( this ).closest( '.btQuoteBooking' ).find( '.btQuoteBookingForm' ).removeClass( 'btActive' );
                });

and replace them with:

c.find( '.btContactNext' ).click(function() {
                    window.location = 'http://www.google.com';
                });

Please edit the url according to your needs.

13. I can’t upload plugin. It’s saying it is invalid. What went wrong?

Please unpack plugin folder and upload to your wp-content/plugins using FTP. The archive contains not only plugin but also the other files. 

If you want to upload in admin panel, you need to unpack plugin folder (bt_cost_calculator) and pack it again as zip and then upload that zip.

14. Importing Demo

The best way to start is to install demo content. If you want to install demo content please do the following:

Go to ‘Tools > Import > WordPress’ and install WordPress Importer plugin if it is not already installed.


    

When it is installed, choose xml file from demo_data folder and click ‘Upload file and import’. On the following screen make sure that ‘Download and import file attachments’ is checked. Click ‘Submit’ button and wait until import is finished.

You should see imported demo calculators in Cost Calculator panel.


15. Translate Datepicker

First of all, edit cc.main.js file in Plugins folder and locate the following line:

c.find( '.btContactDate' ).datepicker({

Then add the next codes above that line:

$.datepicker.regional['tr'] = {closeText: "kapat",
            prevText: "<geri",
            nextText: "ileri>",
            currentText: "bugün",
            monthNames: [ "Ocak","Şubat","Mart","Nisan","Mayıs","Haziran", "Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık" ],
            monthNamesShort: [ "Oca","Şub","Mar","Nis","May","Haz", "Tem","Ağu","Eyl","Eki","Kas","Ara" ],
            dayNames: [ "Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi" ],
            dayNamesShort: [ "Pz","Pt","Sa","Ça","Pe","Cu","Ct" ],
            dayNamesMin: [ "Pz","Pt","Sa","Ça","Pe","Cu","Ct" ],
            weekHeader: "Hf",
            dateFormat: "dd.mm.yy",
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: "" };
        $.datepicker.setDefaults( $.datepicker.regional['tr'] );

Edit required Labels according to your needs.

16. How to set initial value for Slider item?

From Cost Calculator Version 1.2.1, initial value can be set in Cost Calculator Item Settings.

In order to set initial value for Slider item, you need to add the value between min and max values, in 'Initial value' field.

For example, if you have items from 0 (zero) to 200 in your slider, and you want the initial value to be 2 items, you should add 2 to the field.




17. Can I redirect users to another page after submiting message?

Since Cost Calculator Version 1.2.1, Cost Calculator Settings contain the field for URL that you want your users to be redirected to.

In order to redirect users to another page after submitting the form, add the URL to ‘Optional URL for confirmation’ field.




18. How to set the initial value for Select item?

From Cost Calculator Version 1.2.1, initial value can be set in Cost Calculator Item Settings.

In order to set initial value for Select item, you need to add the index of the item you want to display as initial, in 'Initial select list index' field.

For example, if you have three items in Select field, and you want the second one to be initial, you would add number 2 to the field.



19. How to update a plugin?

If you have not customized the calculator, please download the latest version and rewrite the old files on the server with the new ones. The calculator files should be in /wp-content/plugins/bt_cost_calculator/ of your WordPress installation.

If you have customized the code, you will need to reapply the changes prior to upload of new version.

20. I want to add custom CSS statements to style my calculator. Where should I add them?

Custom CSS code should be added to your theme's Custom / Additional CSS field.


If you use WP Bakery Page Builder (former Visual Composer) you should click on Page Settings button in the upper right corner of WP Bakery Page Builder's interface on relevant Page Edit Form:



Alternatively, you can use third party plugin, e.g. Simple Custom CSS.

21. How to add additional fields to contact form part of Cost Calculator?

If you like to add additional fields to contact form part of Cost Calculator, please do the following:

1. Open bt_cost_calculator.php file in the code editor.

2. Locate the following piece of code:

$output .= '<div class="btQuoteItem' . $m_message . ' btQuoteItemFullWidth"><textarea class="btContactMessage btContactField" placeholder="' . __( 'Message', 'bt-cost-calculator' ) . '"></textarea></div>';

and add above it the following:

$output .= '<div class="btQuoteItem"><input type="text" class="myText btContactField" placeholder="' . __( 'myText', 'bt-cost-calculator' ) . '"></div>';

This will create the new field in the form with the placeholder text myText. Change it according to your needs (edit placeholder="' . __( 'myText', 'bt_plugin' ) statement)

3. Locate the following piece of code in cc.main.js file:

'message' : c.find( '.btContactMessage' ).val()

and add above it the following:

'mytext' : c.find( '.myText' ).val(),

it will ensure that the value of the newly created field gets propagated to backend upon form submission

4. Locate the following piece of code in bt_cost_calculator.php file:

$message = $_POST['message'];

and add above it the following:

$mytext = $_POST['mytext'];

5. Locate the following piece of code in bt_cost_calculator.php file:

if ( $message != '' ) $message_to_admin .= '<div style="padding:.5em;"><b>' . __( 'Message', 'bt-cost-calculator' ) . '</b>: ' . stripslashes( $message ) . '</div>' . "\r\n";

and add above it the following:

if ( $mytext != '' ) $message_to_admin .= '<div style="padding:.5em;"><b>' . __( 'MyText', 'bt-cost-calculator' ) . '</b>: ' . $mytext . '</div>' . "\r\n";

It will include the value of your field into the email body.

22. Will I loose content with updating the plugin?

With new plugin update you will not loose any content, but it will effect and overwritte any changes in the bt_cost_calculator.php code that you've made. The best way is to manually repeat modifications with new update.

23. How can I round up the total value and remove .00?

The best way to change the total value from e.g. 2500.00 to 2500 is to modify plugin’s code.

Please locate line 448 in cc.main.js in plugin’s folder. It should have the following code:

total = total.toFixed( 2 ).replace( /(\d)(?=(\d{3})+\.)/g, '$1,' );

Replace the noted line with the following statement:

total = Math.round(total);

It should round up your result to an integer without decimal points.