Size drop down in Collection page

Tourist
7 1 1

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
Tourist
7 1 1

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
Tourist
10 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

1 Like