Loading specific ajax from a product

I was able to figure out a way to do it by using ‘tags’ on the products. I wanted to do it early in the page loading so I added it to the custom plugin functions.php i created per recommendation of the Storefront theme.

By executing it before other code has loaded, the ‘product’ variable is not yet populated with a WC_Product object yet, but does appear to contain the string from the $REQUEST input.

EDIT: modified to include ‘hack’ for loading javascript in wsform preview

function wsform_preview_scripts($form_id) {
    // hash of product names to use when previewing forms in WS Form editor
    $product_preview = [
            2 => 'product-example'
    ];
    if(array_key_exists($form_id, $product_preview)) {
        load_product_scripts($product_preview[$form_id]);
    }
}

function load_product_scripts(string $product) {

    // retrieve the WC_Product object for the current product (includes tags)
    $product_object = wc_get_products( array('name' => $product) )[0];

    // pointer to a directory containing custom scripts and css
    if(($product_scripts_path = realpath(__DIR__."/products")) && ($product_object instanceof WC_Product)) {

        // get an array of the product tag slugs
        $tagslugs = array_map( function($tag) { return $tag->slug; }, get_the_terms( $product_object->get_id(), 'product_tag' ) );

        foreach($tagslugs as $ts) {
            // load custom styles by tag (if they exist)
            if(file_exists($product_scripts_path . "/" . $ts . ".css")) {
                wp_enqueue_style( 'product-customization-' . $ts, plugins_url( '/products/'.$ts.'.css', __FILE__ ) );
            }

            // load custom scripts by tag (if they exist)
            if(file_exists($product_scripts_path . "/" . $ts . ".js")) {
                wp_enqueue_script( 'product-customization-' . $ts, plugins_url( '/products/'.$ts.'.js', __FILE__ ), array( 'jquery' ) );
            }
        }
    }
}

function theme_add_custom_scripts()
{
    // if this appears to be a product, load custom product scripts
    if (is_product()) {
        global $product;
        load_product_scripts($product);
    } elseif(array_key_exists('wsf_preview_form_id', $_GET)) {
         wsform_preview_scripts($_GET['wsf_preview_form_id']);
    }
}

add_action('wp_enqueue_scripts', 'theme_add_custom_scripts');

So I can add more generic tags like ‘tool’ and have a ‘tool.js’ or a ‘tool.css’ that will have code which runs on all tools, or I can get more specific with tags like ‘hammer’ with a specific ‘hammer.js’.

tech