Best Practices for Passing Data from PHP to JavaScript in WooCommerce

In a recent Business Bloomer Club Slack thread, a member asked about the most effective way to pass PHP data to JavaScript, specifically an array of image attachment IDs intended for a lightbox script.

Passing data between PHP and JavaScript can sometimes be tricky, especially when aiming to avoid page reloads or dealing with dynamic content.

WooCommerce provides several methods to streamline this, including wp_localize_script and wc_enqueue_js. Here’s a breakdown of popular approaches and tips for choosing the best method based on your project’s needs.

1. Using wp_localize_script to Pass Data from PHP to JavaScript

One common method for passing data from PHP to JavaScript is to use WordPress’s built-in wp_localize_script function. Originally designed for localization, this function is now commonly used to pass data from PHP to JavaScript by associating it with an enqueued script. Here’s an example of how to use it:

add_action( 'wp_enqueue_scripts', 'enqueue_custom_script' );

function enqueue_custom_script() {
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true );

    $data_array = array( 123, 456, 789 ); // Replace with your dynamic data
    wp_localize_script( 'custom-js', 'myData', array(
        'imageIDs' => $data_array
    ));
}

This code allows you to access myData.imageIDs in your JavaScript file, providing a seamless way to use PHP data without hardcoding it into HTML. wp_localize_script is especially useful when working with large datasets or more complex data structures.

2. Embedding Data as HTML Data Attributes

For smaller or more static datasets, you can pass PHP data to JavaScript through HTML data attributes. This approach embeds the PHP data directly into the HTML, making it easily accessible via JavaScript by targeting the DOM element.

Example:

<?php
$data_array = array( 123, 456, 789 ); // Replace with your dynamic data
echo '<div id="gallery" data-image-ids="' . esc_attr( json_encode( $data_array ) ) . '"></div>';
?>

<script>
const imageIDs = JSON.parse(document.getElementById('gallery').dataset.imageIds);
console.log(imageIDs); // Access your image IDs here
</script>

This method can offer caching benefits and doesn’t require additional enqueuing, but it’s best suited for static data or smaller datasets.

3. Using wc_enqueue_js for WooCommerce-Specific Customizations

For WooCommerce-specific projects, wc_enqueue_js is a valuable tool, allowing you to inject PHP data into JavaScript without registering or enqueueing a new script. You simply echo the PHP variable directly into the JavaScript.

Example:

$data_array = array( 123, 456, 789 ); // Replace with your dynamic data
wc_enqueue_js( "
    var imageIDs = " . json_encode( $data_array ) . ";
    console.log(imageIDs);
");

This method is particularly efficient if you’re making lightweight adjustments to WooCommerce functionality without creating new scripts. It also avoids the need for wp_localize_script when working specifically within WooCommerce.

For a more detailed example, see this guide on AJAX for WooCommerce, which demonstrates wc_enqueue_js in a WooCommerce AJAX setup.

Conclusion

Whether you choose wp_localize_script, HTML data attributes, or WooCommerce’s wc_enqueue_js function, each method has its strengths. For complex or large datasets, wp_localize_script is often best. For simpler, smaller data, HTML attributes can streamline your setup. And for WooCommerce-specific tweaks, wc_enqueue_js allows quick data access without extra scripts.