I'm new to this platform,
I'm currently dealing with difficulties in displaying multiple shortcodes on a single WordPress page. Despite my attempts, I'm running into conflicts with both CSS and JS. Specifically, only the first shortcode seems to apply the JS and CSS properly. If there is more than one shortcode, the JS doesn't seem to take effect. I'm struggling to pinpoint where the issues might be arising. Any assistance in identifying and resolving these conflicts would be greatly appreciated. Thank you!
=> wp_enqueue_scripts code where I put localized script variables:
function ww_loan_calculator_front_scripts()
{
$post_content = get_post_field('post_content');
// Use preg_match_all to match all instances of the shortcode
preg_match_all('/\[loan_calculator id=(\d+)(?: title=(?:"([^"]*)"|\'([^\']*)\'|([^"\']+))?)?]/', $post_content, $matches);
// Get unique post IDs
$post_ids = isset($matches[1]) ? array_unique($matches[1]) : array();
$loan_all_setting_data = get_option('ww_loan_option');
if ($post_ids) {
foreach ($post_ids as $post_id) {
$loan_all_setting_data = get_post_meta($post_id, 'ww_loancalc_value', true);
wp_register_script('loan-calculator-jquery-ui-' . esc_attr($post_id), 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', array(), WW_LOAN_CALCULATOR_VERSION, true);
// CHART JS
wp_register_script('loan-calculator-chart-js-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . 'includes/js/chart-js/chart.js', array(), WW_LOAN_CALCULATOR_VERSION, true);
// Font awesome
wp_register_style('loan-calculator-font-awesome-script-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . 'includes/css/all.min.css', array(), WW_LOAN_CALCULATOR_VERSION);
// Custom CSS and JS
//01/05/23
wp_register_style('loan-calculator-new-theme-style-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . '/includes/admin/forms/theme-templates/new-theme/css/style.css', array(), WW_LOAN_CALCULATOR_VERSION);
wp_register_script('loan-calculator-print-script-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . 'includes/js/jquery.print.js', array('jquery'), WW_LOAN_CALCULATOR_VERSION, true);
wp_register_style('loan-calculator-frontend-style-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . 'includes/css/frontend-style.css', array(), WW_LOAN_CALCULATOR_VERSION);
wp_register_script('loan-calculator-frontend-script-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . 'includes/js/frontend-script.js', array('jquery'), WW_LOAN_CALCULATOR_VERSION, true);
wp_register_script('loan-calculator-frequency-payment-' . esc_attr($post_id), WW_LOAN_CALCULATOR_URL . 'includes/js/frequency_payment.js', array('jquery'), WW_LOAN_CALCULATOR_VERSION, true);
// Get setting data for the specific post ID
// Fetch Loan Calculator setting data from option table and pass in script.
$currency_symbols = ww_loan_get_currency_symbol();
$loan_amount_min_value = isset($loan_all_setting_data['loan_amount_min_value']) ? $loan_all_setting_data['loan_amount_min_value'] : "";
$loan_amount_max_value = isset($loan_all_setting_data['loan_amount_max_value']) ? $loan_all_setting_data['loan_amount_max_value'] : "";
$loan_term_min_value = isset($loan_all_setting_data['loan_term_min_value']) ? $loan_all_setting_data['loan_term_min_value'] : "";
$loan_term_max_value = isset($loan_all_setting_data['loan_term_max_value']) ? $loan_all_setting_data['loan_term_max_value'] : "";
$monthly_rate = isset($loan_all_setting_data['monthly_rate']) ? $loan_all_setting_data['monthly_rate'] : "";
$application_fee = isset($loan_all_setting_data['application_fee']) ? $loan_all_setting_data['application_fee'] : "";
$back_ground_color = isset($loan_all_setting_data['back_ground_color']) ? $loan_all_setting_data['back_ground_color'] : "";
$interested_rate = isset($loan_all_setting_data['interested_rate']) ? $loan_all_setting_data['interested_rate'] : "";
$interest_rate_min_value = isset($loan_all_setting_data['interest_rate_min_value']) ? $loan_all_setting_data['interest_rate_min_value'] : "";
$interest_rate_max_value = isset($loan_all_setting_data['interest_rate_max_value']) ? $loan_all_setting_data['interest_rate_max_value'] : "";
$calculation_fee_setting_enable = isset($loan_all_setting_data['calculation_fee_setting_enable']) ? $loan_all_setting_data['calculation_fee_setting_enable'] : "";
$remove_decimal_point = isset($loan_all_setting_data['remove_decimal_point']) ? $loan_all_setting_data['remove_decimal_point'] : "";
$payment_mode_enable = isset($loan_all_setting_data['payment_mode_enable']) ? $loan_all_setting_data['payment_mode_enable'] : "";
$regular_repayment_heading = isset($loan_all_setting_data['regular_repayment_heading']) ? $loan_all_setting_data['regular_repayment_heading'] : "";
$default_balloon_amount = isset($loan_all_setting_data['ballon_per']) ? $loan_all_setting_data['ballon_per'] : "";
$disable_ballon_amt = isset($loan_all_setting_data['disable_ballon_amt']) ? $loan_all_setting_data['disable_ballon_amt'] : "";
$select_theme = isset($loan_all_setting_data['select_theme']) ? $loan_all_setting_data['select_theme'] : "";
$month_label = __('Months', 'loan-calculator-wp');
$year_label = __('Years', 'loan-calculator-wp');
$interest_label = __('Interest', 'loan-calculator-wp');
$principal_label = __('Principal', 'loan-calculator-wp');
// Setting data is passed in js file using Localize
$setting_data = array(
'loan_amount_min_value' => $loan_amount_min_value,
'loan_amount_max_value' => $loan_amount_max_value,
'loan_term_min_value' => $loan_term_min_value,
'loan_term_max_value' => $loan_term_max_value,
'monthly_rate' => $monthly_rate,
'application_fee' => $application_fee,
'back_ground_color' => $back_ground_color,
'interested_rate' => $interested_rate,
'interest_rate_min_value' => $interest_rate_min_value,
'interest_rate_max_value' => $interest_rate_max_value,
'calculation_fee_setting_enable' => $calculation_fee_setting_enable,
'currency_symbols' => $currency_symbols,
'remove_decimal_point' => $remove_decimal_point,
'month_label' => $month_label,
'year_label' => $year_label,
'interest_label' => $interest_label,
'principal_label' => $principal_label,
'default_balloon_amount' => $default_balloon_amount,
'disable_ballon_amt' => $disable_ballon_amt,
'payment_mode_enable' => $payment_mode_enable,
'select_theme' => $select_theme,
'regular_repayment_heading' => $regular_repayment_heading
);
wp_localize_script('loan-calculator-frontend-script-' . esc_attr($post_id), 'setting_data', $setting_data);
}
} else {
wp_register_script('loan-calculator-jquery-ui', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', array(), WW_LOAN_CALCULATOR_VERSION, true);
// CHART JS
wp_register_script('loan-calculator-chart-js', WW_LOAN_CALCULATOR_URL . 'includes/js/chart-js/chart.js', array(), WW_LOAN_CALCULATOR_VERSION, true);
// Font awesome
wp_register_style('loan-calculator-font-awesome-script', WW_LOAN_CALCULATOR_URL . 'includes/css/all.min.css', array(), WW_LOAN_CALCULATOR_VERSION);
// Custom CSS and JS
//01/05/23
wp_register_style('loan-calculator-new-theme-style', WW_LOAN_CALCULATOR_URL . '/includes/admin/forms/theme-templates/new-theme/css/style.css', array(), WW_LOAN_CALCULATOR_VERSION);
wp_register_script('loan-calculator-print-script', WW_LOAN_CALCULATOR_URL . 'includes/js/jquery.print.js', array('jquery'), WW_LOAN_CALCULATOR_VERSION, true);
wp_register_style('loan-calculator-frontend-style', WW_LOAN_CALCULATOR_URL . 'includes/css/frontend-style.css', array(), WW_LOAN_CALCULATOR_VERSION);
wp_register_script('loan-calculator-frontend-script', WW_LOAN_CALCULATOR_URL . 'includes/js/frontend-script.js', array('jquery'), WW_LOAN_CALCULATOR_VERSION, true);
wp_register_script('loan-calculator-frequency-payment', WW_LOAN_CALCULATOR_URL . 'includes/js/frequency_payment.js', array('jquery'), WW_LOAN_CALCULATOR_VERSION, true);
// Get setting data for the specific post ID
// Fetch Loan Calculator setting data from option table and pass in script.
$currency_symbols = ww_loan_get_currency_symbol();
$loan_amount_min_value = isset($loan_all_setting_data['loan_amount_min_value']) ? $loan_all_setting_data['loan_amount_min_value'] : "";
$loan_amount_max_value = isset($loan_all_setting_data['loan_amount_max_value']) ? $loan_all_setting_data['loan_amount_max_value'] : "";
$loan_term_min_value = isset($loan_all_setting_data['loan_term_min_value']) ? $loan_all_setting_data['loan_term_min_value'] : "";
$loan_term_max_value = isset($loan_all_setting_data['loan_term_max_value']) ? $loan_all_setting_data['loan_term_max_value'] : "";
$monthly_rate = isset($loan_all_setting_data['monthly_rate']) ? $loan_all_setting_data['monthly_rate'] : "";
$application_fee = isset($loan_all_setting_data['application_fee']) ? $loan_all_setting_data['application_fee'] : "";
$back_ground_color = isset($loan_all_setting_data['back_ground_color']) ? $loan_all_setting_data['back_ground_color'] : "";
$interested_rate = isset($loan_all_setting_data['interested_rate']) ? $loan_all_setting_data['interested_rate'] : "";
$interest_rate_min_value = isset($loan_all_setting_data['interest_rate_min_value']) ? $loan_all_setting_data['interest_rate_min_value'] : "";
$interest_rate_max_value = isset($loan_all_setting_data['interest_rate_max_value']) ? $loan_all_setting_data['interest_rate_max_value'] : "";
$calculation_fee_setting_enable = isset($loan_all_setting_data['calculation_fee_setting_enable']) ? $loan_all_setting_data['calculation_fee_setting_enable'] : "";
$remove_decimal_point = isset($loan_all_setting_data['remove_decimal_point']) ? $loan_all_setting_data['remove_decimal_point'] : "";
$payment_mode_enable = isset($loan_all_setting_data['payment_mode_enable']) ? $loan_all_setting_data['payment_mode_enable'] : "";
$regular_repayment_heading = isset($loan_all_setting_data['regular_repayment_heading']) ? $loan_all_setting_data['regular_repayment_heading'] : "";
$default_balloon_amount = isset($loan_all_setting_data['ballon_per']) ? $loan_all_setting_data['ballon_per'] : "";
$disable_ballon_amt = isset($loan_all_setting_data['disable_ballon_amt']) ? $loan_all_setting_data['disable_ballon_amt'] : "";
$select_theme = isset($loan_all_setting_data['select_theme']) ? $loan_all_setting_data['select_theme'] : "";
$month_label = __('Months', 'loan-calculator-wp');
$year_label = __('Years', 'loan-calculator-wp');
$interest_label = __('Interest', 'loan-calculator-wp');
$principal_label = __('Principal', 'loan-calculator-wp');
// Setting data is passed in js file using Localize
$setting_data = array(
'loan_amount_min_value' => $loan_amount_min_value,
'loan_amount_max_value' => $loan_amount_max_value,
'loan_term_min_value' => $loan_term_min_value,
'loan_term_max_value' => $loan_term_max_value,
'monthly_rate' => $monthly_rate,
'application_fee' => $application_fee,
'back_ground_color' => $back_ground_color,
'interested_rate' => $interested_rate,
'interest_rate_min_value' => $interest_rate_min_value,
'interest_rate_max_value' => $interest_rate_max_value,
'calculation_fee_setting_enable' => $calculation_fee_setting_enable,
'currency_symbols' => $currency_symbols,
'remove_decimal_point' => $remove_decimal_point,
'month_label' => $month_label,
'year_label' => $year_label,
'interest_label' => $interest_label,
'principal_label' => $principal_label,
'default_balloon_amount' => $default_balloon_amount,
'disable_ballon_amt' => $disable_ballon_amt,
'payment_mode_enable' => $payment_mode_enable,
'select_theme' => $select_theme,
'regular_repayment_heading' => $regular_repayment_heading
);
wp_localize_script('loan-calculator-frontend-script', 'setting_data', $setting_data);
}
}
add_action('wp_enqueue_scripts', 'ww_loan_calculator_front_scripts');
this is js enqueque code where i put add_shortcode function
public function ww_loan_calculator_shortcode_fn($atts, $content = null)
{
// Default attributes
$atts = shortcode_atts(
array(
'id' => '',
'title' => '',
),
$atts,
'loan_calculator'
);
// Apply filter on ww_loan_calculator_all_setting_data
$loan_calculator_all_setting_data = get_option("ww_loan_option");
$loan_all_setting_data = apply_filters('ww_loan_calculator_all_setting_data', $loan_calculator_all_setting_data, $atts);
if ($atts['id'] || $atts['title']) {
$select_theme = isset($loan_all_setting_data['select_theme']) ? $loan_all_setting_data['select_theme'] : "";
// If repayment chat is enabled then only enqueue chart js
if (isset($loan_all_setting_data['enable_repayment_chart']) && $loan_all_setting_data['enable_repayment_chart'] == 1) {
// Chart JS
wp_enqueue_script('loan-calculator-jquery-ui-' . esc_attr($atts['id']));
wp_enqueue_script('loan-calculator-chart-js-' . esc_attr($atts['id']));
}
$disable_font_awesome = isset($loan_all_setting_data['disable_font_awesome']) ? $loan_all_setting_data['disable_font_awesome'] : "";
// If Disable font awesome is disable then only enqueue font awesome CSS
if (empty($disable_font_awesome)) {
// Font Awesome
wp_enqueue_style('loan-calculator-font-awesome-script-' . esc_attr($atts['id']));
}
// Custom JS
wp_enqueue_script('loan-calculator-frontend-script-' . esc_attr($atts['id']));
// wp_add_inline_script('loan-calculator-frontend-script');
wp_enqueue_script('loan-calculator-frequency-payment-' . esc_attr($atts['id']));
wp_enqueue_script('loan-calculator-print-script-' . esc_attr($atts['id']));
// Output content based on the theme
$html = '';
if ($select_theme == 'new_theme') {
ob_start();
wp_enqueue_style('loan-calculator-new-theme-style-' . esc_attr($atts['id']));
include(WW_LOAN_CALCULATOR_ADMIN . '/forms/theme-templates/new-theme/ww-loan-calculator-loan-new-theme-form.php');
$html .= ob_get_clean();
} else {
ob_start();
wp_enqueue_style('loan-calculator-frontend-style-' . esc_attr($atts['id'])); // Add this line to enqueue the frontend style
include(WW_LOAN_CALCULATOR_ADMIN . '/forms/theme-templates/default-theme/ww-loan-calculator-loan-default-theme-form.php');
$html .= ob_get_clean();
}
} else {
$select_theme = isset($loan_all_setting_data['select_theme']) ? $loan_all_setting_data['select_theme'] : "";
// If repayment chat is enabled then only enqueue chart js
if (isset($loan_all_setting_data['enable_repayment_chart']) && $loan_all_setting_data['enable_repayment_chart'] == 1) {
// Chart JS
wp_enqueue_script('loan-calculator-jquery-ui');
wp_enqueue_script('loan-calculator-chart-js');
}
$disable_font_awesome = isset($loan_all_setting_data['disable_font_awesome']) ? $loan_all_setting_data['disable_font_awesome'] : "";
// If Disable font awesome is disable then only enqueue font awesome CSS
if (empty($disable_font_awesome)) {
// Font Awesome
wp_enqueue_style('loan-calculator-font-awesome-script');
}
// Custom JS
wp_enqueue_script('loan-calculator-frontend-script');
wp_enqueue_script('loan-calculator-frequency-payment');
wp_enqueue_script('loan-calculator-print-script');
// Output content based on the theme
$html = '';
if ($select_theme == 'new_theme') {
ob_start();
wp_enqueue_style('loan-calculator-new-theme-style');
include(WW_LOAN_CALCULATOR_ADMIN . '/forms/theme-templates/new-theme/ww-loan-calculator-loan-new-theme-form.php');
$html=ob_get_contents();
$html .= ob_get_clean();
} else {
ob_start();
wp_enqueue_style('loan-calculator-frontend-style'); // Add this line to enqueue the frontend style
include(WW_LOAN_CALCULATOR_ADMIN . '/forms/theme-templates/default-theme/ww-loan-calculator-loan-default-theme-form.php');
$html=ob_get_contents();
$html .= ob_get_clean();
}
}
// Close the main container div
return $html;
}
// Add Calculator Shortcode
add_shortcode('loan_calculator','ww_loan_calculator_shortcode_fn');
shortcode add in page :
output:
