Add To Cart function not working on Safari, Firefox

Topic summary

A custom “add to cart” button works in Chrome but fails in Safari and Firefox. The issue occurs only on the live site, not in the Shopify dev environment.

Original Implementation:

  • Used jQuery.post() to call Shopify’s /cart/add.js endpoint
  • Included redirect logic after adding items
  • No console errors visible

Troubleshooting Attempts:

  • Tried $.ajax() with JSON.stringify and proper content-type headers
  • Tested native JavaScript fetch API
  • Both approaches yielded the same result

Key Observation:
After page refresh, the item appears in the cart, suggesting the add request completes but the redirect/callback doesn’t execute properly in Safari/Firefox.

Solution:
Passing a callback function to jQuery.post() that executes on successful request resolved the issue. The working code structure uses a third parameter callback with the redirect logic inside it.

Status: Resolved. The callback approach fixed cross-browser compatibility.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.

Thanks for you reply!

Unfortunately this didn’t do the trick. Same result.

I noticed another thing tho: After a refresh, the item appears in the cart.

I’ve also tried JS native fetch API, which also didn’t yield the needed result.

If anyone else has an idea, please let me know.