Script works in other browsers but not in Firefox

Question

I am using a script to add products to my cart in my online shop. In other browsers the function works properly but in Firefox the products are never added to the cart and I don't know why.

I have read about something that Firefox doesn't provide a global event object but I don't know how to fix that / where I'd implement the object.

https://mylily.eu/pages/1-box-gratis-im-slipeinlagen-abo

This is one of the product pages from which i want to add the products to the cart by clicking "In den Warenkorb".

Here are some code snippets, the first one is the EventListener which onClick executes the actual addItemToCart function with the values of the variables. The variable amount_slipeinlagen is a global variable that is changeable, the value is the passed on the addItemtoCart function:

<script>
document.getElementById("add-to-cart-button").addEventListener("click", function(){

     addItemToCart(variantid_slipeinlagen, amount_slipeinlagen, frequency_slipeinlagen , "Weeks", "199014")
})
</script>



<script>
function addItemToCart (variant_id, quantity, shipping_interval_frequency, shipping_interval_unit_type, subscription_id) {
  data = {
"quantity": quantity,
"id": variant_id,
"properties[shipping_interval_frequency]": shipping_interval_frequency, 
"properties[shipping_interval_unit_type]": shipping_interval_unit_type,            
"properties[subscription_id]": subscription_id
}
  jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() { 
      window.location.href = '/cart'; 
  }
  });
  window.location = '/checkout';

}

</script>

On Firefox the product is just not added to the cart at all.

Answer 1

The answer can only serve as a guide to the question because it is broad.

Browsers have Javascript environment. Each of them runs specific version of Javascript. These are vendors (Google Chrome, Firefox, Safari, IE). Infact their JS engine adopts separate standards of Ecmascript ( the standard body for Javascript).

It also depends on the version you're running for each browser.

So, it is very much possible that you are using some syntax which is not supported in Firefox's current version.

What you can do is check the console for errors and then slowly narrow down the file or code in which the error is generated. Once you have identified the exact code. Try to test run the code in different browsers.

Tools like Babel enables you to use all latest features without breaking any sweat and transpiles it to a uniform code across all browsers. You do have to configure it though once.

For now, manually replacing the troublesome code should be enough. Probably you're using some recent syntax which this browsers doesn't support. Take the help of pollyfill or replace it with Javascript code version supported by all target browsers your app needs to run.

Hope it helps!

Answer 2

When you do location.href = "/checkout" , you are navigating away from the current page and in the mean time killing the page and all its scripts.
The asynchronous XMLHttpRequest that jQuery.ajax did initiate may very well be also killed by the browser in the process.

Simply getting rid of this line will make your code work in Firefox (tested by pasting this code in the Console):

function addItemToCart(variant_id, quantity, shipping_interval_frequency, shipping_interval_unit_type, subscription_id) {
  data = {
    "quantity": quantity,
    "id": variant_id,
    "properties[shipping_interval_frequency]": shipping_interval_frequency,
    "properties[shipping_interval_unit_type]": shipping_interval_unit_type,
    "properties[subscription_id]": subscription_id
  }
  jQuery.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: data,
    dataType: 'json',
    success: function() {
      // only when we succeed do we redirect
      window.location.href = '/cart';
    }
  });
// do not redirect now

}