Bug with "Add to Cart" Ajax Button Behaviour

Hello,

I recognized a bug, when using WooCommerce Wishlists instead of the integrated wishlists feature (due to the more extensive possibilities).

When clicking the “Add to wishlist” Button, the product is added to cart, also the animation on the cart button is executed.

Response from the WooCommerce Wishlists support:

This is because that theme is adding the item to the cart via AJAX. It’s the themes fault for being to greedy about button clicks inside of the WooCommerce form element. They need to target the Add to Cart button specifically, but rather they are targeting any button click inside of the form, which is what happens when you click add to wishlist. So, when you try to add to wishlist, the theme incorrectly intercepts that action and adds it to the cart themselves. This is not a fix I can implement from my side of things unfortunately, they need to code things in the theme to accept the fact that there might be more than one button in the product form.

The offending line of code in the theme comes from and is this:

woodmartThemeModule.addToCartAllTypes = function() {
        0 != woodmart_settings.ajax_add_to_cart && woodmartThemeModule.$body.on("submit", "form.cart", function(b) {

Hello,

Thank you for contacting us. We will do our best to resolve this conflict.

The statement from the plugin developer is a bit incorrect. Our theme doesn’t use “button click” events. It uses the “form submit” event since it is a variable product. And it looks like the plugin has its own version of the form submit action. So we have to differentiate somehow standard add to cart form submit and add to wishlist form submit. We think that the plugin shouldn’t override standard WooCommerce form action since it breaks such functionality as custom AJAX add to cart but use their own event for this. Or we need to have some way to recognize this specific form submit action in JS.

Kind Regards

Our theme doesn’t use “button click” events. It uses the “form submit” event since it is a variable product.

But then why does it also respond to the click of this link?
<a rel="nofollow" href="" data-productid="116525" data-listid="session" class="wl-add-to wl-add-to-single wl-add-but button present">

The Wishlists plugin doesn’t only add the main product to the wishlist, but the exact variation that has been selected. Therefore the Wishlists plugin has to know the selected variation attributes.

Hello,

No, it doesn’t respond to this button click. It responds to the form submit event. And it looks like this button invokes the form submit and not simply click. Please, clarify this with the plugin developer.

Kind Regards

Hello,

below the reply from the plugin author, please note in particular the second paragraph, because the problem also affects other plugins that read the product selection fields. It would be really nice to get this worked.

Regarding the theme add to cart problem, they are correct that the extension submits the form itself. We change the action on the form with JavaScript and then submit it so we can capture all the fields that are present on the product page. We basically simulate exactly how the add to cart work but rather than allow WooCommerce to add the item to the cart, we add it to a cart like entity, the list.

The problem is the theme hooks into the form’s submit action. It should really only react to the button click from the add to cart button itself, rather than the form submit. There are other extension which do the same thing as Wishlists, submitting the form on the product page for our own purposes, such as a lot of the request a quote extensions.

My suggestion to them would be to check the form action to make sure it has not been altered by something else going on the site prior to capturing the submit and doing it via AJAX.

Hello,

Plugin developers ask to react on the button click but we also need to grab all the fields. Actually, this form is designed by WooCommerce to perform add to cart action and it is the right way to use it for the add-to-cart AJAX action as we do in our theme. Instead, they should use button click event since they perform their own custom action and it is not actually “add to cart” but “add to wishlist”.

As a workaround, you can disable our theme AJAX add to cart for the single product. But we can’t change this behaviour in our theme, unfortunately.

Kind Regards

[Author]

Posts