product.monogram-with-inventory-on-the-flask.liquid

gistfile1.html

<div class="clearfix" id="product-content" itemscope itemtype="http://schema.org/Product">
  
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
  <meta itemprop="image" content="{{ product.featured_image.src | product_img_url: 'grande' }}" />
  
  <form action="/cart/add" method="post" enctype="multipart/form-data">
    
    <ul id="product-details">
      
      <li id="product-title">
        <h1 itemprop="name">{{ product.title }}</h1>
        {% if settings.show_vendor %}
        {% assign product_vendor_handle = product.vendor | handle %}
        {% if collections[product_vendor_handle].handle == product_vendor_handle %}
          {% assign vendor_url = collections[product_vendor_handle].url %}
        {% else %}
          {% assign vendor_url = product.vendor | url_for_vendor %}
        {% endif %}
        <h2 itemprop="brand">{{ product.vendor | link_to: vendor_url }}</h2>
        {% endif %}
      </li>
      
      {% if settings.prod_desc_placement == 'above' %}
      <li id="product-description" class="above">
        {% comment %}<h2>Description</h2>{% endcomment %}
        <div id="full_description" class="rte" itemprop="description">
          {{ product.description }}
        </div><!-- #full_description rte -->
      </li>
      {% endif %}
      
      <li id="product-prices" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
        {% if product.available %}
        <link itemprop="availability" href="http://schema.org/InStock" />
        {% else %}
        <link itemprop="availability" href="http://schema.org/OutOfStock" />
        {% endif %}
        <p id="product-price" class="smooth">
          {% if product.compare_at_price > product.price %}
          <span class="product-price on-sale" itemprop="price">{{ product.price | money }}</span>&nbsp;<span class="product-compare-price">{{ product.compare_at_price_max | money }}</span>
          {% else %}
          <span class="product-price" itemprop="price">{{ product.price | money }}</span>
          {% endif %}
        </p>
      </li>
       
      {% if product.available %}
        {% if product.variants.size > 1 %}
          <li id="product-variants" class="clearfix">
            <select id="product-select" name="id[]" class="hidden">
              {% for variant in product.variants %}
              <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
              {% endfor %}
            </select>
            {% if settings.show_qty %}
            {% include 'snippet-quantity' %}
            {% endif %}
          </li>
        {% else %}
          <input type="hidden" name="id" value="{{ product.variants.first.id }}" />       
          {% if settings.show_qty %}
          <li id="product-variants" class="clearfix">
            {% include 'snippet-quantity' %}
          </li>
          {% endif %}
        {% endif %}
        
        {% comment %}
        Additional form fields to customize your product.
        Example code below for every type of form fields.
        Use any form field, and as many as you need.
        {% endcomment %}

        <li id="properties">
          <div class="property-wrapper">
            <input class="checkbox" type="checkbox" id="fourth-property" name="id[]" value="{{ product.variants.last.id }}" />
            <label for="fourth-property">Add monogram for {{ product.variants.last.price | money }}</label>
          </div>
          <div class="property-wrapper hidden" id="monogram-wrapper">
            <label for="third-property">Monogram</label>
            <input class="text" type="text" id="third-property" name="properties[Monogram]" value="" disabled="disabled" />
          </div>
        </li>
        
        <script>
        jQuery('#fourth-property').change(function() {
          if (jQuery(this).is(':checked')) {
            jQuery('#monogram-wrapper').removeClass("hidden").fadeTo(200,1);
            jQuery('#monogram-wrapper input').removeAttr('disabled').removeClass('disabled');
          }
          else {
            jQuery('#monogram-wrapper').fadeTo(200,0).addClass("hidden");
            jQuery('#monogram-wrapper input').addClass('disabled').attr('disabled', 'disabled'); 
          }
        });
        </script>
             
        {% assign is_backordered = false %}
        {% if product.variants.size == 1 %}
          {% assign variant = product.variants.first %}
          {% if variant.available and variant.inventory_management != blank and variant.inventory_quantity <= 0 %}
            {% assign is_backordered = true %}
          {% endif %}
        {% endif %}
        <li id="backorder"{% unless is_backordered %} class="hidden"{% endunless %}>
          <p>{{ settings.back_order_msg | replace: '%s', '<span id="selected-variant"></span>' }}</p>
        </li>
        
        <li id="product-add">
          <div id="product-add-wrap">
            <div id="product-add-medallion" class=""></div><!-- #product-add-medallion -->
            <input type="submit" name="add" id="add" value="Add to cart" class="smooth">
          </div><!-- #product-add-wrap -->
        </li>
              
      {% else %}
           
      <li id="product-add">
        <div id="product-add-wrap">
          <div id="product-add-medallion" class=""></div><!-- #product-add-medallion -->
          <input type="submit" name="add" class="disabled" disabled="disabled" id="add" value="Sold Out" class="smooth">
        </div><!-- #product-add-wrap -->
      </li>
           
      {% endif %}
      
      {% if collection %}
        {% if collection.previous_product or collection.next_product %}
        <li class="accent-text prev-next clearfix">     
        {% if collection.previous_product %}
          {% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
          <span class="left">{{ '&larr; Previous Product' | link_to: prev_url }}</span>
        {% endif %}
        {% if collection.next_product %}
          {% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
          <span class="right">{{ 'Next Product &rarr;' | link_to: next_url }}</span>
        {% endif %}
        </li>
        {% endif %}
      {% endif %}
      
      {% if settings.prod_desc_placement == 'below' %}
      <li id="product-description" class="below">
        <h2>Description</h2>
        <div id="full_description" class="rte" itemprop="description">
          {{ product.description }}
        </div><!-- #full_description rte -->
      </li>
      {% endif %}
      
      {% if settings.prod_desc_placement == 'bottom' %}
      <li id="product-share">
        {% include 'snippet-product-share' %}
      </li><!-- #product-share -->
      {% endif %}
      
    </ul><!-- #product-description -->
    
  </form>
  
  <div id="product-photos">
  
  {% if product.images.size == 0 %}
  
    <div id="product-photo-container">
      <img src="{{ '' | product_img_url: 'grande' }}" alt="" />
    </div><!-- #product-photo-container -->
    
  {% else %}
    
    <div id="product-photo-container">
      {% for image in product.images %}
      <a class="gallery" href="{{ image.src | product_img_url: 'original' }}" rel="gallery">
        <img src="{{ image.src | product_img_url: 'grande' }}" alt="{{ image.alt | escape }}" />
      </a>
      {% endfor %}
    </div><!-- #product-photo-container -->

    {% if product.images.size > 1 %}
    <ul id="product-photo-thumbs" class="clearfix">
      {% for image in product.images %}
      <li class="product-photo-thumb">
        <img src="{{ image.src | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}" />
      </li>
      {% endfor %}
    </ul>
    {% endif %}
    
  {% endif %}

    {% unless settings.prod_desc_placement == 'bottom' %}
    <div id="product-share">
      {% include 'snippet-product-share' %}
    </div>
    {% endunless %}

  </div><!-- #product-photos -->
  
  {% if settings.prod_desc_placement == 'bottom' %}
  <div id="product-description" class="bottom">
    <h2>Description</h2>
    <div id="full_description" class="rte" itemprop="description">
      {{ product.description }}
    </div><!-- #full_description rte -->
  </div>
  {% endif %}
  
  {% comment %}
  <div class="gvproduct" style="clear:both; padding-top:25px" data-id="{{ product.id}}"></div>
  {% endcomment %}
        

</div><!-- #product-content -->

{% include 'snippet-related-products' %}
{% include 'snippet-breadcrumbs' %}

<script>
jQuery(function() {

  // OPTION SELECT
  {% if product.variants.size > 1 %}
  
  {% assign look_for_image_match = false %}
  {% assign option_index = 0 %}
  {% for option in product.options %}
    {% assign downcased_option = option | downcase %}
    {% if downcased_option contains 'color' or downcased_option contains 'colour' or downcased_option contains 'style' %}
      {% assign look_for_image_match = true %}
      {% assign option_index = forloop.index0 %}
    {% endif %}
  {% endfor %} 
  Shopify.doNotTriggerClickOnThumb = false;
  
  var selectCallback = function(variant, selector) {

    if (variant && variant.available) {
      // selected a valid variant that is available.
      jQuery('#add').removeClass('disabled').removeAttr('disabled').val('Add to Cart').fadeTo(200,1); // remove unavailable class from add-to-cart button, and re-enable button
      
      // if item is backordered yet can still be ordered, we'll show special message.
      if (variant.inventory_management && variant.inventory_quantity <= 0) {
        jQuery('#selected-variant').html({{ product.title | json }} + ' - ' + variant.title);
        jQuery('#backorder').removeClass("hidden").fadeTo(200,1);
      } else {
        jQuery('#backorder').fadeTo(200,0).addClass("hidden");
      }

      if ( variant.compare_at_price > variant.price ) {
        jQuery('#product-price').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") +'</span>'+'&nbsp;<span class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}")+ '</span>');  // update price field
      } else {
        jQuery('#product-price').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>' );  // update price field
      }
      
      {% if settings.show_multiple_currencies %}
      Currency.convertAll(shopCurrency, jQuery('[name=currencies]').val(), 'form[action="/cart/add"] span.money');
      {% endif %}

    } else {
      // variant doesn't exist or is sold out
      jQuery('#backorder').fadeTo(200,0).addClass("hidden");
      var message = variant ? "Sold Out" : "Unavailable";  
      jQuery('#add').val(message).addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);      // set add-to-cart button to unavailable class and disable button 
    }

  };

  new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });

  jQuery('.single-option-selector').addClass('special-select').customStyle();
  
  // Remove the Monogram options from all option select elements.
  jQuery('.single-option-selector option').filter(function() {
    return jQuery(this).text() === 'Monogram';
  }).remove();
  
  // Add label if only one product option and it isn't 'Title'.
  {% if product.options.size == 1 and product.options.first != 'Title' %}
    jQuery('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
  {% endif %}
  
  // Auto-select first available variant on page load.
  {% assign found_one_in_stock = false %}
  {% for variant in product.variants %}
    {% if variant.available and found_one_in_stock == false %}
      {% assign found_one_in_stock = true %}
      {% for option in product.options %}
      jQuery('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
      {% endfor %}
    {% endif %}
  {% endfor %}
  
  {% if look_for_image_match %}
  // If a Color is selected, show the matching product image.
  jQuery('.single-option-selector:eq({{ option_index }})').bind('change', function() {
    if (!Shopify.doNotTriggerClickOnThumb) {
      jQuery('#product-photo-thumbs img[alt="' + jQuery(this).val() + '"]:eq(0)').trigger('click');      
    }
    Shopify.doNotTriggerClickOnThumb = false;
    return true;
  });  
  // If an image is shown in Main View, auto-select the corresponding Color option.
  jQuery('#product-photo-thumbs img').bind('click', function() {
   var color = jQuery(this).attr('alt');
   if (color && color !== '') {
     var options = jQuery('.single-option-selector:eq({{ option_index }}) option[value="' + color + '"]');
     if (options.size() !== 0) {
       Shopify.doNotTriggerClickOnThumb = true;
       jQuery('.single-option-selector:eq({{ option_index }})').val(color).trigger('change');
     }
   }
   return true;
  });
  {% endif %}
  
  {% endif %}

});

</script>