如果条件为真，Shopify 将 class 添加到现有的 class

Question

目前正在处理 shopify 主题，我正试图隐藏产品的已售罄变体。无论是否重要，主题都是声望。

我正在尝试以简单的方式进行操作，因为没有其他可用的变体适合我。如果产品变体数量为 0，我想要做的是将 class 添加到现有 class。

示例：

{% 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 }} 来查看 returns 并且它 returns 0 全部。然后我删除了 {% if variant.inventory_quantity < 1 %} 看看出了什么问题，在我的案例中它返回了所有产品变体数量 014673。

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

如果 variant.inventory_quantity == 0，是否可以将 class 添加到代码之外的列表中？

或者如果禁用选项以完全隐藏列表之类的东西？因为我正在检查变体是否可用：

<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。Link 例如 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>

您不需要正在生成的 select。我们正在使用无线电来传递 name="id" 输入。

请记住，这只有在您只有一个选项时才有效！这意味着如果您有其他选项，它将无法正常工作。

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

如果条件为真，Shopify 将 class 添加到现有的 class

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

liquid

shopify