Below, you’ll find a detailed guide on how to add the Cost Calculator Builder Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Cost Calculator Builder Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Cost Calculator Builder Plugin and the shortcodes it provides:
"Cost Calculator Builder is a versatile WordPress plugin that allows you to easily create price estimation forms. Perfect for service and product-based businesses, it gives customers clear cost insights."
- [stm-calc]
- [stm-thank-you-page]
Cost Calculator Builder [stm-calc] Shortcode
The Cost Calculator Builder shortcode, ‘stm-calc’, is used to render a calculator on the frontend. It enqueues necessary scripts and styles, localizes scripts, and handles AJAX requests. The shortcode first checks if a calculator ID is provided. If it exists, it loads the calculator with the specified ID. If not, it displays a message indicating no calculator is selected.
Shortcode: [stm-calc]
Parameters
Here is a list of all possible stm-calc shortcode parameters and attributes:
id– Identifier for the specific calculator to display
Examples and Usage
Basic example – Display a calculator by referencing its ID.
[stm-calc id=1 /]With this shortcode, you will be able to display a calculator that has been created in the Cost Calculator Builder plugin. The ‘id’ parameter is used to specify which calculator to display, where ‘1’ should be replaced with the actual ID of the calculator you wish to display.
Advanced examples
Display a calculator with a specific language setting.
[stm-calc id=1 language="en" /]In this advanced example, the ‘language’ parameter is used to specify the language in which the calculator should be displayed. Replace ‘en’ with the desired language code (for example, ‘fr’ for French, ‘es’ for Spanish, etc.).
Display a calculator with a custom action.
[stm-calc id=1 action="cost_calculator_builder" /]Here, the ‘action’ parameter is used to perform a specific action when the calculator is displayed. Replace ‘cost_calculator_builder’ with the action you want to perform. This could be useful for advanced users who want to customize the behavior of the calculator.
PHP Function Code
In case you have difficulties debugging what causing issues with [stm-calc] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stm-calc', array( self::class, 'render_calculator' ) );Shortcode PHP function:
function render_calculator( $attr ) {
wp_enqueue_script( 'cbb-resize-sensor-js', CALC_URL . '/frontend/dist/sticky/ResizeSensor.js', array(), CALC_VERSION, true );
wp_enqueue_script( 'cbb-sticky-sidebar-js', CALC_URL . '/frontend/dist//sticky/sticky-sidebar.js', array( 'cbb-resize-sensor-js' ), CALC_VERSION, true );
wp_enqueue_style( 'ccb-icons-list', CALC_URL . '/frontend/dist/css/icon/style.css', array(), CALC_VERSION );
wp_enqueue_style( 'calc-builder-app', CALC_URL . '/frontend/dist/css/style.css', array(), CALC_VERSION );
wp_enqueue_script( 'ccb-lodash-js', 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js', array(), CALC_VERSION, true );
wp_add_inline_script( 'ccb-lodash-js', 'window.ccb_lodash = window.ccb_lodash ? window.ccb_lodash : _.noConflict();' );
$params = shortcode_atts( array( 'id' => null ), $attr );
$language = substr( get_bloginfo( 'language' ), 0, 2 );
if ( ! is_admin() || ! empty( $_GET['page'] ) && 'cost_calculator_builder' === $_GET['action'] ) { // phpcs:ignore WordPress.Security.NonceVerification
wp_enqueue_script( 'calc-builder-main-js', CALC_URL . '/frontend/dist/bundle.js', array( 'ccb-lodash-js', 'cbb-sticky-sidebar-js' ), CALC_VERSION, true );
wp_localize_script(
'calc-builder-main-js',
'ajax_window',
array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'language' => $language,
'templates' => CCBFieldsHelper::get_fields_templates(),
'pro_active' => ccb_pro_active(),
)
);
}
if ( isset( $params['id'] ) && get_post( $params['id'] ) ) {
$calc_id = $params['id'];
$id = apply_filters( 'wpml_object_id', $calc_id, 'cost-calc', true );
return \cBuilder\Classes\CCBTemplate::load(
'/frontend/render',
array(
'calc_id' => $id,
'language' => $language,
'translations' => CCBTranslations::get_frontend_translations(),
)
);
}
return '<p style="text-align: center">' . __( 'No selected calculator', 'cost-calculator-builder' ) . '</p>';
}
Code file location:
cost-calculator-builder/cost-calculator-builder/includes/classes/CCBFrontController.phpCost Calculator Builder [stm-thank-you-page] Shortcode
The Cost Calculator Builder shortcode is designed to render a custom ‘Thank You’ page. It enqueues necessary scripts and styles, localizes script for AJAX calls, and fetches field templates. It checks for the ID parameter and retrieves the associated post. If the Pro version is active, it loads the custom ‘Thank You’ page with appropriate translations. If not, it returns an empty string.
Shortcode: [stm-thank-you-page]
Parameters
Here is a list of all possible stm-thank-you-page shortcode parameters and attributes:
id– Unique identifier for the specific cost calculator
Examples and Usage
Basic example – Display a specific thank you page by referencing its ID.
[stm-thank-you-page id=1 /]PHP Function Code
In case you have difficulties debugging what causing issues with [stm-thank-you-page] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'stm-thank-you-page', array( self::class, 'render_thank_you_page' ) );Shortcode PHP function:
function render_thank_you_page( $attr ) {
wp_enqueue_script( 'cbb-resize-sensor-js', CALC_URL . '/frontend/dist/sticky/ResizeSensor.js', array(), CALC_VERSION, true );
wp_enqueue_script( 'cbb-sticky-sidebar-js', CALC_URL . '/frontend/dist//sticky/sticky-sidebar.js', array( 'cbb-resize-sensor-js' ), CALC_VERSION, true );
wp_enqueue_style( 'ccb-icons-list', CALC_URL . '/frontend/dist/css/icon/style.css', array(), CALC_VERSION );
wp_enqueue_style( 'calc-builder-app', CALC_URL . '/frontend/dist/css/style.css', array(), CALC_VERSION );
wp_enqueue_script( 'ccb-lodash-js', 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js', array(), CALC_VERSION, true );
wp_add_inline_script( 'ccb-lodash-js', 'window.ccb_lodash = window.ccb_lodash ? window.ccb_lodash : _.noConflict();' );
$params = shortcode_atts( array( 'id' => null ), $attr );
$language = substr( get_bloginfo( 'language' ), 0, 2 );
wp_enqueue_script( 'calc-builder-main-js', CALC_URL . '/frontend/dist/bundle.js', array( 'ccb-lodash-js', 'cbb-sticky-sidebar-js' ), CALC_VERSION, true );
wp_localize_script(
'calc-builder-main-js',
'ajax_window',
array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'language' => $language,
'templates' => CCBFieldsHelper::get_fields_templates(),
'pro_active' => ccb_pro_active(),
)
);
if ( isset( $params['id'] ) && get_post( $params['id'] ) ) {
$calc_id = $params['id'];
$id = apply_filters( 'wpml_object_id', $calc_id, 'cost-calc', true );
if ( defined( 'CCB_PRO' ) ) {
return \cBuilder\Classes\CCBProTemplate::load(
'/frontend/partials/custom-thank-you-page',
array(
'calc_id' => $id,
'language' => $language,
'translations' => CCBTranslations::get_frontend_translations(),
)
);
}
}
return '';
}
Code file location:
cost-calculator-builder/cost-calculator-builder/includes/classes/CCBFrontController.phpConclusion
Now that you’ve learned how to embed the Cost Calculator Builder Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply