Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Created October 23, 2010 22:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save carolineschnapp/642762 to your computer and use it in GitHub Desktop.
Save carolineschnapp/642762 to your computer and use it in GitHub Desktop.
product.liquid that does not show a drop-down when there's only 1 variant in WooStore (plus bug fixes)
<div id="main" class="col-left">
{% include 'breadcrumb-navigation' %}
<div class="fix"></div>
<div id="single-product" class="{{ product.handle }} post type-post">
<div class="col-left">
<a href="{{ product.featured_image | product_img_url: 'grande' }}" rel="{{ product.handle }}" class="preview">
<img src="{{ product.featured_image | product_img_url: 'medium' }}" alt="{{ product.title }}" class="product-image" id="{{ product.variants.first.id }}" />
</a>
{% if product.images.size > 1 %}
<ul class="thumbs">
{% for image in product.images offset:1 %}
<li><a href="{{ image | product_img_url: 'grande' }}" rel="{{ product.handle }}" class="preview"><img src="{{ image | product_img_url: 'thumb'}}" alt="{{product.title | escape }}" /></a></li>
{% endfor %}
</ul>
{% endif %}
</div>
<div id="product" class="col-right">
<h1 class="title">{{ product.title | escape }}</h1>
<span class="vendor">{{ product.vendor }}</span>
<div class="row">
<span id="product-price" class="price">{{ product.variants.first.price | money_with_currency }}</span>
</div>
<div class="row">
<span id="product-stock" class="stock yes">{% if product.variants.first.inventory_management != '' %}{{ product.variants.first.inventory_quantity }} {% endif %}in stock</span>
</div>
<form action="/cart/add" method="post" class="variants" id="product-options">
<div class="row">
<div class="select">{% if product.variants.size == 1 %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />{% else %}
<select id="product-select" name='id'>
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>{% endif %}
<div class="fix"></div>
</div>
</div><!--.row-->
<div class="cart"><input type="submit" name="add" class="button" id="add-to-cart" value="Add to Cart" /></div>
</form>
</div><!--.col-right-->
<br class="fix" />
<div class="entry"> {{ product.description }} </div>
</div><!--#single-product -->
</div><!--#main-->
<div id="sidebar" class="col-right">
<div class="primary">
{% include 'sidebar-cart' %}
<div id="related-collections" class="widget">
<h3>Related Collections</h3>
<ul>
{% for collection in product.collections %}
<li class="cat-item ">{{ collection.title | link_to: collection.url }}</li>
{% endfor %}
</ul>
</div><!--#related-collections-->
<div id="related-tags" class="widget">
{% if product.tags.size > 0 %}
<h3>Related Tags</h3>
<ul>
{% for tag in product.tags %}
<li class="cat-item cat-item-3">
{{ tag | link_to_tag: tag }}
</li>
{% endfor %}
</ul>
{% endif %}
</div><!--#related-tags-->
</div><!--.primary-->
</div><!-- /#sidebar -->
{% unless product.variants.size == 1 %}
<script type="text/javascript">
// <![CDATA[
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
jQuery('#add-to-cart').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
if(variant.inventory_management == '')
{
jQuery('#product-stock').html("in stock");
}
else
{
jQuery('#product-stock').html(variant.inventory_quantity + " in stock");
}
if(variant.compare_at_price == null)
{
jQuery('#product-price').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"));
}
else
{
jQuery('#product-price').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}") + '<span class="compare_at_price"> from <del>' + Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}") + '</del></span>');
}
}
else
{
// variant doesn't exist
jQuery('#add-to-cart').addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
var message = variant ? "Sold Out" : "Unavailable";
jQuery('#product-price').text(message); // update price message
}
};
// initialize multi selector for product
jQuery(function()
{
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
});
// ]]>
</script>
{% endunless %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment