Loading product variations using ajax
-
Is it possible to upload product variations via AJAX? I’d like to avoid having all the JSON output in the “variations_form” attributes, as this significantly increases the HTML size. The JSON alone in this form adds over 200 kilobytes, which is very significant.
Hello,
Please go to Theme Settings >> Shop >> Variable Products >> and set the value of the AJAX variation threshold option: https://ibb.co/tZ2czkj as “1”, then check back the result.
Basically, that option works as (If you want to use Ajax after 5 products, you have to set the value as 5 in the AJAX variation threshold). So once you set the value as “1,” you will be able to use Ajax for all of your products.
Best Regards,
Got it, thanks.
Could you please help? I see a variable called “$available_variations” in the “woocommerce/single-product/add-to-cart/variable.php” file? How do I generate it inside the AJAX handler? I can’t find the code to get this array.
Hello,
The $available_variations variable is generated by WooCommerce for variable products and passed to the template file through WooCommerce’s internal functionality.
If you need to retrieve the$available_variations data manually, you can get it using:
$product->get_available_variations();
Best Regards,
Great, thanks! I’m getting the required JSON via AJAX and pasting it into the form attribute.
But the form doesn’t respond to clicks, meaning the price and product number don’t change.
I tried adding the following lines after pasting the JSON:
$('.variations_form').wc_variation_form();
$('.variations_form').trigger('wc_variation_form');
$('.variations_form').wc_variation_form().find('.variations select:eq(0)').trigger('change');
$('.variations_form').find('select').change();
This didn’t bring any positive results, maybe I missed something?
Hello,
Unfortunately, code customization is not included in support.
You can review how the variation form works at the code level using the following link:
https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/client/legacy/js/frontend/add-to-cart-variation.js
Best Regards,
.
