Solved

Intercept Add to cart functionality

Alejandrouda
Shopify Partner
6 0 4

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!

Accepted Solution (1)
yashgarg
Shopify Partner
102 26 32

This is an accepted solution.

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com

View solution in original post

Replies 6 (6)

yashgarg
Shopify Partner
102 26 32

Hey @Alejandrouda ,

 

Did you try removing form attribute from the button ?

 

Thanks

Yash Garg

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
yashgarg
Shopify Partner
102 26 32

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
Alejandrouda
Shopify Partner
6 0 4

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.

Screenshot 2024-01-15 at 13.07.41.png

 

yashgarg
Shopify Partner
102 26 32

This is an accepted solution.

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
Alejandrouda
Shopify Partner
6 0 4

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
Shopify Partner
102 26 32

Glad to help 🙂

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com