Home Shopify Shopify Add to Cart Product with Ajax working example

Shopify Add to Cart Product with Ajax working example

by therichpost
0 comment
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.

Live Demo
Shopify Add to Cart Product with Ajax working example
Shopify Add to Cart Product with Ajax working example

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

  1. Shopify

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.