Default Variants, revisited

hana_nell — Sun, 18 Oct 2009 20:21:57 +0000

I really hope someone can help me with this, because I am absolutely stuck and have no other recourse. I am trying to do something fairly simple which has been discussed on the forums before, but the solutions are from several years ago and I suspect Shopify may have changed a bit in the meantime because I cannot get them to work for my store.

I want to hide the 'default' variable drop-down for items that only have one variable. I have items with multiple variables as well, and those should not be affected (i.e. the drop-down should remain for those items.) I am using the prettify template.

Here is the entire code for the product.liquid page:

<div id="product">
  <div id="product-main"> {% for image in product.images %}
    {% if forloop.first %}
    <div id="prod-img"> <img src="{{ image | product_img_url: 'large'}}" alt="{{product.title}}" /> </div>
    {% else %}
    <div class="prod-img-small fl"> <a href="{{ image | product_img_url: 'large' }}" rel="lightbox"> <img src="{{ image | product_img_url: 'small'}}" alt="{{product.title}}" /> </a> </div>
    {% endif %}
    {% endfor %} 
</div>
<div id="variant-add">
  <h2>{{ product.title }}</h2>
</div>
  <div id="description" class="textile"> {{ product.description }} </div>
</div>

  <div id="variant-add">
    <form action="/cart/add" method="post">
    
      <select id="variants" name='id'>
        {% for variant in product.variants %}
          <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
        {% endfor %}
      </select>{% if product.variants.size < 1 %} 
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />{% endif %}
      <div class="addtocart">{% if product.available == false %} <a href="mailto:email@web.org?subject={{ product.title }}"><img src="{{ 'soldout.gif' | asset_url }}" /></a>{% else %}         <input type="submit" name="add" value="Add to Cart" id="add" class="button" style="width:100px" src="asset_url" /> {% endif %} </div>
    </form>
  </div>

      <div id="price-field"></div>



<script type="text/javascript">
// <![CDATA[  
  // prototype callback for multi variants dropdown selector
  var selectCallback = function(variant, selector) {
    if (variant && variant.available == true) {
      // selected a valid variant
      $('add').removeClassName('disabled'); // remove unavailable class from add-to-cart button
      $('add').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').addClassName('disabled');      // set add-to-cart button to unavailable class
      $('add').disabled = true;              // disable add-to-cart button      
      $('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
    }
  };

  // initialize multi selector for product
  Event.observe(document, 'dom:loaded', function() {  
    new Shopify.OptionSelectors("variants", { product: {{ product | json }}, onVariantSelected: selectCallback }); 
  });
// ]]>
</script>

Many thanks in advance!

Caroline Schnapp commented

Caroline Schnapp — Sun, 18 Oct 2009 21:44:09 +0000

Hello Hana,

You are very close.

Starting with the div with id 'variant-add'...

<div id="variant-add">
    <form action="/cart/add" method="post">

    {% if product.variants.size == 1 %}

    <input name="id" value="{{ product.variants.first.id }}" type="hidden" />

    {% else %}
    
      <select id="variants" name='id'>
        {% for variant in product.variants %}
          <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
        {% endfor %}
      </select>

    {% endif %}

      <div class="addtocart">{% if product.available == false %} <a href="mailto:email@web.org?subject={{ product.title }}"><img src="{{ 'soldout.gif' | asset_url }}" /></a>{% else %}         <input type="submit" name="add" value="Add to Cart" id="add" class="button" style="width:100px" src="asset_url" /> {% endif %} </div>
    </form>
  </div>

      {% if product.variants.size == 1 %}

    <div id="price-field">{{ product.price | money_with_currency }}</div>

      {% else %}

   <div id="price-field"></div>

<script type="text/javascript">
// <![CDATA[  
  // prototype callback for multi variants dropdown selector
  var selectCallback = function(variant, selector) {
    if (variant && variant.available == true) {
      // selected a valid variant
      $('add').removeClassName('disabled'); // remove unavailable class from add-to-cart button
      $('add').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').addClassName('disabled');      // set add-to-cart button to unavailable class
      $('add').disabled = true;              // disable add-to-cart button      
      $('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
    }
  };

  // initialize multi selector for product
  Event.observe(document, 'dom:loaded', function() {  
    new Shopify.OptionSelectors("variants", { product: {{ product | json }}, onVariantSelected: selectCallback }); 
  });
// ]]>
</script>

     {% endif %}

Not tested!

hana_nell commented

hana_nell — Tue, 20 Oct 2009 13:28:35 +0000

It works! This calls for celebration. Thank you so, so much!

Caroline Schnapp commented

Caroline Schnapp — Tue, 20 Oct 2009 14:20:23 +0000

Coool. You're welcome!

PeterM commented

PeterM — Sat, 31 Oct 2009 14:39:57 +0000

Most excellent! I also had the same mind-bending issue. This is a superb solution.