ビッグカルテル - 1つのオプションが在庫切れの場合、すべてのオプションを非表示にします

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