Add To Cart function not working on Safari, Firefox

[Christian10X]

Dear community,

We've been having trouble with the add to cart functionality on Safari and Firefox.

In Chrome it works without a problem.
We have custom code on a collection grid / slider with a button to add to the cart right away. the element looks like this:

<a
    class="absolute-atc-enabled"
    href="#"
    type="button"
    name="add"
    data-add-to-cart
    onclick="addCart({{ product.variants.first.id }});"
>
...
</a>

and the function looks like this:

function addCart(id){
  jQuery.post(window.Shopify.routes.root + 'cart/add.js', {
    items: [
      {
        quantity: 1,
        id: id
      }
    ]
  });
  let url = $(location).attr('href');
  if (url.indexOf("?added") >= 0) {
    window.location.href = url;
  } else {
    window.location.href = url+"?added";
  }
}

Funnily enough, in my Shopify dev environment, adding to the cart works on Firefox too. It's just on our live site that we got the issue. I can click on the bag symbol, the cart opens, but the item doesn't get added. No errors in the console or warnings related, as far as I can see.

This is the link: https://eracoffee.com/

Thanks in advance for any hint!

[BSS-Commerce]

Hi @Christian10X 

I think you should using method ajax on jquery . I hope it will helpful for you

function addCart(id) {
  var product = {
    items: [
      {
        quantity: 1,
        id: id
      }
    ]
  };

  $.ajax({
    type: 'POST',
    url: window.Shopify.routes.root + 'cart/add.js',
    data: JSON.stringify(product),
    contentType: 'application/json',
    success: function(response) {
      console.log('Product added to cart:', response);

      // Redirect
      let url = window.location.href;
      if (url.indexOf("?added") >= 0) {
        window.location.href = url;
      } else {
        window.location.href = url + "?added";
      }
    },
    error: function(error) {
      console.error('Error adding product to cart:', error);
    }
  });
}

[Christian10X]

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. 

[BSS-Commerce · Accepted solution]

Hey @Christian10X ,

I double-checked on Firefox and it works. So, you need to pass a function callback that is executed if the request is successful.

function addCart(id){
  jQuery.post('/cart/add.js', {
      items: [{
          quantity: 1,
          id: id
        }]
    }, () => {
      console.log("add to cart success!")
      let url = $(location).attr('href');
      if (url.indexOf("?added") >= 0) {
        window.location.href = url;
      } else {
        window.location.href = url+"?added";
      }
    });
}

[Christian10X]

Awesome, this one worked! Thanks so much