wp_localize_script multiple times from Shortcode

Question

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 = [{...},{...},{...},...];

Well then you must collect that data first, instead of outputting it in the processing of a single shortcode already ... And since you won’t really know at what point you are processing the last such shortcode the page contains, you will then have to output the collected data afterwards. — CBroe, Mar 15 '18 at 11:52
That's on point. I want to have wp_enqueue_script in the shortcode, so I only embed my script file on the pages that actually use it. Then I would need to modify global PHP variable in the shortcode and somehow use it later for wp_localize_script after checking if the script is enqueued. — Nurgiel, Mar 15 '18 at 12:02
If you have the individual shortcode parser function collect the data in an array, then all you have to do at the end is check whether that array contains any entries - if not, then there weren’t any SC of that type on the current page, and therefor you don’t output the script either. — CBroe, Mar 15 '18 at 12:22
Question would be, where to store that data - since each individual call to the shortcode parser, and the function processing it at the end, need be able to access it - so either a global (rather not), or store it into the session maybe. (Then you would need to find one hook that runs very early, to “null” that array in the session first - otherwise you would be schlepping the data from the previous page the user visited along.) — CBroe, Mar 15 '18 at 12:23

score 3 · Accepted Answer · answered Mar 16 '18 at 05:17

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:

score 0 · Answer 2 · answered Apr 27 '22 at 01:32

0

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

answered Apr 27 '22 at 01:32

Mr.Vibe

392
6
14

wp_localize_script multiple times from Shortcode

2 Answers2