Shopify option_selection.js usage

shopify-use-case-option-selection.html

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

  <script>
    // <![CDATA[
    var selectCallback = function(variant, selector) {
      if (variant) {
        if (variant.available) {
          // Selected a valid variant that is available.
          $('#add-to-cart-button').removeClass('disabled').removeAttr('disabled').html('Add to Cart');
        } else {
          // Variant is sold out.
          $('#add-to-cart-button').html('Sold Out').addClass('disabled').attr('disabled', 'disabled');
        }
        // Whether the variant is in stock or not, we can update the price and compare at price.
        if ( variant.compare_at_price > variant.price ) {
          $('#price-field').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "") +'</span>'+'&nbsp;<s class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "")+ '</s>');
        } else {
          $('#price-field').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "") + '</span>' );
        }
      } else {
        // variant doesn't exist.
        $('#add-to-cart-button').val('Unavailable').addClass('disabled').attr('disabled', 'disabled');
      }
    }
    // initialize multi selector for product
    jQuery(function($) {
      new Shopify.OptionSelectors("variant-selector", { product: {{ product | json }} , onVariantSelected: selectCallback });
    });
    // ]]>
  </script>