{% if product.variants.size == 1 %} doesn't work with more than one product option

ToTheMoon
Tourist
9 0 0

Hi everyone,

I'm trying to hide product option if there is only one variant.

 

I tried with this code :

{% if product.variants.size == 1 %}

But it doesn't work when I have two product options. The result of :

{{ product.variants.size }}

is always the size of the second product options.

 

For example if my product has:

  • Color : Red
  • Size : S - M - L

{{ product.variants.size }} for Color display 3 (instead of 1)

{{ product.variants.size }} for Size display 3

 

I use Venture theme and my full code is:

            {% for option in product.options_with_values %}
            --{{product.variants.size}}--
              <div class="selector-wrapper js product-form__item">
                <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
                <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                  id="SingleOptionSelector-{{ forloop.index0 }}"
                  data-name="{{ option.name }}"
                  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 %}

Any idea? Thx

 

Replies 6 (6)

ToTheMoon
Tourist
9 0 0

I did it with jQuery but I would like a better alternative...

 

$(document).ready(function() {
  $("select[id^='SingleOptionSelector-']").each(function () {
      var optionCheckSize = $("option", this).length;
      if(optionCheckSize == 1) {$(this).parent().hide()};
  });
});

 

ToTheMoon
Tourist
9 0 0

Up! 

ToTheMoon
Tourist
9 0 0

Up! Is there a solution to my problem?

 

Thanks

devlb
Tourist
4 0 4

Just a thought.
Wouldn't your total variants be 3 in this case - S,M,L sizes of the Color Red.
If you have 2 Colors - should the total variants be 6.

Try this:

{%- for option in product.options_with_values -%}
{%- if option.values.size == 1 -%}
-- YOUR LOGIC --
myhackinfo
Shopify Partner
3 0 0

use this to get the options size

{{product.options.size}}

mkyigitoglu
Shopify Partner
2 0 0

Hi,
This code gives you a only color variat size. 

-just make sure that your variant name should be "colour" in this case 

{%
- for option in product.options_with_values -%}
       
{%- if option.name == 'colour' -%}   
                 
{{ option.values.size }}

       {%- endif -%}

{%- endfor -%}