on line:

error_log("Variation Product", 0);

Nobody else had that?

Not sure – might be conflict with WooCommerce ajax add to cart. The code works for us

Pleasure 😀

Not sure, maybe there is JS conflict or something else. Sorry

I see,
Thanks

What do you mean, we have added this on the page – see under the title “The full javascript code you need to add is:”

Hi,

Can you post again the full javascript code? I mean the final version.

Thanks for the comment, there was an issue ages ago with this post but I sorted it.

Where can you see the text going off the screen?

I think the problem is that we do not know very well where to locate this section or that this section is not doing its job.

$variation_form = $( this ).closest( ‘.variations_form’ );
var product_id = $variation_form.find( ‘input[name=product_id]’ ).val();
var quantity = $variation_form.find( ‘input[name=quantity]’ ).val();
var var_id = $variation_form.find( ‘input[name=variation_id]’ ).val();

Can you say where we should exactly locate it to know if we are implementing it correctly?

Ya I am not sure – if there are no errors then I am not sure. You may need to contact your host and ask for the error log file (or you can find it on your server) – this might tell you what the problem is.

Not trying to sell our plugin but know it works with this so if you use Divi and can utilise the other features I would suggest using this as you know it will work.

no type of error appears, only that the load wheel continues infinitely without adding the product to the cart.

What error are you getting?

Hi Angel

Taken a quick look and seems the issue is here:

[javascript]
var product_id = $(this).parent().find(".product_id").val();
var quantity = $(this).parent().find(".qty").val();
[/javascript]

The issue is that it is looking for a input with the calss product_id and qty inside the parent div. This is not in the modal.

Try adding the html inputs inside the add to cart template inside WooCommerce.

Sorry I cannot be more helpful, this is beyond as you mention but this might help you along your way.

Thanks
Pete

With my setup (https://www.mediatics-desa.com/desa/mako/delivery/) I’m getting a bad 404 request when I open a product in a modal and click the button. On variable products it works just fine, weirdly enough (like with the tee, “camiseta”).

I know this is beyond the scope of this very helpful post but if it doesn’t take more than a minute would you be so kind to check it out? I think this code snippet would be even more useful if it worked with shortcodes.

Thanks and sorry to bother you.

PS: Sorry for not replying to other messages… it doesn’t let me, for some reason.

Thanks, Angel, fixed those syntax errors – sorry – it is not copying across properly.

I am not sure how to get it to work with your setup, it should work as long as the HTML structure is similar which I would imagine it would be. Make sure the button has the class ajax_add_to_cart and you have the right HTML structure so that it can find the quantity and product ID.

Thanks!

By the way, is there any way to make this work with the product shortcode? I’m opening the products in a modal using that but AJAX doesn’t work there (this is the main reason I’m looking to “ajaxify” WooCommerce).

Thanks!

Hey,

there are still some formatting errors in your .js file.

Do I just need to copy the .js file into my assets folder and add your php markup into my functions.php?

Or is there anything else I am missing?

Hi Angel, thanks for letting me know – I have sorted this.

I realised I missed out the $thisbutton declaration – I have added it in the code now, please confirm 😀

Hi Fabian, thanks for letting us know – can you check now?

So there’s some stuff polluted with & and other html encoded artifacts, plus, I’m getting a not defined in the console for $thisbutton (and it’s true, it’s not declared anywhere).

Thanks!

Still formatting errors on this page. Please fix them. Thank you,

Hi André.

I have taken a look and there are a few errors in the code due to the formatting. We are about to launch our new website this week and part of this is we are improving the way we show code snippets, I have updated the code there and is working.

Are you able to wait for the new site this week?

Thanks for this. I am not sure how to get him to remove it. I have messaged him but don’t really know where I stand legally 😀

Appreciate the support!
Pete

Thanks for this, I will check this out! I have changed the code a bit on the plugin so will double check this all.

What do you mean there is a problem if the product is out of stock? Surely if it is out of stock you cant add it to cart?

Thanks for the comment!

And there’s a problem if the product is out of stock

Thanks for the comment. I realised that I left out bits of code on here. I have updated it now.

1) Variation not adding properly – I forgot to add the following:
– the two variables in the js code below line 13 ( I have added line 14 + 15 now)
– Getting the variation values from the post (I have added line 8 + 9) which looks for the variation ID and variation when they add it to cart (post)

2) I have had this issue on localhost before – are you using localhost to test?

3) I am not getting any errors – is it adding but producing an error or is it not working at all?

You can see the code working on our demo site – https://demo-bodycommerce.diviengine.com/product/beach-wear

Thanks again!

Furthermore I seem to have found following errors:

When enqueuing script, you should use “.get_stylesheer_directory_uri() rather than simply get_stylesheet_directory() as this returns a 404 error (in my case at least).
Further, when inserting the hidden inputs you’ve written “$id = $product-<get_id();" which returned an error in my case, and replacing the "-” solved it. Not sure if that’s correct though as i’m not good at php.

In the js file I also got an error at line 36 since copying the JavaScript directly results in two line breaks, splitting it up after the “+ attributeTaxName + ‘” part.

In the PHP part i also got an error as the functions have the same name (2 times “bodycommerce_ajax_add_to_cart_woo_callback”)