shopify-linked-options.js

// (c) Copyright 2014 Caroline Schnapp. All Rights Reserved. Contact: [email protected]
// See http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-options
// jQuery 1.7+

var Shopify = Shopify || {};

Shopify.optionsMap = {};

Shopify.updateOptionsInSelector = function(selectorIndex) {
  var singleOptionSelectors = jQuery('select.single-option-selector');

  switch (selectorIndex) {
    case 0:
      var key = 'root';
      var selector = singleOptionSelectors.eq(0);
      break;
    case 1:
      var key = singleOptionSelectors.eq(0).val();
      var selector = singleOptionSelectors.eq(1);
      break;
    case 2:
      var key = singleOptionSelectors.eq(0).val();  
      key += ' / ' + singleOptionSelectors.eq(1).val();
      var selector = singleOptionSelectors.eq(2);
  }
  
  var initialValue = selector.val();
  selector.empty();    
  var availableOptions = Shopify.optionsMap[key];
  for (var i=0; i<availableOptions.length; i++) {
    var option = availableOptions[i];
    var newOption = $('<option />').val(option).html(option);
    selector.append(newOption);
  }
  jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
    var t = $(this);
    if (jQuery.inArray(t.attr('data-value'), availableOptions) !== -1) {
      t.removeClass('soldout').show().find('[type="radio"]').removeAttr('disabled checked');
    }
    else {
      t.addClass('soldout').hide().find('[type="radio"]').removeAttr('checked').attr('disabled','disabled');
    }
  });
  if (jQuery.inArray(initialValue, availableOptions) !== -1) {
    selector.val(initialValue);
  }
  selector.trigger('change');  
  
};

Shopify.linkOptionSelectors = function(product) {
  // Building our mapping object.
  for (var i=0; i<product.variants.length; i++) {
    var variant = product.variants[i];
    if (variant.available) {
      // Gathering values for the 1st drop-down.
      Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || [];
      Shopify.optionsMap['root'].push(variant.option1);
      Shopify.optionsMap['root'] = Shopify.uniq(Shopify.optionsMap['root']);
      // Gathering values for the 2nd drop-down.
      if (product.options.length > 1) {
        var key = variant.option1;
        Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
        Shopify.optionsMap[key].push(variant.option2);
        Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
      }
      // Gathering values for the 3rd drop-down.
      if (product.options.length === 3) {
        var key = variant.option1 + ' / ' + variant.option2;
        Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
        Shopify.optionsMap[key].push(variant.option3);
        Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
      }
    }
  }

  var singleOptionSelectors = jQuery('select.single-option-selector');

  // Update options right away.
  Shopify.updateOptionsInSelector(0);
  if (product.options.length > 1) Shopify.updateOptionsInSelector(1);
  if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
  // When there is an update in the first dropdown.
  singleOptionSelectors.eq(0).change(function() {
    Shopify.updateOptionsInSelector(1);
    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    return true;
  });
  // When there is an update in the second dropdown.
  singleOptionSelectors.eq(1).change(function() {
    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    return true;
  });
  
};

Hello,
is there a way to make it work with Brooklyn theme.
Help very much appriciate.

Upvote the last comment!

@freakdesign this linked option not working with the swatches do you have any suggestion ?