求助：Shopify cart/add.js API在Firefox中无alert实现商品加购

Let's fix this cross-browser issue once and for all—no more browser checks or annoying alerts. The root problems with your current code are:

• You're only serializing the single #raffle_variant input, so the /cart/add.js request is missing the required quantity parameter (Firefox is stricter about incomplete request data than Chrome).
• The alert was acting as a hacky way to block the thread and ensure the request finished in Firefox, which isn't reliable or user-friendly.

Here's the cleaned-up, cross-browser compatible code that uses Shopify's recommended API approach everywhere:

Updated jQuery Code #

$('#add_raffle').click(function(event){
  event.preventDefault(); // Prevent any unintended default button behavior
  
  // Serialize the entire form to capture both variant ID and quantity
  const formData = $('#raffle_prod').serialize();
  
  // Use Shopify's cart/add.js API with proper success/failure handling
  $.post('/cart/add.js', formData)
    .done(function(cartResponse) {
      // Success: Update your UI instead of using an alert
      console.log('Raffle tickets added to cart!', cartResponse);
      // Example: Update a cart count badge on your site
      // const currentCount = parseInt($('.cart-quantity').text() || 0);
      // $('.cart-quantity').text(currentCount + 1);
    })
    .fail(function(error) {
      // Failure: Log or display an error message
      console.error('Failed to add item:', error.responseText);
      // Example: Show a subtle error toast to the user
      // $('.error-message').text('Oops, couldn\'t add tickets to cart. Please try again.').show();
    });
});

Why This Works #

• No browser checks: Shopify's cart/add.js API is designed to work across all modern browsers, including Firefox. We don't need to hack around with form submissions anymore.
• Full form serialization: By serializing the entire #raffle_prod form, we include both the id (variant ID) and quantity parameters that Shopify requires. Your original code was only sending the variant ID, which is why Firefox rejected the request.
• Proper async handling: Instead of relying on an alert to block execution, we use jQuery's .done() and .fail() callbacks to handle success and failure cases gracefully. This lets you update your UI (like a cart count) or show user-friendly messages without interrupting their flow.

Quick Check #

Make sure your form elements are still correctly named (Shopify expects name="id" for the variant ID and name="quantity" for the quantity) — your existing form looks good here, so no changes needed there.

Test this in Firefox, and you'll see the item gets added to the cart without any alerts, just like in Chrome.

内容的提问来源于stack exchange，提问作者SushilkumarSetia