drabbytux

layout	title	sidebar_title	description	nav
default	Make 'Pick an option' the default choice in product drop-down menus	Make 'Pick an option' the default choice for drop-downs	Quick customization to your theme to let customers know there are variants.	group products

drabbytux

$(document).ready(function() {
   if( typeof(productOptions ) != "undefined" ){
     for(i=0;i<productOptions.length;i++) {
       if (['a', 'e', 'i', 'o', 'u'].indexOf(productOptions[i][i].substr(0, 1).toLowerCase()) !== -1 ) { 
       $('.single-option-selector:eq('+ i +')')
       .filter(function() {
         return $(this).find('option').length > 1
       })
       .prepend('<option value="">Pick an ' + productOptions[i][i] + '</option>')
       .val('')

drabbytux

jQuery(function($) {
  $('form[action="/cart/add"]').submit(function() {
    var formIsValid = true;
    var message = "Please fill this out and you will be able to add the item to your cart.";
    $(this).find('[name^="properties"]').filter('.required, [required="required"]').each(function() {
      $(this).removeClass('error');
      if (formIsValid && $(this).val() == '') {
        formIsValid = false;
        message = $(this).attr('data-error') || message;
        $(this).addClass('error');

drabbytux

{% comment %}
Source: https://gist.github.com/carolineschnapp/9122054
If you are not on a collection page, do define which collection to use in the order form.
Use the following assign statement, replace 'your-collection-handle-here' with your collection handle.
{% assign collection = collections.your-collection-handle-here %}
Use the assign statement outside of this comment block at the top of your template.
{% endcomment %}

{% paginate collection.products by 100 %}

drabbytux

---

layout: default title: Recommend related products to your customers sidebar_title: Recommend related products description: Learn about related products and recommendations.

difficulty: intermediate

supported: false

nav: group: products

drabbytux

What you want

You want a See Size Chart button on the product page:

... that once clicked gives you this:

drabbytux

/* Remove variants that are sold out in the dropdown */
jQuery(document).ready(function(){
  if(typeof arr_titles_to_remove  != 'undefined' ){
    var $addToCartForm = $('form[action="/cart/add"]');
    var i_title;
    for (i_title = 0; i_title < arr_titles_to_remove.length; ++i_title) {
      jQuery('.single-option-selector option').filter(function() { return jQuery(this).text() === arr_titles_to_remove[i_title] }).remove();
    }

    jQuery('.single-option-selector').trigger('change');

drabbytux

/**
 * Module to add a shipping rates calculator to cart page.
 *
 * Copyright (c) 2011-2016 Caroline Schnapp (11heavens.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Modified by David Little, 2016
 */

drabbytux

{% comment %}Place this at the bottom of the section/product.template.liquid file{% endcomment %}
{% if product.options.size == 1 %}
  <script>
    var product_variants_removed = [
      {%- for variant in product.variants -%}
     	{%- unless variant.available -%}
          '{{ variant.title }}',
        {%- endunless -%}
      {%- endfor -%}
    ];

drabbytux

$(document).ready(function() {
  thumbnails = $('img[src*="/products/"]').not(':first');
  if (thumbnails.length) {
    thumbnails.bind('click', function() {
      var arrImage = $(this).attr('src').split('?')[0].split('.');
      var strExtention = arrImage.pop();
      var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
      var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
      if (typeof variantImages[strNewImage] !== 'undefined') {
          productOptions.forEach(function (value, i) {