Problem add to cart

[PeppePro02]

Hello, I'm having a problem with the "Add to Cart" button.
When someone clicks it, it keeps loading or freezes — the item doesn’t get added to the cart.
Customers are not able to complete their purchase.
How can I fix this?

website rdmalta.com

[rajweb]

HEy @PeppePro02 ,

Implement a Custom AJAX "Add to Cart" Function:

<form id="add-to-cart-form">
  <select name="id" id="variant-id">
    <!-- Variant options -->
  </select>
  <input type="number" name="quantity" id="quantity" value="1" min="1" />
  <button type="button" id="add-to-cart-button">Add to Cart</button>
</form>
<div id="cart-feedback" style="display: none;">Product added to cart!</div>

<script>
document.getElementById('add-to-cart-button').addEventListener('click', function () {
  const variantId = document.getElementById('variant-id').value;
  const quantity = document.getElementById('quantity').value;

  fetch('/cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    },
    body: JSON.stringify({ id: variantId, quantity: quantity })
  })
  .then(response => {
    if (!response.ok) throw new Error('Failed to add to cart');
    return response.json();
  })
  .then(data => {
    document.getElementById('cart-feedback').style.display = 'block';
    setTimeout(() => {
      document.getElementById('cart-feedback').style.display = 'none';
    }, 3000);
  })
  .catch(error => {
    console.error('Error adding product to cart:', error);
  });
});
</script>

This script uses Shopify's AJAX API to add products to the cart without reloading the page .

If the issue still persists, please feel free to share your store’s collaborator code — I’d be happy to take a look and help fix it for you.
Don’t hesitate to reach out anytime. Thanks!

Best Regards,

Rajat

Shopify Expert

[PeppePro02]

Thank you for the reply. Where exactly should I paste this code, please?

or i can share my collaborator code and you have a look for it pls

[rajweb · Accepted solution]

You can paste the AJAX script inside your product form file. Usually, this is found under Online Store > Themes > Edit code in one of these files:

- sections/product-template.liquid

- snippets/product-form.liquid

- templates/product.liquid

If you want, I can guide you to locate the exact file in your theme to add this code safely.Please feel free to reach out thanks.

[PeppePro02]

Hi sir i don t manage to fix it could you help me direct on the website?

[rajweb]

Yes, please feel free to reach out to me — thanks! You can contact me via email.

[Dan-From-Ryviu]

Hi @PeppePro02 

Have you installed any new apps and then encountered this issue? Or did you change something in your theme's code?