如果条件为真，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 -%}

我使用 {{variant.inventory_quantity }} 来查看返回的内容，结果全部返回 0。然后我删除了 {% if variant.inventory_quantity

由于 option.values -%} 中的 {%- for value ，它会一次检查所有内容并添加所有列表的类，即使变量库存数量为 0 或不为 0。

如果 variant.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 的方式。