Displaying variants options in collection page shopify

2
votes

I know this question was asked million times on the internet but it seems like everyone wants to have a solution with their own twist. I can't find what I need exactly.

So I used this code to display variants on my collection and then to add to cart.

<form action="/cart/add" method="post" style="text-align:center;">
   
  <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="submit" value="Add to cart" class="btn" />
    
</form>

This works but in the dropdown, it gives it to me like this: 

xs / Black - $72.00     
small / Black - $61.00     
medium / Black - $52.00     
large / Black - $74.00     
xl / Black - $77.00     
xxl / Black - $55.00     
xs / Blue - $72.00    
small / Blue - $72.00     
medium / Blue - $72.00     
xl / Blue - $72.00    
xxl / Blue - $72.00

What I want is for the customer to select size and color separately in different dropdowns and then click add to cart.

I was looking everywhere on how to do this with no luck. Please help. My Shopify theme is Debut if it helps.

2
htmlshopifyliquid

2 Answers

0
votes

You can do something like this:

<form action="/cart/add" method="post" style="text-align:center;">

  <select name="id" id="{{ product.handle }}" style="display: none;">
  {% 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="submit" value="Add to cart" class="btn" />

</form>

And you add the script at the end of the page:

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
    var all_products = { {% for product in collection.products %}'{{ product.handle }}': {{ product | json }},{% endfor %} };
    for(curr_product in all_products){
      new Shopify.OptionSelectors(curr_product, {
        product: all_products[curr_product]
      });
    }
</script>

We are relying on the Shopify function new Shopify.OptionSelectors that will split each select in a separate selects. Don't forget to add the id="{{ product.handle }}" to the main select.

Whole code:

{%- for product in collection.products -%}
    <form action="/cart/add" method="post" style="text-align:center;">

    <select name="id" id="{{ product.handle }}" style="display: none;">
    {% 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="submit" value="Add to cart" class="btn" />

    </form>
{% endfor %}

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
    var all_products = { {% for product in collection.products %}'{{ product.handle }}': {{ product | json }},{% endfor %} };
    for(curr_product in all_products){
      new Shopify.OptionSelectors(curr_product, {
        product: all_products[curr_product]
      });
    }
</script>
0
votes

To obtain it in separate blocks, you must iterate on the product options, which are maximum 3, so you can show size and color separately.

{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" 
{% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
                {{ option.name }}
              </label>
<select style="display:block" class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}