Size drop down in Collection page

Highlighted
Tourist
10 1 3

Hi,

Thank you for looking at my question. 

What I have working:

1. A dropdown menu for size selction, quantity selection and add to cart on my Collection page.

2. Stopped redirecting to cart when adding an item to the shopping cart.

But I get a dropdown menu for all items on my page, not just items that have product variants. I want to limit the drop down only to be available for items that have sizes in the products Variants. 

I edited the /snippets/product-card-list.liquid code to inlcude 

<form method="post" action="/cart/add">
   <select name="id">
    {% for variant in product.variants %}
     {% if variant.available %}
   <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
    {% else %}
    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
      {% endif %}
     {% endfor %}
    </select>
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
   {% if product.available%}
   <div width="50%"class="product-form__item product-form__item--quantity">
      <label for="Quantity-product-template">Quantity</label>
      <input type="number" id="Quantity-product-template" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*" >
   </div>
  <input type="submit" value="{{ 'products.product.add_to_cart' | t }}" id="add" class="btn add-to-cart" />
   {% else %}
    <input type="submit" value="{{ 'products.product.sold_out' | t }}" id="add" class="btn add-to-cart disabled" disabled="disabled" style="opacity: 1;">
   {% endif %}
</form>

 

I played around with the variables below, but to no avail... Either all drop downs disapear or they don't show any value or they show only SOLD OUT items (Do'h)

{% for opt in product.options_with_values %}
  {% if opt.name == 'Size' %}
    {% for val in opt.values %}

 

0 Likes
Highlighted
Tourist
10 1 3

I figured it out... Here is the code for having items with sizes have a size drop down + quantiy + Add to cart, but any product without a variant (in my case size) have only a quantity + Add to cart selector

Add the following code on the bottom of product-card-list.liquid (or product-card-grid.liquid (depending on which one you are using for your collection page))

If you want to filter on somehting else change this if statement {% if product.variants.size > 1 %}

 

<form method="post" action="/cart/add">
{% if product.variants.size > 1 %}  
 <select name="id">
    {% for variant in product.variants %}
    {% if variant.available %}
   <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
    {% else %}
    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
     {% endif %}
     {% endfor %}
    </select>
{% endif %}
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  {% if product.available%}
  <label for="quantity">Qty: </label>
  <input min="1" type="number" id="quantity" name="quantity" value="1" />
  <style>#quantity { padding:8px; width:70px; border: 1px solid #555; }</style>  
  <input type="submit" value="{{ 'products.product.add_to_cart' | t }}" id="add" class="btn add-to-cart" />
  {% else %}
   <input type="submit" value="{{ 'products.product.sold_out' | t }}" id="add" class="btn add-to-cart disabled" disabled="disabled" style="opacity: 1;">
 {% endif %}
</form>

 

As for not being redirected to the cart when adding an item. Do a google search and you'll find plenty of well documented ways doing that. 

 

 

 

0 Likes
Highlighted
Tourist
15 0 1

Found this today and actually really like it!  But...it is too big.  Anyone know how to reduce the size and put quantity and add to cart on same line?  Plus I get this error when using add to cart.  Any coding guru's?  Capture.JPG

Highlighted
New Member
3 0 0

Did you ever find a fix for that error? Desperately trying to figure out what's causing it!

0 Likes
Highlighted
Tourist
15 0 1

I found a different coding that I use.  Check out my website  www.uptownkidzboutique.ca  and see if this will work for you.

0 Likes
Highlighted
New Member
3 0 0

Thank you so much for getting back to me! I'd love to check out the code you ended up using and seeing if I can implement it! Just basically need one that'll allow a user to select a variant and add it to the cart. 😃

0 Likes
Highlighted
Tourist
15 0 1

Add this to the very end of product-card-grid.liquid (snippets)

<form action="/cart/add" method="post" style="text-align:center;" size="2">
<select name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - Sold Out</option>
{% endif %}
{% endfor %}
</select><br>
<input type="submit" value="Buy now" />
</form>

0 Likes
Highlighted
Tourist
15 0 1

Did it work for you?  It adds and takes you to the cart, but I didn't mind that.  I would like for it to be a bit smaller, but couldn't figure out how to make the form smaller.  If you can figure that out, I would like to know how.  Thanks.

0 Likes
Highlighted
New Member
3 0 0

You're a rockstar - thank you so much! I spliced together your version with my version and it's all working perfectly!

0 Likes
Highlighted
Tourist
15 0 1

your website?  Maybe I would like yours better..lol

 

0 Likes