0

I've been trying to work with a small plugin and I tried to pass my data to js via wp_localize_script but when I'm doing console.log() inside my js it is returning undefined.

Can anyone tell me what I'm doing wrong here:

$shortcode_data = array();

/*Fetching the plugin directoryt path*/
$dir = plugin_dir_url( __FILE__ );

// Let's create the before after shortcode First
add_shortcode('before_after', function( $atts ) {
    //extracting the shortcode attributes
    global $shortcode_data;
    $shortcode_data = shortcode_atts( array(
        'slide' => 5, // max 7
        'src1_org' => null,
        'src1_new' => null,
        'src2_org' => null,
        'src2_new' => null
    ), $atts );

    extract($shortcode_data);

    //... do my work with the variables

});

//Let's include the CSS & JS scripts
add_action( 'wp_enqueue_scripts', function() {
    global $dir;
    global $shortcode_data;

    /*CSS*/
    wp_enqueue_style( 'custom_style', $dir . 'assets/css/custom.css', null, null );

    /*JS*/
    wp_register_script ('custom_script', $dir . 'assets/js/custom.js');
    wp_localize_script( 'custom_script', 'ismSliderData', $shortcode_data ); // this line supposed to send all of my shortcode variables to the js but it is not doing that
    wp_enqueue_script( 'custom_script', true );
});

Any help will be highly appreciated.

1

As it stands, your shortcode will be executed after wp_enqueue_scripts -- when the post content is output. That's why the data isn't available to your scripts during wp_enqueue_scripts for wp_localize_script.

wp_enqueue_script( string $handle, string $src = false, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

You would;

A) Need to gather your shortcode attributes ahead of time.

B) Put your custom script in the footer and output <script> data during the shortcode's output.

C) Put your custom script in the footer and output inline js during wp_print_footer_scripts. You may need to wrap your custom scripts in closures to execute after localize has been added.

D) Locallize during the shortcode


Here is an example of localizing during the shortcode:

function some_shortcode( $atts )
{
    $data = shortcode_atts(
        array (
            'arrows' => TRUE
        ),
        $atts
    );

    wp_enqueue_script( 'your_script_name' );

    wp_localize_script(
        'your_script_name',
        'yourScriptObject',
        $data
    );

    return 'a string of whatever';
}
  • So, whats the solution then? – iSaumya Aug 14 '16 at 20:12
  • Can you share a small snippet about how you are suggesting me to do that? – iSaumya Aug 14 '16 at 20:14
  • I thought about putting inline js but it doesn't seem a good approach. So if you have any idea about how can I access my shortcode variables in localize script, it would be really help if you could post a small snippet for that. – iSaumya Aug 14 '16 at 20:18
  • Yah! I've taken the exact same option and it worked. thanks. – iSaumya Aug 14 '16 at 20:36
  • I've registered my script inside shortcode too – iSaumya Aug 14 '16 at 20:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.