Extended Logic For Product Page
From Shopify Wiki
Looking for a way to never have a product not available for purchase unless absolutely neccessary, and to give a little more detail into the products availability and handling time, I came up with this logic to represent this information on the product page.
How it works
When setting up variants in the products admin interface, you have an option to track inventory. This is enabled on all of our products. Each product/variant is set to allow people to purchase a product/variant even if the in stock amount reaches zero, or goes into a negative amount.
If for some reason I have to disable the option of purchasing a specific product/variant, I simply set that product/variant to deny purchasing if the product stock total is 0.
Here is a list of the 3 levels of availability that a product can be in with this setup.
- If the variant's stock total is > 0, then it displays that the product/variant is in stock and handling time is next day.
- If the variant's stock total is <= 0, than it shows that the product/variant is on order, and that the handling time is 1 to 2 weeks.
- And finally, if the product is on back order, or if it will take more than 3 weeks to deliver, then I simply switch that product/variants inventory tracking to deny if the stock level is <= 0, and it will not let that person purchase the product and will display that it is back orded.
Added to #3 is a logic switch that will remove the add to cart button if the product is not available, or if all of its variants aren't available. This is so someone doesn't click the add to cart button and gets shown the error page. No reason to show it right?
Here is an example of the code that I use to display these 3 levels of availability on the product page.
<div id="variants">
<form action="/cart/add" method="post">
<table width="100%" border="1" class="variantstable">
<thead>
<tr>
<th>Select</th>
<th>Options</th>
<th>Your Price</th>
<th>Product Availability</th>
<th>Handling time</th>
</tr>
</thead>
<tbody>
{% for variant in product.variants %}
<tr style="background: {% cycle '#fff', '#eee',%};" >
{% if variant.available == true %}
<th><input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" {%if forloop.first%} checked="checked" {%endif%} /></th>
<th><label for="radio_{{variant.id}}">{{ variant.title }}</label></th>
<th>{{ variant.price | money }}</th>
{% if variant.inventory_quantity > 0 %}
<th>In Stock</th>
<th>Ships Next Day</th>
{% else %}
<th>On Order</th>
<th>Ships 1 to 2 weeks</th>
{% endif %}
{% else %}
<th>X</th>
<th>{{ variant.title }}</th>
<th>{{ variant.price | money }}</th>
<th colspan="2">Expected Availability: March 2007</th>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
{% unless product.available == false %}
<div><input type="submit" value="Add to Cart" name="Add" id="add" /></div>
{% endunless %}
</form>
</div>
</div>
Here is an example of what it looks like
If you have any questions on how to implement this type of setup on your own store, you can post your questions in the "Shopify Forums": http://forums.shopify.com/categories/2/posts/6156

