Add to Cart Button Collection Page with selected variant

Tourist
10 0 1

Hi all! I am having an issue with out coding. It seems that I cannot figure out how to change the collection page (product-grid-item) to put the selected variant in the cart. I have tried tons of different coding options but it always either selected the first variant or returns an error message. Any help is SUPER greatly appreciated!

 

Link to one of our collection page with add to cart buttons

https://njpetsupply.com/collections/dry-dog-food

 

If you change the variant and hit add to cart it only puts the 1st variant in no matter which one is selected.

 

Here is the coding for that snippet (I know it has to do with the value="{{product.variants.first.id}}" but no matter what I change it to it won't work - I have tried product.variant.selected, product.selectedVariants, product.variants.selected, product.variants.selectedVariant, etc...and numerous other ways but it just doesn't work. Any ideas???

 

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
</form>

 

 

As always, thank you so much for helping! Our theme is a highly customized version of minimals theme.

 

0 Likes
Astronaut
765 80 155

Have you tried {{ product.selected_or_first_available_variant }}?

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
1 Like
Tourist
10 0 1

Nithony,

 

There has got to be something I am missing. I know it has to do with that section of coding...I just tried your suggestion and it comes back with this error, do you have any other ideas??? I totally appreciate your input:

 

Screen Shot 2019-07-16 at 5.54.56 PM.png

0 Likes
Astronaut
765 80 155
I haven't had to use a form to submit data to the cart, usually I use javascript so I'm a little unfamiliar with how that works, but I'm certain I can figure it out. I have your topic bookmarked, when I get into work tomorrow I'll look into it more. If you want to give me your myshopify.com url I can request access to your store to look at your code more closely in the morning.
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
Tourist
10 0 1

Ninthony,

 

Thank you so much for your dedication to the shopify community. After Shopify support said they were unable to help with custom coding, I sat for about 4-5 hours and finally after much testing and playing around with the code, searching support forums, and going back to what I have learned, the project is complete and the buttons are working as they should. It took a little time and a lot of brain fry, but low and behold, the add to cart is working and showing prices for products that are supposed to shown and hidden prices for those that are not allowable.

 

Thank you again, have a very blessed day!

Theresa

The Hungry Puppy / NJ Pet Supply

0 Likes
Highlighted
Astronaut
765 80 155

That's great and I'm glad you got it figured out. If you have time, share what you did so that if someone else is experiencing the same issue they'll be able to save themselves some hair pulling. 

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
Visitor
2 0 0

Theresa, I'm having the exact same issue as you. Could you please provide your solution for others to see? 

 

Thanks

0 Likes