How to make a second buy/add to cart button

Tourist
17 0 2

I am using the debut shopify theme and I want to know how to add a second buy/add to cart button under the product description.

I have tried but for some reason when I test out the 2nd buy button, it changes the quantity and variation of the product and then says the product is unavailable (but the product is in stock)

So Im sure there is something I am doing wrong in the code somewhere.

Need some help on this little problem.

D.H.C
0 Likes
Highlighted
Astronaut
765 80 153

You have to use Shopify's AJAX API to push an item to the cart.

Give your button, I'd say use a div a class name and give it a data attribute where you'll store the product url:

<div class="new-add-button" data-url="{{ product.utl }}">Add To Cart</div>

then target it with jQuery inside script tags at the bottom:

<script>

$('.new-add-button').on('click', function(){

var url = $(this).data('url');

jQuery.getJSON(url+'.js' function(product){

var product_id = product.variants[0];

jQuery.POST('/cart/add.js', function(){

quantity:1,
id:product_id

})

});

})

</script>

Here's the link to the documentation:

https://help.shopify.com/en/themes/development/getting-started/using-ajax-api

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Expert
187 25 40

Hello,

 

We have created an application that allows you to easily add a second button "add to cart" on the product pages : https://apps.shopify.com/second-add-to-cart-button

0 Likes