如果条件为true，则Shopify向现有类添加类

目前正在研究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 -%}

{%-for option.values-%}

{{value}}

{%-endfor-%}

我使用{{variant.inventory_quantity}}来查看返回的内容，它返回0表示所有内容。然后我删除了{%if variant.inventory_quantity<1%}以查看出了什么问题，并在我的案例014673中返回了所有产品变量数量

由于option.values-%}中的{%-for value，它会一次检查所有项，并添加类for all列表，即使变量invetory数量是否为0

如果variant.inventory\u 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>

{%-用于product.variants-%}
{{variant.title}}-{{variant.price | money}
{%-endfor-%}

---

在我的情况下，产品变体38的数量为0。链接到示例

在这种情况下，如果您确定将有一个单一的变体，您可以这样做

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

{%-用于product.variants-%}

{{variant.option1}}

{%-endfor-%}

您不需要生成选择。我们使用收音机来传递

name=“id”

输入

请记住，只有当您有一个选项时，这才有效！这意味着，如果您有一个额外的选项，它将无法正常工作

---

但这是一种不使用任何javascript的方法。

当您处理乘法选项（也称为颜色/大小等）时，最好使用JS设置已售出的类。如果不至少依赖一些JS逻辑，仅使用液体几乎是不可能的。因此，当用户选择不同的尺寸/颜色并且该组合可用时，您的逻辑将失败。（除非您为不同的选项组合创建不同标记的多个组合-我不建议这样做）我只有一个变量选项，即大小，我希望在客户希望看到产品且变量的库存为0时实现隐藏，现在，它正在检查变量是否有库存，但当您按下库存为0的变量时，它只会禁用“购买”按钮。我只想把它隐藏起来，根本不想显示出来。我只有一个选择，我不知道如何做到这一点。谢谢！它就像一个符咒，两个小的代码错误，你用了{%endif%}而不是{%end除非%}，我对我的情况做了一些调整，但它像一个符咒一样工作，谢谢！不幸的是@drip我今天在测试我的代码时发现了一个bug，我发现我们编写的代码有一些bug。例如，您选择尺寸变体40，当您将其添加到购物车时，它将添加产品拥有的第一个尺寸变体，而不是变体40，这很奇怪，我不知道这是为什么。@BogdanDutca您删除了选择吗？你只需要单选按钮

name=“id”

其他任何东西都不应该有

name=“id”

{{variant.option1}}我想这就是问题所在{%-对于product.variants中的variant-%}

{%-endfor-%}..我认为{{variant.option1}}是个问题，因为它返回变量的第一个选项的值，我认为这就是为什么总是选择第一个大小的变量