How to add products to checkout using AJAX

yanteb
Shopify Partner
32 0 4

When i click "Add to cart" on my store i know that i can use AJAX to do that by sending a POST request to /cart/add.js and passing the variant id. Is there a similar way to do this when i click "BUY NOW"? (it doesnt add to cart it goes straight to checkout page)

Oto
Shopify Partner
6 2 1

Hello,

 

I believe its Dynamic checkout button, which comes with almost any theme and can be found on Theme > Customize > PRODUCT PAGE.

That button displays either Buy Now, / Buy Now(Paypal),  or  Buy Now (Apple Pay) based on a user's browser/system, etc.. 

In case you want something custom, you can create a new button called Buy Now and Write some JS code.

 

What you need to do with JS

1)send POST request to /cart/clear.js (clear cart, to make sure no other items will be displayed on checkout) 

2)add selected variant to cart (POST request to /cart/add.js) exactly what you have mentioned here. 

3)JS Redirect  to '/checkout'

 

p.s It important to wait for a response and run next function afterward 

0 Likes
yanteb
Shopify Partner
32 0 4

Hi,

 

Thanks for your reply. 

 

What i meant to ask was can i add a product to checkout programmatically the way i can add a product to the cart using AJAX? See below illustrations:

 

Basically on all of my product pages i have some custom HTML that allows customers to purchase an add-on (extended warranty). If they select an option (in this case, 3 year extended warranty has been selected) and click "Add to cart", im making a separate AJAX call to POST /cart/add.js to add the warranty product to the cart along with the hardware item. 

 

11_6_Samsung_Chromebook_Laptop_XE503C12_DailySale.pngYour_Shopping_Cart–_DailySale (1).png

 

 

----->

 

 

 

 

 

 

 

 

The above case im not having trouble with. However when i select an add on and click "Buy with paypal", the add on doesnt get added to the checkout page, only the hardware product does. See below:

 

Information_DailySale_Checkout.png

 

11_6_Samsung_Chromebook_Laptop_XE503C12_DailySale (1).png 

 

 

----->

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

As you can see, when i click add to cart with an add on selected, the add on gets added

to the cart because Shopify offers an AJAX API to add items to cart by posting to

/cart/add.js. My question is does Shopify offer something like /checkout/add.js to add

line items directly to checkout page?       

 

0 Likes
longhairforme
Tourist
5 0 0

were you able to figure anything out? All of my requests keep taking me to the cart page first.

0 Likes