How to intercept 'Add to cart' functionality in Kings options & variants App?

[Alejandrouda]

Hi there!

I’m trying to intercept the Add to cart functionality on the product page. Thing is, I need to check if the personalisation from the Kings options & variants App have been added, and trigger some functionality depending on that.

The functionality itself is resolved, but I can’t prevent the default behavior when clicking on the add to cart button (adding the products and redirecting)

I investigated for a while, but I couldn’t find the right code to intercept this functionality. I tried doing that on product-form.js, but even though I commented out all the event listeners there, the functionality continued to happen.

At the moment I just hide the original button, and created a ‘fake’ one. Then I manage to click the original button directly on my js logic, but I don’t love this approach.

I would really appreciate if some one could point me on the right direction.

Thank you in advance!

[yashgarg]

Hey @Alejandrouda ,

Did you try removing form attribute from the button ?

Thanks

Yash Garg

[yashgarg]

Hey @Alejandrouda ,

If removing form attribute worked and you were able to intercept the behaviour, please mark it as solution. Otherwise let me know, and I will try to think what else can be done.

Thanks

Yash Garg

[Alejandrouda]

Hi @yashgarg , thanks for looking into this!

The button itself doesn’t have a form attribute. It is wrapped inside a form element though if that’s what you mean.

[yashgarg]

In that case if you dont want to submit the form on button click, you can remove type=“submit” from this button

[Alejandrouda]

This pointed me to the right direction. It seems like there is some App that is already applying some changes on this Add to cart button. That’s why some of my code modifications were not taking effect. Thanks @yashgarg !

[yashgarg]

Glad to help