'wp_localize_script multiple times from Shortcode

I have a shortcode [tips] in which at the end I'm doing:

wp_enqueue_script( "tips", plugins_url( "/tips/js/tips.js", PATH ), array("jquery"), TIPS_VERSION, true );
wp_localize_script( "tips", "objTips", $objTips );

If there are multiple [tips] shortcodes on the same Page I'd like to pass one objTips object with the $objTips data from all the shortcodes from that Page.

Right now it's outputting var objTips = {...} twice (or more), so JavaScript file tips.js only recognizes the last one. I'd like it to be something like var objTips = [{...},{...},{...},...];



Solution 1:[1]

It's possible to have a static counter inside the shortcode function as shown here: Count how many times shortcode is called and display different content in each « WordPress.org Forums.

The shortcode declaration would add the tips to a JS array:

add_shortcode( 'tips',  function ( $atts, $content = null, $shortcode ) {
    static $count = 0;

    # https://stackoverflow.com/questions/3737139/reference-what-does-this-symbol-mean-in-php
    $return = <<<JS
        <script> 
            objTips[$count] = "$content";
        </script>
JS;
    $count++;
    return $return;
});

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script(  'tips-script', plugin_dir_url( __FILE__ ) . '/tips.js', array( 'jquery' ) );
});

And the enqueued JS file would initialize that array and show the final result on document load:

var objTips = [];

jQuery( document ).ready( function( $ ) { 
    console.log(objTips);
});

A page with multiple shortcodes would look like this:

[tips]one[/tips]

[tips]two[/tips]

[tips]and three[/tips]

Result on browser console:


Solution 2:[2]

Short answer : Yes, multiple localise scripts do work on the same script handle. We are doing it already in our plugin.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 brasofilo
Solution 2 Mr.Vibe