Global Liquid Snippet - multiple options mootools

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

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

{% include 'multiple_options_mootools' %}

Return to Using Global Liquid snippets

Included code:

<script defer="defer" type="text/javascript">
//<![CDATA[
  // mootools callback for multi variants dropdown selector
  var selectCallback = function(variant, selector, price, compare_at_price) {
    if (variant && variant.available == true) {
      // selected a valid variant
      $('cart-add').removeClass('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').addClass('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
  window.addEvent('domready', function() {
    new MultipleOptions.Selectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
  });
// ]]>
</script>