carolineschnapp
4/8/2010 - 5:55 PM

Product.liquid template that hides the drop-down when there's only 1 variant for Moderno

Product.liquid template that hides the drop-down when there's only 1 variant for Moderno

<div id="product-left">
	<h2>{{ product.title }} by {{ product.vendor }} <span>{{ product.price | money }}</span></h2>
	{{ product.description }}
	<div id="product-select">
		<form action="/cart/add" method="post" name="cartadd">

      {% if product.available %}
  			<div id="product-variants">
  			  
  			{% if product.variants.size == 1 %}
  			
  			<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  			
  			{% else %}
	
          <select id="variant-select" name='id'>
            {% for variant in product.variants %}
              {% if variant.available %}
                <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
              {% else %}
      					<option value="{{ variant.id }}" disabled="disabled">{{ variant.title }} - SOLD OUT</option>
      				{% endif %}
            {% endfor %}
          </select>
          
        {% endif %}
  			</div>      			

  			<span id="price-field">{% if product.variants.size == 1 %}{{ product.price | money_with_currency }}{% endif %}</span><br />

  			<input type="submit" name="add" value="ADD TO CART" id="add-cart">
			{% else %}
			  <h6>TEMPORARILY UNAVAILABLE</h6>
			{% endif %}
		</form>
	</div>{% if collection %}
	<div id="navigate-collection">
		<ul>{% if collection.previous_product %}
			<li id="back">{{ 'PREV' | link_to: collection.previous_product }} <span>&#124;</span> </li>{% endif %}
			<li><a href="/collections/{{ collection.handle }}">{{ collection.title | upcase }}</a></li>{% if collection.next_product %}
			<li id="forward"> <span>&#124;</span> {{ 'NEXT' | link_to: collection.next_product }}</li>{% endif %}
		</ul>
	</div>{% endif %}
</div>
<div id="product-right">{% for image in product.images limit: 1 %}
	<div id="product-image">
		<img src="{{ image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
	</div>{% endfor %}
	<div id="thumbs">{% for image in product.images %}
		<a href="{{ image | product_img_url: 'grande' }}" rel="lightbox[images]" title="{{ product.title }}"{% if forloop.first %} class="show"{% endif %}>{{ forloop.index }}</a>{% endfor %}
	</div>
</div>

{% unless product.variants.size == 1 %}
<script type="text/javascript">
<!--
  // mootools callback for multi variants dropdown selector
  var selectCallback = function(variant, selector) {
    if (variant && variant.available == true) {
      // selected a valid variant
      $('add-cart').removeClass('disabled'); // remove unavailable class from add-to-cart button
      $('add-cart').disabled = false;           // reenable add-to-cart button
      $('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}");  // update price field
    } else {
      // variant doesn't exist
      $('add-cart').addClass('disabled');      // set add-to-cart button to unavailable class
      $('add-cart').disabled = true;              // disable add-to-cart button      
      $('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
    }
  };

  // initialize multi selector for product
  window.addEvent('domready', function() {
    new Shopify.OptionSelectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback }); 
  });
-->
</script>
{% endunless %}