Enqueue script multiple times?

Question

I have a script that needs to be enqueued by a shortcode with parameters injected via wp_localize_script. The script is registers in a bootstrapping files then localized and enqueued within the shortcode itself (because it would be too late to register it in the shortcode)..

However, wp_enqueue_script only allows each script to be enqueued once, so if two instances of the shortcode a present then only the version with the last set of parameters actually gets enqueued.

I'd rather not use string replacement and the wp_footer hook to output the script multiple times because it's a bit messy but the real constraint is that the script needs to be enqueued by the shortcode — does anyone know how this can be accomplished?

Answer 1

I'm going to submit an answer for this based on Milo's response above to help anyone finding this in the future. I'm just going to put together some simple examples that hopefully illustrate the point, but this isn't tested code.

In my example I have a shortcode for galleries that accepts a Flickr photoset ID, such as [flickr_gallery photoset_id="12345"]. There can be multiple instances of this gallery on the same page and each one needs to be initialized with a unique ID.

In the PHP where I'm setting up the shortcode I have a global array of gallery IDs - each time the shortcode gets rendered it adds the unique gallery ID to the array. The script then only gets enqueued once and has available an array of gallery IDs we can loop through in the JavaScript.

$gallery_ids = array();

function render_flickr_gallery_shortcode($atts = [], $content = null) {
    // typical shortcode stuff...

    global $gallery_ids;

    $gallery_ids[] = $atts['gallery_id'];

    // localize previously registered script with array of gallery IDs
    wp_localize_script('some-javascript', 'gallery_settings', array(
        'gallery_ids' => $gallery_ids
    ));
    wp_enqueue_script('some-javascript');
}

add_shortcode('flickr_gallery', 'render_flickr_gallery_shortcode');

And then in the JavaScript file being enqueued from the shortcode:

jQuery(document).ready(function($) {
    var options = (typeof gallery_settings !== 'undefined') ? gallery_settings : null;

    if (options && options.gallery_ids.length > 0) {
        for (var i = 0; i < options.gallery_ids.length; i++) {
            var galleryID = options.gallery_ids[i];

            $("#ff-" + galleryID).flexslider({
                animation           : "slide",
                animationLoop       : true,
                controlNav          : false,
                slideshow           : true,
                pauseOnHover        : true,
                smoothHeight        : true
            });
        }
    }
});