Big Cartel - Alle Optionen ausblenden, wenn eine Option nicht vorrätig ist

Question

Ich versuche ein Argument zu formulieren, bei dem, wenn eine Produktoption auf einer Produktseite ausverkauft ist, die Schaltfläche "Hinzufügen zum Warenkorb" und das Drop-down-Menü nicht angezeigt wird und das ausverkaufte div wird stattdessen angezeigt. Wenn es keine Optionen gibt, wird die Schaltfläche "In den Warenkorb" angezeigt, wenn das Produkt vorrätig ist, aber ich kann es nicht richtig zum Laufen bringen.

Ich fühle mich wie ich bin sehr nahe. Ich habe es geschafft, es funktioniert, wenn das Produkt keine Optionen hat, dann zeigt es die Schaltfläche zu Karte hinzufügen, wenn das Produkt aus irgendwelchen Optionen verkauft wird, zeigt es "Verkauft", aber wenn alle Optionen auf Lager sind, zeigt es die Optionen Selektor und fügen Sie so oft den Warenkorb Knopf, da es Optionen sind (Bsp: wenn Produkt 2 Möglichkeiten hat, wird Seite zeigen:

Option Selektor
in den Warenkorb Button
Option Selector
in den Warenkorb Button)

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

Ich würde etwas wie das folgende versuchen. Ich habe nicht getestet, um sicherzustellen, dass die has_default_option Bedingung richtig eingerichtet ist, aber das ist nur, um die Idee der Verwendung einer Variablenzuweisung (inStock), um die Aktie zu verfolgen.

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