Shopify Add to Cart Product with Ajax working example

Hello guys welcome back to my blog therichpost.com. Today in this blog post, I am going to tell you, Shopify Add to Cart Product with Ajax working example.

Guys if you are new in Shopify then please check below link:

1. Shopify

Guys here is the code snippet link and please use it carefully:

1. Guys here is the jQuery code and we need to add this into our global.js file and make sure add to cart button has ID `add-to-cart-form`:

$('#add-to-cart-form').on('submit', function(event) {
  event.preventDefault(); // prevent default form submission
  $.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: $(this).serialize(),
    dataType: 'json',
    success: function() {
      // Do something on success (e.g. show a success message)
      alert("Product added to cart.");
    },
    error: function() {
      // Do something on error (e.g. show an error message)
    }
  });
});

2. Guys for make jquery work we need to add below cdn inti header.liquid file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Guys this is it and if you will have more query then feel free to comment below.

Jassa

Thanks