localize_script but data changes dependent on product ID

Question

localize_script but data changes dependent on product ID

sico87

2021年7月19日 01:03

I currently have this code in my functions.php file.

$dataToBePassed = array();
add_action( 'wp_enqueue_scripts', function() {
        $handle  = 'three-d-scripts';
        $src     = get_stylesheet_directory_uri() . '/src/scripts/three-d-scripts.js';
        $deps    = [];
        $version = '1.0.0';
        wp_enqueue_script( $handle, $src, $deps, $version, true );
} );
wp_localize_script( 'three-d-scripts', 'php_vars', $dataToBePassed );

What I am wanting to do is change the contents of dataToBePassed dependent on the product ID of the currently view products is this possible?

I have tried,

global $product; $product-get_id();

but this returns NULL as does,

global $post; $post-ID;

What I was hoping to achieve is something this,

global $product;
$product_id = $product-get_id();
$dataToBePassed = array();
add_action( 'wp_enqueue_scripts', function() {
        $handle  = 'three-d-scripts';
        $src     = get_stylesheet_directory_uri() . '/src/scripts/three-d-scripts.js';
        $deps    = [];
        $version = '1.0.0';
        wp_enqueue_script( $handle, $src, $deps, $version, true );
} );
switch($product_id) {
    case 1:
        //do something
    break;
    case 2:
        //do something
    break;
    default:
       //do something
    break;

}
wp_localize_script( 'three-d-scripts', 'php_vars', $dataToBePassed );

Any ideas how I can get the woocommerce product ID so I can switch over it?

Topic woocommerce-offtopic wp-localize-script functions wp-enqueue-script Wordpress

Category Web

Sally CJ · Accepted Answer · 2021年7月19日 01:03

You should call wp_localize_script() in the wp_enqueue_scripts hook (or a later hook) in which you would get the correct product/post data such as ID, and that conditional tags like is_single() would also work as expected.

So you should move all the $product, $product_id, $dataToBePassed and wp_localize_script() parts to inside the wp_enqueue_scripts callback, and then you'd get the correct product/post ID, etc. See an example below, and note that:

is_product() and wc_get_product() are WooCommerce functions, and I used the former because I presumed your script should only be loaded on single product pages? (like one at example.com/product/product-foo/)
Also, just like one should do $post = get_post(), you should also do $product = wc_get_product() to properly get the current product/post object/data.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_three_d_scripts' );
function my_theme_enqueue_three_d_scripts() {
    if ( ! is_product() ) {
        return;
    }

    $handle  = 'three-d-scripts';
    $src     = get_stylesheet_directory_uri() . '/src/scripts/three-d-scripts.js';
    $deps    = array();
    $version = '1.0.0';
    wp_enqueue_script( $handle, $src, $deps, $version, true );

    $product        = wc_get_product();
    $product_id     = $product ? $product->get_id() : 0;
    $dataToBePassed = array();

    switch ( $product_id ) {
        case 1:
            $dataToBePassed = array( 'product_id' => 1 );
            break;

        case 2:
            $dataToBePassed = array( 'product_id' => 2 );
            break;

        default:
            $dataToBePassed = array( 'product_id' => 0 );
            break;
    }

    // PS: Instead of php_vars, use a unique name like my_three_d_vars..
    wp_localize_script( $handle, 'php_vars', $dataToBePassed );
}

localize_script but data changes dependent on product ID

About