Shopify добавление класса в существующий класс, если условие истинно

Question

В данный момент работаю над темой shopify и пытаюсь скрыть распроданные варианты товара. Тема престижна, имеет ли это значение или нет.

Я пытаюсь сделать это простым способом, так как у меня нет других доступных вариантов. Я пытаюсь добавить класс к существующему классу, если количество вариантов продукта равно 0.

Пример:

{% for variant in product.variants %}
{% if variant.inventory_quantity == 0 %}class{% endif %}{% endfor %}

Как выглядит мой код:

{%- 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 -%}

Я использовал {{option.inventory_quantity}}, чтобы увидеть, что возвращается, и он возвращает 0 для всех. Затем я удалил {% if option.inventory_quantity <1%}, чтобы увидеть, что не так, и он вернул все количество вариантов продукта в моем случае 014673. </p>

Из-за значения {% - for в option.values ​​-%} он проверяет все сразу и добавляет класс для всего списка, даже если количество вариантов в списке равно 0 или нет.

Есть ли способ добавить этот класс в список вне кода, если option.inventory_quantity == 0?

Или что-то вроде, если опция отключена, чтобы полностью скрыть список? Потому что я проверяю, доступен ли вариант здесь:

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

В моем случае вариант продукта 38 имеет количество 0. Ссылка на пример https://lizzetstore.ro/collections/paltoane/products/palton-asimetric-negru

Answer 1

В этом случае, если вы УВЕРЕНЫ, что будет один вариант, вы можете сделать это.

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

Вам не нужен генерируемый вами выбор. Вместо этого мы используем радио, чтобы пропустить ввод name="id".

Имейте в виду, что это будет работать, только если у вас есть один вариант! Это означает, что если у вас есть дополнительная опция, она не будет работать должным образом.

Но это способ сделать это без использования каких-либо javascript.