Using Global Liquid Snippets

A library of Liquid snippets is maintained for use in any theme.

The following snippets are available:

• Global Liquid Snippet - multiple_options_prototype
• Global Liquid Snippet - multiple_options_jquery
• Global Liquid Snippet - multiple_options_mootools

multiple_options_prototype

This snippet is used to include the JavaScript code necessary to support multiple options on a product page. This version is used in a Prototype environment.

Include the following code at the end of the product.liquid template.

{% include 'multiple_options_prototype' %}

Included code

<script defer="defer" 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
      $('cart-add').removeClassName('disabled'); // remove unavailable class from add-to-cart button
      $('cart-add').disabled = false;           // reenable add-to-cart button
      if (variant.price < variant.compare_at_price) {
        $('price-field').innerHTML = MultipleOptions.formatMoney(price, "Price: {{shop.money_with_currency_format}}") + '<br/><small>Usually <span class="compare-at-price">' + MultipleOptions.formatMoney(compare_at_price, "{{shop.money_with_currency_format}}</span></small>"); // update price field
      } else {
        $('price-field').innerHTML = MultipleOptions.formatMoney(price, "Price: {{shop.money_with_currency_format}}"); // update price field
      }
    } else {
      // variant doesn't exist
      $('cart-add').addClassName('disabled');     // set add-to-cart button to unavailable class
      $('cart-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 MultipleOptions.Selectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback }); 
  });
// ]]>
</script>