Simple theme, add to cart button on collections - show when out of stock

Matthew_Harper1
Excursionist
31 0 15

I recently added an 'add to cat' button for products on collection pages and homepage featured collections - I did this by adding this code to the bottom of product-grid-item.liquid

<div style="text-align: center;">
  <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input  type="hidden" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to basket" class="btn" />
</form> 
  </div>

On product pages, when an item is out of stock, the text on the 'add to cart' button changes to 'sold out' and the button is greyed out - it can't be pressed. Is there any way way I can get the same function to occur on within listings for collections.

Or alternatively, is there a better or easier way to add the 'add to cart' button to products on collection pages or homepage featured collections, that I've missed?

Thank you.

Matthew_Harper1
Excursionist
31 0 15

I solved the issue by replacing the code I had used what I found here:

https://gist.github.com/vosters/0be4a6429fbd89ff4e624d45c2b1518a

Also I wanted customers to be able to stay on the current page after adding an item to the cart, not to be redirected to the cart page. I did that using this:

https://github.com/carolineschnapp/ajaxify-cart

Matt

musicfan88
Tourist
3 0 0

This works great!

The only issue this caused for me is now there is no gap/space between the product description and that Add to Cart button, so it looks a little cluttered/ugly. 

Did you have the same issue? 

0 Likes
musicfan88
Tourist
3 0 0

Nevermind, I just added a line break

0 Likes