Global Liquid Snippet - multiple options jquery

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

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

{% include 'multiple_options_jquery' %}

Return to Using Global Liquid snippets

Included code:

<script defer="defer" type="text/javascript">
//<![CDATA[
  // jQuery 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').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
      if (variant.price < variant.compare_at_price) {
        $('#price-field').html(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').html(MultipleOptions.formatMoney(price, "Price: {{shop.money_with_currency_format}}")); // update price field
      }
    } else {
      // variant doesn't exist
      $('#cart-add').addClass('disabled').attr('disabled', 'disabled');      // set add-to-cart button to unavailable class and disable button
      var message = variant ? "Sold Out" : "Unavailable";    
      $('#price-field').text(message); // update price-field message
    }
  };
  
  // initialize multi selector for product
  jQuery(function() {
    new MultipleOptions.Selectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
  });
// ]]>
</script>