Javascript snippet to help auto select a Shopify variant from a hash.

select-from-hash

<script type="text/javascript">
/*

re: http://ecommerce.shopify.com/c/ecommerce-design/t/land-on-specific-variant-when-loading-product-page-147793

Assumes:
--------

* that you are calling the javascript once the select element is available
* you have a select element on the page like:

<select name="id" id="select-variant">
<option value="201565932" data-sku="some_unique_sku">Variant one</option>
<option value="201565932" data-sku="some__other_unique_sku">Variant two</option>
</select>

Usage:

------
The resulting url to use would be in a format like:
http://www.my-shopify-store.com/collection/product#some__other_unique_sku

The code would be added to your main theme.js, or to the bottom of your product.liquid file.


Sidenote:
---------

You don't have to use the data-sku. You just need some way of making each option unique so you can find it.

*/
var initSelect = function(){
  if(window.location.hash) {
  
  var s = $('#select-variant'),
      h = window.location.hash.substring(1);
  
  s.find('option').each(function() {
       var t = $(this);
       if(t.attr('data-sku') == h){
         $('#select-variant-option-0').val(t.text());
       }
    });
  }
}
initSelect();
</script>