大卡特尔 - 如果一个选项缺货，则隐藏所有选项

Question

我试图提出一个论点，如果产品页面上的任何产品选项售罄，则不会显示添加到购物车按钮和选项下拉列表，而是显示售罄的div。如果没有选项，那么它将显示添加到购物车按钮，如果产品有库存，但我无法完全让它工作。

我觉得我真的很接近。如果产品没有选项，我已经能够使其工作，然后它会显示添加到卡片按钮，如果产品售罄任何选项，它会显示"已售出"，但如果所有选项都有库存，它将显示选项选择器并多次添加到购物车按钮，只要有选项，它就会多次显示选项（例如：如果产品有 2 个选项，页面将显示：

选项选择器
添加到购物车按钮
选项选择器
添加到购物车按钮）

{% when 'active' %}
<form id="product-form" method="post" action="/cart">
{% for option in product.options %}
{% if product.has_default_option %}
{{ product.option | hidden_option_input }}
<button class="button" id="product-addtocart" name="submit"    
type="submit">Add to cart</button>
{% endif %}
{% if option.sold_out %}
{{ product.option | hidden_option_input }}
    <div class="sold">
      <h4><span>Sold</span></h4>
    </div>
{% endif %}
{% if option.sold_out == false %}
<div id="product-options" class="options">
{{ product.options | options_select }}
</div><br>
<button class="button" id="product-addtocart" name="submit"    
type="submit">Add to cart</button>
{% endif %}
{% endfor %}
{% if product.on_sale %}<div>On Sale</div>{% endif %}   
</form>

Answer 1

我会尝试如下方法。我还没有测试以确保正确设置has_default_option条件，但这只是为了说明使用变量赋值（inStock）来跟踪股票的想法。

{% assign inStock = true %}
{% for option in product.options %}
    {% if option.sold_out %}
        {% assign inStock = false %}
    {% endif %}
{% endfor %}
{% if inStock %}
    <form id="product-form" method="post" action="/cart">
        {% if product.has_default_option %}
            {{ product.option | hidden_option_input }}
        {% else %}
            <div id="product-options" class="options">
                {{ product.options | options_select }}
            </div>
        {% endif %}
        <button class="button" id="product-addtocart" name="submit" type="submit">Add to cart</button>
        {% if product.on_sale %}<div>On Sale</div>{% endif %}
    </form>
{% else %}
    <div class="sold">
        <h4><span>Sold</span></h4>
    </div>
{% endif %}