Products with multiple variants about shopify-theme-framework HOT 10 CLOSED

          {%  if product.variants.size > 1  %}     
          <form action="/cart/add" method="post">
            <div class="current-price">
              <div class="variant-price price">
                <h5 class="price-field"></h5>
              </div>
            </div>
            <div id="product-variants">
              <select id="product-select" name='id'>
                {% for variant in product.variants %}
                <option value="{{ variant.id }}">{{ variant.title }}</option>
                {% endfor %}
              </select>   
            </div><!-- product variants -->  
                <input type="submit" class="btn addtocart button secondary radius expand" name="add" value="Add to Shopping Cart" id="purchase" />
          </form>


          {% else %}  
          <form action="/cart/add" method="post">
              <div id="product-variants">
            </div><!-- product variants -->  
            <input  type="hidden" id="{{ variant.id }}" name="id" value="{{ product.variants[0].id }}" />
                <div class="current-price">{{ product.price | money_with_currency }}</div>
                <input type="submit" class="large button main" name="add" value="Add to Shopping Cart" id="purchase" />
          </form>
          {% endif %}


          {% else %}
          <p><strong>This product is temporarily unavailable</strong></p>
          {% endif %}

var selectCallback = function(variant, selector) {
  if (variant && variant.available == true) {
    // selected a valid variant
    jQuery('#purchase').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
    jQuery('.price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"));  // update price field
  } else {
    // variant doesn't exist
    jQuery('#purchase').addClass('disabled').attr('disabled', 'disabled');      // set add-to-cart button to unavailable class and disable button
    var message = variant ? "Sold Out" : "Unavailable";    
    jQuery('.price-field').text(message); // update price-field message
  }
};


// initialize multi selector for product      
jQuery(document).ready(function() {
  new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
   {% assign found_one_in_stock = false %}
  {% for variant in product.variants %}
    {% if variant.available and found_one_in_stock == false %}
      {% assign found_one_in_stock = true %}
      {% for option in product.options %}
        jQuery('.single-option-selector:eq(' + {{ forloop.index0 }} + ')').val({{ variant.options[forloop.index0] | json }}).trigger('change');
      {% endfor %}
    {% endif %}
  {% endfor %}
  $('#product-variants div').addClass("selector-wrapper");
  $('#product-variants div label').css("float","left");  
  $('#product-variants div select').css("float","right");
  $('#product-variants div ').addClass("clearfix").css("clear","both");
    {% if product.options.size == 1 %}
        $(".selector-wrapper").prepend("<label>{{ product.options.first}}</label>")
    {% endif %}
});