FROM CACHE - en_header

How to override add to cart action with custom function?

Solved
policenauts
Shopify Partner
195 9 58

Hi all,

I have done some a bit of research and am hoping someone more experienced on this front can provide some guidance - I am hoping to eventually build an app (for multiple stores across multiple themes) that overrides the store's Add to Cart button with my own custom function (using a script tag?). Essentially, I'd like to send an AJAX request to my server to create a new product variant in that moment, and then return that variant ID and add it to the cart instead of the product variant on that page. 

I have found threads on how to use an XHR interceptor to listen for the add to cart action and got that working, but am not sure how to actually override the default. For my basic development store I've started testing with, it's on Debut as the theme. 

Any help would would be appreciated, thanks!

Accepted Solution (1)

Accepted Solutions
JoesIdeas
Shopify Expert
1714 148 442

This is an accepted solution.

I usually use javascript and set an event listener on the add to cart button, then preventDefault() on click then execute the code you want to run.

• Creator of Order Automator (app to save time + automate tasks, monitor orders, tag, fulfill, FBA)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people

View solution in original post

Reply 1 (1)
JoesIdeas
Shopify Expert
1714 148 442

This is an accepted solution.

I usually use javascript and set an event listener on the add to cart button, then preventDefault() on click then execute the code you want to run.

• Creator of Order Automator (app to save time + automate tasks, monitor orders, tag, fulfill, FBA)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people