carolineschnapp
10/23/2010 - 10:09 PM

product.liquid that does not show a drop-down when there's only 1 variant in WooStore (plus bug fixes)

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