Best way to add items in a collection on a product page to cart (ajax) with no extra apps

Ryan-50Fish
Visitor
1 0 0

Hey all, I’m pretty new to Shopify dev (but not new to front end development), and have figured out with vue/axios how to add a single product to the cart (Ajax). But the other requirement that this project has is to show three other products, and be able to do the same with them (add to cart in an Ajax fashion, without an app.)

I have the schema set up so that a collection can be shown on a product page template, and I’m getting back all of the data I need for these three products (looping through the collection via liquid) but I can’t seem to figure out the best way to add them to the cart (in an Ajax fashion “cart/add.js” I think is the one I used for the single product) if the button for any specific one is clicked.

The way I’m doing it on the single product is based on the variant/select (there’s a vue method that is getting the ID, and quantity) and that’s fine for one, but I’m trying to figure out how to get that type of functionality for any that are listed from a collection.

This may even be a question of: how to ensure the specific one that is clicked is added to the cart, since if I grab each button of each item (that has the same class) they’re obviously not going to be unique to a vue method…

Also, slightly related–  it doesn’t seem like you can get things like product ID’s from a liquid “product” type block or am I missing something?

Reply 1 (1)

Feli0x
Visitor
1 0 0

I'm looking at the same problem. Ever managed to find a solution?