How can I enable AJAX for the 'Add to Cart' button on created pages?

Shopify Discussion
1

hello,
I created a page by APP shogun:
https://maoup.myshopify.com/pages/addtocarttestpage
this APP can add “Add to Cart” button,
but it can’t update information until I refresh this page.

my site use AJAX “ADD TO CART”,
but when I tried to add “add to cart” code in this page,
unfortunately, it go to cart page directly (not use AJAX “ADD TO CART” )

how could I use AJAX “ADD TO CART” in some page I created like this?
https://maoup.myshopify.com/pages/addtocarttestpage
I want when I clicked “Add to Cart” button,
it can update information directly.

thank you!

2

Hi, same problem with me. But I fixed using this tutorial: https://support.rechargepayments.com/hc/en-us/articles/360008683774-Adding-an-item-to-the-cart-with-AJAX#:~:text=If%20you%20want%20to%20allow,properties%20to%20the%20Shopify%20cart.

I use Prestige theme and paste this code on the ‘custom.js’ file

$('#add-to-cart-button').click(function(){    
    addItemToCart( ID NUMBER, 1, "1", "Months").    // paste your id product number
  });

  function addItemToCart(variant_id, qty, frequency, unit_type) {
    data = {
      "id": variant_id,
      "quantity": qty
    }
    
    jQuery.ajax({
      type: 'POST',
      url: '/cart/add.js',
      data: data,
      dataType: 'json',
      success: function() { 
        document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
          bubbles: true  //this code is for prestige theme, is to refresh the cart
       }));
      }
    });
    document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
    	bubbles: true    // same code for prestige theme   
 	 }));
  }

you can activate the button with this :

Add to Ajax Cart
4 Likes
3

Can You Please Suggest Me How To Implement This Code To Debutify or Any Other Theme. Or You Could Help In Explaining The Code.

Thank YOu

4

Ok, I don’t know if it works in all themes, but let’s try it.

First, go to Edit code / Assets folder / create a new file called “custom.js”
In that new file paste the javascript that I added on the previous post.

Now, go to Layout folder, select Theme.liquid. Search this tag and before that line of code paste this:

The final step is to create a new link or button on your page. In my case, I added a link inside a snippet file, it was only this code:

Add to cart

Hope this works!

5

I have the same problem using Prestige theme. The problem is caused by the drawer cart that I prefer. I got as far as the shippets. Could you show me how or where to add the links in order for it to work?

6

Hello, I would like to know how I can open the cart sidebar after deploying this code