Shopify adding a class to an existing class if condition is true - shopify

Question

Currently working on shopify theme and I'm trying to hide the sold out variants of a product. The theme is prestige if that matters or not.
I'm trying to do it the easy way since no other variants available works for me. What I'm trying to do is to add a class to an existing class if the product variant quantity is 0.
Example:
{% for variant in product.variants %}
{% if variant.inventory_quantity == 0 %}class{% endif %}{% endfor %}
How my code looks:
{%- for value in option.values -%}
<li class="HorizontalList__Item {% for variant in product.variants %}{% if variant.inventory_quantity < 1 %}{{ variant.inventory_quantity}}{% endif %}{% endfor %}">
<input id="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="SizeSwatch__Radio" type="radio" name="option-{{ forloop.parentloop.index0 }}" value="{{ value | escape }}" {% if value == option.selected_value %}checked="checked"{% endif %} data-option-position="{{ option.position }}">
<label for="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="SizeSwatch">{{ value }}</label>
</li>
{%- endfor -%}
I used {{variant.inventory_quantity }} to see what returns and it returns 0 for all. Then I removed {% if variant.inventory_quantity < 1 %} to see what's wrong and it returned all product variant quantity in my case 014673.
Because of the {%- for value in option.values -%} it checks all at once and it adds the class for all list even if the variant invetory quantity it's 0 or not.
Is there a way to append that class to the list outside the code if variant.inventory_quantity == 0?
Or something like if option is disabled to hide the list entirely? Because I'm checking if the variant is available or not here:
<select id="product-select-{{ product.id }}" name="id" title="Variant">
{%- for variant in product.variants -%}
<option {% if variant == selected_variant %}selected="selected"{% endif %} {% unless variant.available %}disabled="disabled"{% endunless %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
{%- endfor -%}
</select>
In my case the product variant 38 has quantity 0. Link to example https://lizzetstore.ro/collections/paltoane/products/palton-asimetric-negru

Answer 1

In that case if you are SURE that there will be a single variant you can do this.
<ul>
{%- for variant in product.variants -%}
<li {% unless variant.available %}class="soldout"{% endunless %}>
<input type="radio" name="id" value="{{variant.id}}" id="variant-{{variant.id}}" {% unless variant.available %} disabled{% endunless %}>
<label for="variant-{{variant.id}}">{{ variant.option1 }}</label>
</li>
{%- endfor -%}
</ul>
You don't need the select that you are generating. We are using the radio instead to pass the name="id" input.
Please have in mind that this will work only if you have a single option! This means that if you have an additional option it will not work properly.
But this is the way to do it without the use of any javascript.