Passing data from a shortcode to localizescript

[tedgeving]

Hi,

I'm using a similar solution to add a shortcode the boilerplate as found in the following Stackoverflow Question: [(https://stackoverflow.com/questions/40274737/how-to-add-shortcode-in-wppb-plugin-boilerplate)]

I'd like to pass attributes obtained from the shortcode to the default class-name/public/class-name.js file.

The localizescript method is added the enqueue_scripts() method locate in public/classname.php

Where would I define a variable and/or method within the framework to retrieve the information and pass it to the JS file using localizescrtipt?

[adamradocz]

Unless you really want to load your script on all pages, you should only register the script in the public file and enqueue it in the shortcode function. Check the official description.

wp_localize_script is the old-school method to pass data to a script. The new way is to use the wp_add_inline_script function.

Here's a good post about it. https://digwp.com/2019/07/better-inline-script/

[tedgeving]

Unless you really want to load your script on all pages, you should only register the script in the public file and enqueue it

Thanks for the feedback I appreciate it. I was not aware of wp_add_inline_script().

In public/classname.php is the following code:

 public function enqueue_scripts() {
wp_register_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/isotope-grid-public.js', array( 'jquery' ), $this->version, false );
}

public function register_shortcodes() {
add_shortcode( 'shortcode', array( $this, 'shortcode_function') );
}

public function shortcode_function($atts = []){

$translation_array = array(
'some_string' => __( 'Some string to translate', 'plugin-domain' ),
'a_value' => '10'
);

wp_localize_script($this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/isotope-grid-public.js', 'object_name', $translation_array );

wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/isotope-grid-public.js', array( 'jquery' ), $this->version, false );

}

The wp_enqueue_script line prints: <script> var http://fbt.test/wp-content/plugins/isotope-grid/public/js/isotope-grid-public.js = "object_name"; </script> which is incorrect.

I'm guessing I don't understand how to hook that action into the boilerplate correctly. In this context what is the correct way to call wp_enqueue_script() method?

I assume it will work similarly for the wp_add_inline_script().

[adamradocz]

wp_localize_script uses only 3 parameters, not 4.

[adamradocz]

I created a template for you on how to pass data back and forth with wp_add_inline_script.

[tedgeving]

Thankyou, got it sorted out.