From ad8fc86b5226103ab9ed89db9f48174f988b3a12 Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Tue, 2 Sep 2014 14:47:13 -0400
Subject: [PATCH 1/7] Moved product JS to external file (mostly). Removed some
 console.logs

---
 assets/ajaxify.js.liquid |  3 --
 assets/shop.js.liquid    | 66 +++++++++++++++++++++++++++-
 layout/theme.liquid      | 48 +++++++++++++++++++++
 templates/product.liquid | 93 ----------------------------------------
 4 files changed, 113 insertions(+), 97 deletions(-)

diff --git a/assets/ajaxify.js.liquid b/assets/ajaxify.js.liquid
index cea28ed26..33bf87eac 100644
--- a/assets/ajaxify.js.liquid
+++ b/assets/ajaxify.js.liquid
@@ -898,7 +898,6 @@ var ajaxifyShopify = (function(module, $) {
           qty = parseInt( qtySelector.val().replace(/\D/g, '') );
 
       var qty = validateQty(qty);
-      console.log('1: ' + qty);
 
       // Add or subtract from the current quantity
       if (el.hasClass('ajaxifyCart--add')) {
@@ -927,7 +926,6 @@ var ajaxifyShopify = (function(module, $) {
           qty = parseInt( el.val().replace(/\D/g, '') );
 
       var qty = validateQty(qty);
-      console.log('2: ' + qty);
 
       // Only update the cart via ajax if we have a variant ID to work with
       if (id) {
@@ -1083,7 +1081,6 @@ var ajaxifyShopify = (function(module, $) {
             qty = parseInt( qtySelector.val().replace(/\D/g, '') );
 
         var qty = validateQty(qty);
-        console.log('3: ' + qty);
 
         // Add or subtract from the current quantity
         if (el.hasClass('js--add')) {
diff --git a/assets/shop.js.liquid b/assets/shop.js.liquid
index b90b57e26..0dafc55bf 100755
--- a/assets/shop.js.liquid
+++ b/assets/shop.js.liquid
@@ -11,7 +11,13 @@ timber.cacheSelectors = function () {
 
     // Product Page
     $productImage: $('#productPhotoImg'),
-    $thumbImages: $('#productThumbs').find('a.product-photo-thumb')
+    $thumbImages: $('#productThumbs').find('a.product-photo-thumb'),
+    $addToCart: $('#addToCart'),
+    $productPrice: $('#productPrice'),
+    $comparePrice: $('#comparePrice'),
+    $quantityElements: $('.quantity-selector, label + .js-qty'),
+    $addToCartText: $('#addToCartText'),
+    $featuredImage: $('#productPhotoImg')
   }
 };
 
@@ -101,6 +107,64 @@ timber.accessibleNav = function () {
   }
 };
 
+timber.productJs = function (args) {
+  var money_format = args.money_format,
+      variant = args.variant,
+      selector = args.selector;
+
+  // Selectors (for easier access)
+  var $addToCart = timber.cache.$addToCart,
+      $productPrice = timber.cache.$productPrice,
+      $comparePrice = timber.cache.$comparePrice,
+      $quantityElements = timber.cache.$quantityElements,
+      $addToCartText = timber.cache.$addToCartText,
+      $featuredImage = timber.cache.$featuredImage;
+
+  if (variant) {
+
+    // Update variant image, if one is set
+    if (variant.featured_image) {
+      var newImg = variant.featured_image,
+          el = $featuredImage[0];
+      Shopify.Image.switchImage(newImg, el, timber.switchImage);
+    }
+
+    // Select a valid variant if available
+    if (variant.available) {
+      // Available, enable the submit button, change text, show quantity elements
+      $addToCart.removeClass('disabled').prop('disabled', false);
+      $addToCartText.text('{{ "products.product.add_to_cart" | t }}');
+      $quantityElements.show();
+    } else {
+      // Sold out, disable the submit button, change text, hide quantity elements
+      $addToCart.addClass('disabled').prop('disabled', true);
+      $addToCartText.text('{{ "products.product.sold_out" | t }}');
+      $quantityElements.hide();
+    }
+
+    // Regardless of stock, update the product price
+    $productPrice.html( Shopify.formatMoney(variant.price, money_format) );
+
+    // Also update and show the product's compare price if necessary
+    if ( variant.compare_at_price > variant.price ) {
+      $comparePrice
+        .html('{{ "products.product.compare_at" | t }}: ' + Shopify.formatMoney(variant.compare_at_price, money_format))
+        .show();
+    } else {
+      $comparePrice.hide();
+    }
+
+  } else {
+    // The variant doesn't exist, disable submit button.
+    // This may be an error or notice that a specific variant is not available.
+    // To only show available variants, implement linked product options:
+    //   - http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options
+    $addToCart.addClass('disabled').prop('disabled', true);
+    $addToCartText.text('{{ "products.product.unavailable" | t }}');
+    $quantityElements.hide();
+  }
+};
+
 timber.productImageSwitch = function () {
   if ( timber.cache.$thumbImages.length ) {
     // Switch the main image with one of the thumbnails
diff --git a/layout/theme.liquid b/layout/theme.liquid
index c7f646f00..419e4ff17 100755
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -164,6 +164,54 @@
   {% endcomment %}
   {{ 'shop.js' | asset_url | script_tag }}
 
+  {% comment %}
+    Product page specific JS
+  {% endcomment %}
+  {% if template contains 'product' %}
+    {% comment %}
+      To take advantage of a callback on the select dropdown, add option_selection.js
+      and customize the JS below as you need.
+
+      Currently, the code below does:
+        - Hides your <select> tag from above
+        - Breaks out the product variants into separate product options, if more than one exists
+        - Generates a <select> tag for each product option
+
+      Callback notes:
+        - Keep the callback available to the global scope (window.selectCallback) so that advanced
+          addons can override it.
+          * E.g. multiple currencies http://docs.shopify.com/manual/configuration/store-customization/currencies-and-translations/currencies/how-to-toggle-between-two-currencies
+    {% endcomment %}
+    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
+    <script>
+      var selectCallback = function(variant, selector) {
+        timber.productJs({
+          money_format: "{{ shop.money_format }}",
+          variant: variant,
+          selector: selector
+        });
+      };
+
+      jQuery(function($) {
+        new Shopify.OptionSelectors('productSelect', {
+          product: {{ product | json }},
+          onVariantSelected: selectCallback,
+          enableHistoryState: true
+        });
+
+        // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
+        {% if product.options.size == 1 and product.options.first != 'Title' %}
+          $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
+        {% endif %}
+
+        // Hide selectors if we only have 1 variant and its title contains 'Default'.
+        {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
+          $('.selector-wrapper').hide();
+        {% endif %}
+      });
+    </script>
+  {% endif %}
+
   {% comment %}
     Ajaxify your cart with this plugin. Adding a product will reveal a drawer, modal, or confirmation button. Enabled by default in theme settings.
 
diff --git a/templates/product.liquid b/templates/product.liquid
index e233f35d6..39a19e405 100755
--- a/templates/product.liquid
+++ b/templates/product.liquid
@@ -148,96 +148,3 @@
   </div>
 
 </div>
-
-
-{% comment %}
-  To take advantage of a callback on the select dropdown, add option_selection.js
-  and customize the JS below as you need. This is only needed on pages where
-  product variants are accessible, so doesn't need to live in theme.liquid.
-
-  Currently, the code below does:
-    - Hides your <select> tag from above
-    - Breaks out the product variants into separate product options, if more than one exists
-    - Generates a <select> tag for each product option
-
-  Callback notes:
-    - Keep the callback available to the global scope (window.selectCallback) so that advanced
-      addons can override it.
-      * E.g. multiple currencies http://docs.shopify.com/manual/configuration/store-customization/currencies-and-translations/currencies/how-to-toggle-between-two-currencies
-{% endcomment %}
-
-{{ 'option_selection.js' | shopify_asset_url | script_tag }}
-<script>
-  var selectCallback = function(variant, selector) {
-
-    var $addToCart = $('#addToCart'),
-        $productPrice = $('#productPrice'),
-        $comparePrice = $('#comparePrice'),
-        $quantityElements = $('.quantity-selector, label + .js-qty'),
-        $addToCartText = $('#addToCartText'),
-        $featuredImage = $('#productPhotoImg');
-
-    if (variant) {
-
-      // Update variant image, if one is set
-      // Call timber.switchImage function in shop.js
-      if (variant.featured_image) {
-        var newImg = variant.featured_image,
-            el = $featuredImage[0];
-        Shopify.Image.switchImage(newImg, el, timber.switchImage);
-      }
-
-      // Select a valid variant if available
-      if (variant.available) {
-        // We have a valid product variant, so enable the submit button
-        $addToCart.removeClass('disabled').prop('disabled', false);
-        $addToCartText.text('{{ "products.product.add_to_cart" | t }}');
-        $quantityElements.show();
-      } else {
-        // Variant is sold out, disable the submit button
-        $addToCart.addClass('disabled').prop('disabled', true);
-        $addToCartText.text('{{ "products.product.sold_out" | t }}');
-        $quantityElements.hide();
-      }
-
-      // Regardless of stock, update the product price
-      $productPrice.html( Shopify.formatMoney(variant.price, "{{ shop.money_format }}") );
-
-      // Also update and show the product's compare price if necessary
-      if ( variant.compare_at_price > variant.price ) {
-        $comparePrice
-          .html('{{ "products.product.compare_at" | t }}: ' + Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}"))
-          .show();
-      } else {
-        $comparePrice.hide();
-      }
-
-    } else {
-      // The variant doesn't exist, disable submit button.
-      // This may be an error or notice that a specific variant is not available.
-      // To only show available variants, implement linked product options:
-      //   - http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options
-      $addToCart.addClass('disabled').prop('disabled', true);
-      $addToCartText.text('{{ "products.product.unavailable" | t }}');
-      $quantityElements.hide();
-    }
-  };
-
-  jQuery(function($) {
-    new Shopify.OptionSelectors('productSelect', {
-      product: {{ product | json }},
-      onVariantSelected: selectCallback,
-      enableHistoryState: true
-    });
-
-    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
-    {% if product.options.size == 1 and product.options.first != 'Title' %}
-      $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
-    {% endif %}
-
-    // Hide selectors if we only have 1 variant and its title contains 'Default'.
-    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
-      $('.selector-wrapper').hide();
-    {% endif %}
-  });
-</script>

From 9038e9cf944705abaf2a9fa7e8d2fefa927162c4 Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Tue, 2 Sep 2014 14:58:33 -0400
Subject: [PATCH 2/7] Removed duplicate variable

---
 assets/shop.js.liquid | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/assets/shop.js.liquid b/assets/shop.js.liquid
index 0dafc55bf..a9a7886d8 100755
--- a/assets/shop.js.liquid
+++ b/assets/shop.js.liquid
@@ -16,8 +16,7 @@ timber.cacheSelectors = function () {
     $productPrice: $('#productPrice'),
     $comparePrice: $('#comparePrice'),
     $quantityElements: $('.quantity-selector, label + .js-qty'),
-    $addToCartText: $('#addToCartText'),
-    $featuredImage: $('#productPhotoImg')
+    $addToCartText: $('#addToCartText')
   }
 };
 
@@ -107,10 +106,10 @@ timber.accessibleNav = function () {
   }
 };
 
-timber.productJs = function (args) {
-  var money_format = args.money_format,
-      variant = args.variant,
-      selector = args.selector;
+timber.productJs = function (options) {
+  var money_format = options.money_format,
+      variant = options.variant,
+      selector = options.selector;
 
   // Selectors (for easier access)
   var $addToCart = timber.cache.$addToCart,
@@ -118,14 +117,14 @@ timber.productJs = function (args) {
       $comparePrice = timber.cache.$comparePrice,
       $quantityElements = timber.cache.$quantityElements,
       $addToCartText = timber.cache.$addToCartText,
-      $featuredImage = timber.cache.$featuredImage;
+      $productImage = timber.cache.$productImage;
 
   if (variant) {
 
     // Update variant image, if one is set
     if (variant.featured_image) {
       var newImg = variant.featured_image,
-          el = $featuredImage[0];
+          el = $productImage[0];
       Shopify.Image.switchImage(newImg, el, timber.switchImage);
     }
 

From e4c7de07556d01ab28c725bace3fa929141813f4 Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Tue, 2 Sep 2014 15:01:14 -0400
Subject: [PATCH 3/7] Removed duplicate variable definitions

---
 assets/shop.js.liquid | 34 +++++++++++++---------------------
 1 file changed, 13 insertions(+), 21 deletions(-)

diff --git a/assets/shop.js.liquid b/assets/shop.js.liquid
index a9a7886d8..fb666cd8a 100755
--- a/assets/shop.js.liquid
+++ b/assets/shop.js.liquid
@@ -111,46 +111,38 @@ timber.productJs = function (options) {
       variant = options.variant,
       selector = options.selector;
 
-  // Selectors (for easier access)
-  var $addToCart = timber.cache.$addToCart,
-      $productPrice = timber.cache.$productPrice,
-      $comparePrice = timber.cache.$comparePrice,
-      $quantityElements = timber.cache.$quantityElements,
-      $addToCartText = timber.cache.$addToCartText,
-      $productImage = timber.cache.$productImage;
-
   if (variant) {
 
     // Update variant image, if one is set
     if (variant.featured_image) {
       var newImg = variant.featured_image,
-          el = $productImage[0];
+          el = timber.cache.$productImage[0];
       Shopify.Image.switchImage(newImg, el, timber.switchImage);
     }
 
     // Select a valid variant if available
     if (variant.available) {
       // Available, enable the submit button, change text, show quantity elements
-      $addToCart.removeClass('disabled').prop('disabled', false);
-      $addToCartText.text('{{ "products.product.add_to_cart" | t }}');
-      $quantityElements.show();
+      timber.cache.$addToCart.removeClass('disabled').prop('disabled', false);
+      timber.cache.$addToCartText.text('{{ "products.product.add_to_cart" | t }}');
+      timber.cache.$quantityElements.show();
     } else {
       // Sold out, disable the submit button, change text, hide quantity elements
-      $addToCart.addClass('disabled').prop('disabled', true);
-      $addToCartText.text('{{ "products.product.sold_out" | t }}');
-      $quantityElements.hide();
+      timber.cache.$addToCart.addClass('disabled').prop('disabled', true);
+      timber.cache.$addToCartText.text('{{ "products.product.sold_out" | t }}');
+      timber.cache.$quantityElements.hide();
     }
 
     // Regardless of stock, update the product price
-    $productPrice.html( Shopify.formatMoney(variant.price, money_format) );
+    timber.cache.$productPrice.html( Shopify.formatMoney(variant.price, money_format) );
 
     // Also update and show the product's compare price if necessary
     if ( variant.compare_at_price > variant.price ) {
-      $comparePrice
+      timber.cache.$comparePrice
         .html('{{ "products.product.compare_at" | t }}: ' + Shopify.formatMoney(variant.compare_at_price, money_format))
         .show();
     } else {
-      $comparePrice.hide();
+      timber.cache.$comparePrice.hide();
     }
 
   } else {
@@ -158,9 +150,9 @@ timber.productJs = function (options) {
     // This may be an error or notice that a specific variant is not available.
     // To only show available variants, implement linked product options:
     //   - http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options
-    $addToCart.addClass('disabled').prop('disabled', true);
-    $addToCartText.text('{{ "products.product.unavailable" | t }}');
-    $quantityElements.hide();
+    timber.cache.$addToCart.addClass('disabled').prop('disabled', true);
+    timber.cache.$addToCartText.text('{{ "products.product.unavailable" | t }}');
+    timber.cache.$quantityElements.hide();
   }
 };
 

From 198efed244e8cfaeb681983ba4ea7a97bf1f30be Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Tue, 2 Sep 2014 15:03:26 -0400
Subject: [PATCH 4/7] Updated option_selection.js comments

---
 templates/product.liquid | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/templates/product.liquid b/templates/product.liquid
index 39a19e405..0aa72a6c4 100755
--- a/templates/product.liquid
+++ b/templates/product.liquid
@@ -66,13 +66,12 @@
               - To separate these into multiple steps, which we suggest, use option_selection.js (see below)
 
             You can leverage jQuery to add a callback on page load and each time the select element changes:
-              - Include option_selection.js (as seen at the bottom of this file)
+              - Include option_selection.js (as seen at the bottom of theme.liquid)
               - This allows you to use JavaScript anytime the variant dropdown changes
               - This also separates out your variant options (ie. size, color, etc.) to separate select elements
 
             For more information on products with multiple options, visit:
               - http://docs.shopify.com/support/your-website/themes/can-i-make-my-theme-use-products-with-multiple-options#update-product-liquid
-
           {% endcomment %}
           <select name="id" id="productSelect" class="product-variants">
             {% for variant in product.variants %}

From 1109dc023c296bfa5acbb8fae5571ac4162307bf Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Tue, 2 Sep 2014 15:54:42 -0400
Subject: [PATCH 5/7] Moved product element selectors to separate function.
 Product js back to product template

---
 assets/shop.js.liquid    | 36 ++++++++++++++++++------------
 layout/theme.liquid      | 48 ----------------------------------------
 templates/product.liquid | 45 ++++++++++++++++++++++++++++++++++++-
 3 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/assets/shop.js.liquid b/assets/shop.js.liquid
index fb666cd8a..5ed2178be 100755
--- a/assets/shop.js.liquid
+++ b/assets/shop.js.liquid
@@ -11,7 +11,13 @@ timber.cacheSelectors = function () {
 
     // Product Page
     $productImage: $('#productPhotoImg'),
-    $thumbImages: $('#productThumbs').find('a.product-photo-thumb'),
+    $thumbImages: $('#productThumbs').find('a.product-photo-thumb')
+  }
+};
+
+timber.cacheProductSelectors = function() {
+  timber.productCache = {
+    $productImage: $('#productPhotoImg'),
     $addToCart: $('#addToCart'),
     $productPrice: $('#productPrice'),
     $comparePrice: $('#comparePrice'),
@@ -107,6 +113,8 @@ timber.accessibleNav = function () {
 };
 
 timber.productJs = function (options) {
+  timber.cacheProductSelectors();
+
   var money_format = options.money_format,
       variant = options.variant,
       selector = options.selector;
@@ -116,33 +124,33 @@ timber.productJs = function (options) {
     // Update variant image, if one is set
     if (variant.featured_image) {
       var newImg = variant.featured_image,
-          el = timber.cache.$productImage[0];
+          el = timber.productCache.$productImage[0];
       Shopify.Image.switchImage(newImg, el, timber.switchImage);
     }
 
     // Select a valid variant if available
     if (variant.available) {
       // Available, enable the submit button, change text, show quantity elements
-      timber.cache.$addToCart.removeClass('disabled').prop('disabled', false);
-      timber.cache.$addToCartText.text('{{ "products.product.add_to_cart" | t }}');
-      timber.cache.$quantityElements.show();
+      timber.productCache.$addToCart.removeClass('disabled').prop('disabled', false);
+      timber.productCache.$addToCartText.text('{{ "products.product.add_to_cart" | t }}');
+      timber.productCache.$quantityElements.show();
     } else {
       // Sold out, disable the submit button, change text, hide quantity elements
-      timber.cache.$addToCart.addClass('disabled').prop('disabled', true);
-      timber.cache.$addToCartText.text('{{ "products.product.sold_out" | t }}');
-      timber.cache.$quantityElements.hide();
+      timber.productCache.$addToCart.addClass('disabled').prop('disabled', true);
+      timber.productCache.$addToCartText.text('{{ "products.product.sold_out" | t }}');
+      timber.productCache.$quantityElements.hide();
     }
 
     // Regardless of stock, update the product price
-    timber.cache.$productPrice.html( Shopify.formatMoney(variant.price, money_format) );
+    timber.productCache.$productPrice.html( Shopify.formatMoney(variant.price, money_format) );
 
     // Also update and show the product's compare price if necessary
     if ( variant.compare_at_price > variant.price ) {
-      timber.cache.$comparePrice
+      timber.productCache.$comparePrice
         .html('{{ "products.product.compare_at" | t }}: ' + Shopify.formatMoney(variant.compare_at_price, money_format))
         .show();
     } else {
-      timber.cache.$comparePrice.hide();
+      timber.productCache.$comparePrice.hide();
     }
 
   } else {
@@ -150,9 +158,9 @@ timber.productJs = function (options) {
     // This may be an error or notice that a specific variant is not available.
     // To only show available variants, implement linked product options:
     //   - http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options
-    timber.cache.$addToCart.addClass('disabled').prop('disabled', true);
-    timber.cache.$addToCartText.text('{{ "products.product.unavailable" | t }}');
-    timber.cache.$quantityElements.hide();
+    timber.productCache.$addToCart.addClass('disabled').prop('disabled', true);
+    timber.productCache.$addToCartText.text('{{ "products.product.unavailable" | t }}');
+    timber.productCache.$quantityElements.hide();
   }
 };
 
diff --git a/layout/theme.liquid b/layout/theme.liquid
index 419e4ff17..c7f646f00 100755
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -164,54 +164,6 @@
   {% endcomment %}
   {{ 'shop.js' | asset_url | script_tag }}
 
-  {% comment %}
-    Product page specific JS
-  {% endcomment %}
-  {% if template contains 'product' %}
-    {% comment %}
-      To take advantage of a callback on the select dropdown, add option_selection.js
-      and customize the JS below as you need.
-
-      Currently, the code below does:
-        - Hides your <select> tag from above
-        - Breaks out the product variants into separate product options, if more than one exists
-        - Generates a <select> tag for each product option
-
-      Callback notes:
-        - Keep the callback available to the global scope (window.selectCallback) so that advanced
-          addons can override it.
-          * E.g. multiple currencies http://docs.shopify.com/manual/configuration/store-customization/currencies-and-translations/currencies/how-to-toggle-between-two-currencies
-    {% endcomment %}
-    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
-    <script>
-      var selectCallback = function(variant, selector) {
-        timber.productJs({
-          money_format: "{{ shop.money_format }}",
-          variant: variant,
-          selector: selector
-        });
-      };
-
-      jQuery(function($) {
-        new Shopify.OptionSelectors('productSelect', {
-          product: {{ product | json }},
-          onVariantSelected: selectCallback,
-          enableHistoryState: true
-        });
-
-        // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
-        {% if product.options.size == 1 and product.options.first != 'Title' %}
-          $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
-        {% endif %}
-
-        // Hide selectors if we only have 1 variant and its title contains 'Default'.
-        {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
-          $('.selector-wrapper').hide();
-        {% endif %}
-      });
-    </script>
-  {% endif %}
-
   {% comment %}
     Ajaxify your cart with this plugin. Adding a product will reveal a drawer, modal, or confirmation button. Enabled by default in theme settings.
 
diff --git a/templates/product.liquid b/templates/product.liquid
index 0aa72a6c4..aaa49b751 100755
--- a/templates/product.liquid
+++ b/templates/product.liquid
@@ -66,7 +66,7 @@
               - To separate these into multiple steps, which we suggest, use option_selection.js (see below)
 
             You can leverage jQuery to add a callback on page load and each time the select element changes:
-              - Include option_selection.js (as seen at the bottom of theme.liquid)
+              - Include option_selection.js (as seen at the bottom of this file)
               - This allows you to use JavaScript anytime the variant dropdown changes
               - This also separates out your variant options (ie. size, color, etc.) to separate select elements
 
@@ -147,3 +147,46 @@
   </div>
 
 </div>
+
+{% comment %}
+  To take advantage of a callback on the select dropdown, add option_selection.js
+  and customize the JS in timber.productJs as needed.
+
+  Currently, timber.productJs does the following:
+    - Hides your <select> tag from above
+    - Breaks out the product variants into separate product options, if more than one exists
+    - Generates a <select> tag for each product option
+
+  Callback notes:
+    - Keep the callback available to the global scope (window.selectCallback) so that advanced
+      addons can override it.
+      * E.g. multiple currencies http://docs.shopify.com/manual/configuration/store-customization/currencies-and-translations/currencies/how-to-toggle-between-two-currencies
+{% endcomment %}
+{{ 'option_selection.js' | shopify_asset_url | script_tag }}
+<script>
+  var selectCallback = function(variant, selector) {
+    timber.productJs({
+      money_format: "{{ shop.money_format }}",
+      variant: variant,
+      selector: selector
+    });
+  };
+
+  jQuery(function($) {
+    new Shopify.OptionSelectors('productSelect', {
+      product: {{ product | json }},
+      onVariantSelected: selectCallback,
+      enableHistoryState: true
+    });
+
+    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
+    {% if product.options.size == 1 and product.options.first != 'Title' %}
+      $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
+    {% endif %}
+
+    // Hide selectors if we only have 1 variant and its title contains 'Default'.
+    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
+      $('.selector-wrapper').hide();
+    {% endif %}
+  });
+</script>

From 04030850c6c382b6026c89093b5c1ed1d8d6e1fd Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Tue, 2 Sep 2014 16:18:26 -0400
Subject: [PATCH 6/7] Simplified product page js selectors

---
 assets/shop.js.liquid    | 49 ++++++++++++++++++----------------------
 templates/cart.liquid    |  6 ++---
 templates/product.liquid |  2 +-
 3 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/assets/shop.js.liquid b/assets/shop.js.liquid
index 5ed2178be..ac420d1c8 100755
--- a/assets/shop.js.liquid
+++ b/assets/shop.js.liquid
@@ -15,17 +15,6 @@ timber.cacheSelectors = function () {
   }
 };
 
-timber.cacheProductSelectors = function() {
-  timber.productCache = {
-    $productImage: $('#productPhotoImg'),
-    $addToCart: $('#addToCart'),
-    $productPrice: $('#productPrice'),
-    $comparePrice: $('#comparePrice'),
-    $quantityElements: $('.quantity-selector, label + .js-qty'),
-    $addToCartText: $('#addToCartText')
-  }
-};
-
 timber.init = function () {
   timber.cacheSelectors();
   timber.accessibleNav();
@@ -112,45 +101,51 @@ timber.accessibleNav = function () {
   }
 };
 
-timber.productJs = function (options) {
-  timber.cacheProductSelectors();
-
+timber.productPage = function (options) {
   var money_format = options.money_format,
       variant = options.variant,
       selector = options.selector;
 
+  // Selectors
+  var $productImage = $('#productPhotoImg'),
+      $addToCart = $('#addToCart'),
+      $productPrice = $('#productPrice'),
+      $comparePrice = $('#comparePrice'),
+      $quantityElements = $('.quantity-selector, label + .js-qty'),
+      $addToCartText = $('#addToCartText');
+
   if (variant) {
 
     // Update variant image, if one is set
     if (variant.featured_image) {
       var newImg = variant.featured_image,
-          el = timber.productCache.$productImage[0];
+          el = $productImage[0];
       Shopify.Image.switchImage(newImg, el, timber.switchImage);
     }
 
     // Select a valid variant if available
     if (variant.available) {
       // Available, enable the submit button, change text, show quantity elements
-      timber.productCache.$addToCart.removeClass('disabled').prop('disabled', false);
-      timber.productCache.$addToCartText.text('{{ "products.product.add_to_cart" | t }}');
-      timber.productCache.$quantityElements.show();
+      $addToCart.removeClass('disabled').prop('disabled', false);
+      $addToCartText.text('{{ "products.product.add_to_cart" | t }}');
+      $quantityElements.show();
     } else {
       // Sold out, disable the submit button, change text, hide quantity elements
-      timber.productCache.$addToCart.addClass('disabled').prop('disabled', true);
-      timber.productCache.$addToCartText.text('{{ "products.product.sold_out" | t }}');
-      timber.productCache.$quantityElements.hide();
+      $addToCart.addClass('disabled').prop('disabled', true);
+      $addToCartText.text('{{ "products.product.sold_out" | t }}');
+      $quantityElements.hide();
     }
 
     // Regardless of stock, update the product price
-    timber.productCache.$productPrice.html( Shopify.formatMoney(variant.price, money_format) );
+    $productPrice.html( Shopify.formatMoney(variant.price, money_format) );
 
     // Also update and show the product's compare price if necessary
     if ( variant.compare_at_price > variant.price ) {
-      timber.productCache.$comparePrice
+      $comparePrice
         .html('{{ "products.product.compare_at" | t }}: ' + Shopify.formatMoney(variant.compare_at_price, money_format))
         .show();
     } else {
-      timber.productCache.$comparePrice.hide();
+      $comparePrice.hide();
     }
 
   } else {
@@ -158,9 +153,9 @@ timber.productJs = function (options) {
     // This may be an error or notice that a specific variant is not available.
     // To only show available variants, implement linked product options:
     //   - http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options
-    timber.productCache.$addToCart.addClass('disabled').prop('disabled', true);
-    timber.productCache.$addToCartText.text('{{ "products.product.unavailable" | t }}');
-    timber.productCache.$quantityElements.hide();
+    $addToCart.addClass('disabled').prop('disabled', true);
+    $addToCartText.text('{{ "products.product.unavailable" | t }}');
+    $quantityElements.hide();
   }
 };
 
diff --git a/templates/cart.liquid b/templates/cart.liquid
index 07e6733e8..6b742b72d 100755
--- a/templates/cart.liquid
+++ b/templates/cart.liquid
@@ -50,18 +50,18 @@
             <div class="grid">
 
               <div class="grid-item one-third">
-                <a href="{{ item.product.url | within: collections.all }}" class="cart-image">
+                <a href="{{ item.url | within: collections.all }}" class="cart-image">
 
                   {% comment %}
                     More image size options at:
                       - http://docs.shopify.com/themes/filters/product-img-url
                   {% endcomment %}
-                  <img src="{{ item.product.featured_image.src | img_url: 'medium' }}" alt="{{ item.title | escape }}">
+                  <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
                 </a>
               </div>
 
               <div class="grid-item two-thirds">
-                <a href="{{ item.product.url }}" class="h4">
+                <a href="{{ item.url }}" class="h4">
                   {{ item.product.title }}
                 </a>
                 {% unless item.variant.title contains 'Default' %}
diff --git a/templates/product.liquid b/templates/product.liquid
index aaa49b751..3ddf9a30d 100755
--- a/templates/product.liquid
+++ b/templates/product.liquid
@@ -165,7 +165,7 @@
 {{ 'option_selection.js' | shopify_asset_url | script_tag }}
 <script>
   var selectCallback = function(variant, selector) {
-    timber.productJs({
+    timber.productPage({
       money_format: "{{ shop.money_format }}",
       variant: variant,
       selector: selector

From 8c33dfb04bf9f8c1e8d189b8c3c9a6cb4eeb78cb Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Tue, 2 Sep 2014 16:23:30 -0400
Subject: [PATCH 7/7] Updated product JS comments

---
 layout/theme.liquid      | 2 +-
 templates/product.liquid | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/layout/theme.liquid b/layout/theme.liquid
index c7f646f00..3908d0bfb 100755
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -160,7 +160,7 @@
   {% include 'footer' %}
 
   {% comment %}
-    An (almost) empty JS file for you to place your code
+    Helper scripts that you can extend as needed.
   {% endcomment %}
   {{ 'shop.js' | asset_url | script_tag }}
 
diff --git a/templates/product.liquid b/templates/product.liquid
index 3ddf9a30d..3c9b9b2ac 100755
--- a/templates/product.liquid
+++ b/templates/product.liquid
@@ -150,12 +150,13 @@
 
 {% comment %}
   To take advantage of a callback on the select dropdown, add option_selection.js
-  and customize the JS in timber.productJs as needed.
+  and customize the JS in timber.productPage as needed.
 
-  Currently, timber.productJs does the following:
+  Currently, timber.productPage does the following:
     - Hides your <select> tag from above
     - Breaks out the product variants into separate product options, if more than one exists
     - Generates a <select> tag for each product option
+    - Enables/disables elements based on variant availability
 
   Callback notes:
     - Keep the callback available to the global scope (window.selectCallback) so that advanced