I'm trying to make an argument where if any product option on a product page is sold out then the add to cart button and the options dropdown isn't shown and the sold out div is shown instead. If there are no options then it will show the add to cart button, if the product is in stock, but I can't quite get it to work.
I feel like I'm really close. I've been able to make it work if the product has no options then it shows the add to card button, if the product is sold out of any options it shows 'Sold', but if all options are in stock it will show the options selector and add to cart button as many times as there are options (Ex: if product has 2 options page will show:
Option selector
Add to Cart Button
Option Selector
Add to Cart 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>
I'd try something like the following. I haven't tested to ensure the has_default_option
conditional is setup properly, but this is just to illustrate the idea of using a variable assignment (inStock
) to track the stock.
{% 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 %}