Shopify add to cart not working on Safari

Store Design
1

In our project we have a custom product-form page with a custom addToCart function. The addToCart function works correctly on all browsers except Safari. On Safari the following things happen:

  • One selects a number of products and clicks on ‘Add to cart’
  • The user is redirect to https://shopify-url.com/cart/add. We see an error message: ‘Parameter Missing or Invalid: Required parameter missing or invalid: items’.
  • In the console, we see an error: XMLHttpRequest cannot load [https://shopify-url/cart/add.js](https://shopify-url/cart/add.js) due to access control checks.
  • No items are placed in the cart

We’ve checked the following things:

  • There are products send in the call
  • If we do https://shopify-url.com/cart/add.json?quantity=1&id=[product-id] the product is added to the cart (in all browsers, also Safari)

Further information:

We are using ajax to do the call to the Shopify API. The call looks like this, in which ‘data’ is a string (‘quantity=2&id=42454440739058’)

$.ajax({
  type: 'POST',
  url: '/cart/add.js',
  dataType: 'json',
  data: data,
  success: function(){
    location.href="/cart";
  }
});

Since we get the message about ‘access control checks’ and it is browser specific, we believe that it could be a CORS-issue. Does anyone have experience with this issue and can help us with a way to solve it?

2

That’s a pretty standard way of adding to cart in Shopify. There must be something else not quite right in your code – can you share a preview link?

3

Here you can find the preview

4

At the moment I see 2 problems:

  1. Why do you do it with Ajax if you go to cart afterwards anyway?

  2. There is an error in the code which makes it to do 4 ajax calls instead of 2.

Because

$shakeFlavors = $('.diabetix-quantity').children('input');

picks up 4 elements. So third and fourth elements will result in Ajax error. Seems that Safari handles those errors in a different way then other browsers.

You should be able to construct an URL to add to cart and follow this URL with JS, but without Ajax. Check, for example, this thread https://community.shopify.com/c/shopify-design/add-to-cart-link/td-p/197698

But if you’d rather do it with Ajax, check the answer here https://stackoverflow.com/questions/68008766/how-to-add-multiple-products-to-shopify-cart-with-one-button-click or this thread https://community.shopify.com/c/shopify-apis-and-sdks/adding-multiple-variants-to-cart-using-items-array/m-p/637958 - you’d need single Ajax call, not multiple, which simplifies things alot.

5

Hi Tim,

Many thanks for your reply! I’ll take a look at the examples and let you know if they worked.

6

Hi, I implemented some changes with the help of the resources you sent yesterday. However, Safari still gives us issues. When I try to add an item to the cart, the page just refreshes without adding anything to the cart. See the preview of the theme here.

The request to add the products to the cart fails on Safari, but I don’t get any feedback why it fails.

Do you know why this could happen?

7

Not quit sure what’s wrong. Looks like it does not wait for completion in Safari and that’s why it calls error even if it adds to cart.
Can you try with async=false**,** added to Ajax parameters object?

8

Another possibility is that because your button is an actual button element inside the form, clicking this button starts submitting the form and this may also affect your Ajax call. Try changing from button to div/span and see what happens.

9

This worked! Thank you so much