Search code examples
phpreactjswordpresswordpress-shortcode

One WP Plugin shortcode attribute changes properly, the other one sticks to the first-passed value across whole site


This is a Wordpress with PHP/React Plugin.

There are two attributes that are supposed to be given to the plugin via the shortcode: lang and formType. There are multiple instances of the plugin across the site: page 1, page 2, etc.

Say I load page 1, which has the plugin with attributes lang=lang1 and formType=type1. So far, everything works as expected.

I then load page 2, which has the plugin with attributes lang=lang2and formType=type2. On this page, it loads the plugin with the correct language, but it uses formType=type1. This is reflected in the HTML element that the PHP loads the attributes into for the React app to read from.

I tried on a different Wordpress site that uses Autoptimize and Breeze for caching. I clear those caches and try to load page 2 again, and it still uses formType=type1.

If page 2 is loaded first, then page 1 will use formType=type2.

There is also a plugin_name_dev shortcode which is exactly the same except it can be configured to load different .js and .css assets. If, at this stage, I load page 3 with the plugin_name_dev shortcode with lang1 and type1 attributes, it will load properly.

If I then load page 4 with the dev version and attributes lang2 and type2, it will load the plugin with lang2 and type1.

In case it helps, this is what the code of the shortcode looks like:

add_shortcode('plugin_name', function ($atts) {
    $args = shortcode_atts([
        'lang' => 'lang1',
        'formType' => 'type2'
    ], $atts);
    return plugin_name_shortcode($args['lang'], $args['formType']);
});

And this is the code for the plugin_name_shortcode(...):

function plugin_name_shortcode($lang = 'lang1', $formType = 'type2')
{
    $config = load_config();
    $country = detect_country();
    $config['country'] = $country;

    wp_enqueue_style('plugin-name-style');
    wp_enqueue_script('plugin-name-script');
    wp_localize_script(
        'plugin-name-script',
        'businessConfig',
        $config
    );

    return make_plugin_html($lang, $formType);
}

What I've tried

  • Tinkering with .htaccess (the server uses Apache) to not allow caching for .js files and confirmed that the resulting .js file downloaded has "max-age=0".
  • Renaming the formType attribute

Edit: Added info about plugin_name_dev.


Solution

  • In case anyone else runs into something similar, I ended up solving this by changing formType to formtype. The capital T seemed to mess it up.