woocommerce offtopic - Loading specific ajax from a product

admin管理员组

文章数量:1122832

I'm new to wordpress, and I need some way to define a property in a new product that will then have it load specific javascript code related to that specific type of product. I may need to load a given javascript file for multiple products of a given type that would all have similar product options and field names. But I would like a way that, if I needed to add a new variant of that product type, I only needed to use similar fields/names and then somehow tell it to load the javascript related to manipulating those fields and values.

I'm new to wordpress, and I need some way to define a property in a new product that will then have it load specific javascript code related to that specific type of product. I may need to load a given javascript file for multiple products of a given type that would all have similar product options and field names. But I would like a way that, if I needed to add a new variant of that product type, I only needed to use similar fields/names and then somehow tell it to load the javascript related to manipulating those fields and values.

• woocommerce-offtopic
• javascript
• forms

Share Improve this question edited Jun 3, 2024 at 17:53 vancoder 7,9142727 silver badges3535 bronze badges asked Jun 3, 2024 at 16:56 Scott WoodScott Wood 1122 bronze badges 2

• What you would want to do is add a checkbox to the product post type (assuming you're using WooCommerce) and then on product load, check if that's enabled or not, if it is, load the JS, if it isn't, do nothing. – Tony Djukic Commented Jun 4, 2024 at 20:25
• I found a semi-cludgy way to do it that seems to work. But I wanted it to fire early on rather than further down when the page is more loaded, so you don't quite have an active 'product' (WC_product) object yet. The request string does exist, however, and isProduct() works. – Scott Wood Commented Jun 6, 2024 at 21:00

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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'.

本文标签： woocommerce offtopicLoading specific ajax from a product