carolineschnapp/gist:1083007

chefmungus · 2019-01-22T22:10:11Z

@eddyparkinson I implemented both these fixes as well as removing defer="defer" from the vendor.js load and still nothing doing. Preview link below, any help would be much appreciated.

https://8hk4yjvzez82ip57-1011974210.shopifypreview.com - Navigate to the Hats product in the catalog for the best example.

Uncaught TypeError: Shopify.uniq is not a function

Fix 1

From https://ecommerce.shopify.com/c/ecommerce-design/t/how-to-hide-irrelevant-variant-in-debut-theme-385309
var Shopify = Shopify || {};
  
  Shopify.arrayIncludes = function(e, t) {
    for (var n = 0; n < e.length; n++)
        if (e[n] == t)
            return !0;
    return !1
};

Shopify.uniq = function(e) {
    for (var t = [], n = 0; n < e.length; n++)
        Shopify.arrayIncludes(t, e[n]) || t.push(e[n]);
    return t
};
  
Shopify.optionsMap = {};
Fix 2

@codinginfotech says

use "jQuery.unique" in the place of "Shopify.uniq"

impactcolor · 2019-01-29T00:15:32Z

I'm getting Cannot read property 'length' of undefined on the loop that goes on
availableOptions = Shopify.optionsMap[key];
any idea how to solve this?

VickyFi · 2019-07-04T14:12:14Z

Hello, I get this error "availableOptions is undefined". Do you have any suggestions for that?

klongdesigns · 2019-09-23T20:03:46Z

Hello, I get this error "availableOptions is undefined". Do you have any suggestions for that?

In my case, the issue was in the selector calls (lines 14, 18, 22, 23, 82 and 88). It originally was:

jQuery(".single-option-selector:eq

But when I looked at my code, the actual selector was missing the "single-" part, so the updated code ended up being:

jQuery(".option-selector:eq

&TLDR;

In the linked-options.liquid file, find and replace all instances of ".single-option-selector" with ".option-selector"

muneeb434 · 2019-10-08T06:37:34Z

I have also applied the same script but its not working. I am using 'FLEX' theme by Out of Sandbox.

Actually, I have three option as below:

Color
Contrast Color
Size

linked-option script only hide the color option variants its not hiding the size and contrast color variants.

Code:

`<script>
// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: [email protected]
// See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus

// Modified by Jonathan Moore (Style Hatch) https://github.com/jonathanmoore
/*
Updated to work with sectioned themes
- Added required methods from the deprecated options_selection.js
- Triggers an initial variant change
- Hides sold out variants with only one option
*/
window.addEventListener('DOMContentLoaded', function() {
var Shopify = Shopify || {};

// Required functionality from depricated options_selection.js
Shopify.arrayIncludes = function(e, t) {
for (var n = 0; n < e.length; n++)
if (e[n] == t) return !0;
return !1
}, Shopify.uniq = function(e) {
for (var t = [], n = 0; n < e.length; n++) Shopify.arrayIncludes(t, e[n]) || t.push(e[n]);
return t
}
Shopify.optionsMap = {};
Shopify.updateOptionsInSelector = function(selectorIndex) {

switch (selectorIndex) {
  case 0:
    var key = 'root';
    var selector = jQuery('.single-option-selector__radio:eq(0)');
    break;
  case 1:
    var key = jQuery('.single-option-selector__radio:eq(0)').val();
    var selector = jQuery('.single-option-selector__radio:eq(1)');
    break;
  case 2:
    var key = jQuery('.single-option-selector__radio:eq(0)').val();  
    key += ' / ' + jQuery('.single-option-selector__radio:eq(1)').val();
    var selector = jQuery('.single-option-selector__radio: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 = jQuery('<option></option>').val(option).html(option);
  selector.append(newOption);
}
jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
  if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
    $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
  }
  else {
    $(this).addClass('soldout').hide().find(':radio').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]);
}
}
}
// 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.
jQuery(".single-option-selector__radio: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.
jQuery(".single-option-selector__radio:eq(1)").change(function() {
if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
return true;
});
};

{% if product.available and product.options.size > 1 %}
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {

    observer.disconnect();
  });  
  observer.observe($addToCartForm[0], config);
}

{% endif %}
Shopify.linkOptionSelectors({{ product | json }});

var selector = jQuery('.single-option-selectorradio:eq(0)');
selector.trigger('change');
{% if product.options.size == 1 %}
{% for variant in product.variants %}
{% unless variant.available %}
jQuery('.single-option-selectorradio option').filter(function() { return jQuery(this).text().trim() === {{ variant.title | json }}; }).remove();
{% endunless %}
{% endfor %}
jQuery('.single-option-selector__radio').trigger('change');
{% endif %}
});
</script>`

Any one have any idea how to fix this?

Drugsbio · 2019-12-09T12:08:59Z

@muneeb434 Hello dude, your code is working for Brooklyn theme, thanks. But what if i want use "button" type, not "drop-down"? May be you know what to change in this code?

murthy-softscripts · 2020-01-24T12:15:25Z

Excellent one.. trying hard for whole day.. and i found it at last

samineb · 2020-02-05T18:50:16Z

Was anyone able to implement this feature to the quickview cart option?

williamgrivera · 2020-02-10T06:38:59Z

The code if you want to disable variants instead of hiding them. It also appends 'Sold Out'. Should look like this https://tppr.me/jjhlY

<script>
// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: [email protected]
// See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus

var Shopify = Shopify || {};

Shopify.optionsMap = {};

Shopify.updateOptionsInSelector = function(selectorIndex) {
    
  switch (selectorIndex) {
    case 0:
      var key = 'root';
      var selector = jQuery('.single-option-selector:eq(0)');
      break;
    case 1:
      var key = jQuery('.single-option-selector:eq(0)').val();
      var selector = jQuery('.single-option-selector:eq(1)');
      break;
    case 2:
      var key = jQuery('.single-option-selector:eq(0)').val();  
      key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
      var selector = jQuery('.single-option-selector:eq(2)');
  }
  
  var initialValue = selector.val();
  
  var availableOptions = Shopify.optionsMap[key];
  selector.find('option').each(function () {
    var $this = jQuery(this);
    var _value = $this.val();
    var html = $this.html();
    if (jQuery.inArray(_value, availableOptions) !== -1) {
      $this.removeAttr('disabled', 'disabled').html(_value);
    } else {
      $this.removeAttr('checked').attr('disabled', 'disabled').html( _value + " - Sold Out" );
      selector.find('option:not(:disabled)').first().click();
    }
  });
  
  if (selector.find(':checked').length < 1) {
    selector.find('option:not(:disabled)').first().click();
  }

  jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
    if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
      $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
    }
    else {
      $(this).addClass('soldout').hide().find(':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 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]);
      }
    }
  }
  // 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.
  jQuery(".single-option-selector: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.
  jQuery(".single-option-selector:eq(1)").change(function() {
    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    return true;
  });  
};
 
{% if product.available and product.options.size > 1 %}
  var $addToCartForm = $('form[action="/cart/add"]');
  if (window.MutationObserver && $addToCartForm.length) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {      
      Shopify.linkOptionSelectors({{ product | json }});
      observer.disconnect();
    });  
    observer.observe($addToCartForm[0], config);
  }
{% endif %}
  
</script>

samineb · 2020-02-12T19:28:25Z

Is it possible to have this work for select elements instead of radio buttons?

williamgrivera · 2020-02-12T20:46:02Z

It works for select elements.

cfxd · 2020-05-31T06:36:43Z

@willimagrivera has a good idea but I had to make some corrections to get that code to work.

Here's what works for me:

First, make sure when you call the product form you add product JSON, here's how I placed that in the data-product-json attribute:

{%- assign product_data_json = product | json -%}
{% form 'product', product, novalidate: 'novalidate', data-product-json: product_data_json %}

Then in my utilities.js I just do this:

var Shopify = Shopify || {};

Shopify.optionsMap = {};

Shopify.arrayIncludes = function (t, e) {
  for (var o = 0; o < t.length; o++) {
    if (t[o] == e) return !0;
  }
  return !1;
};

Shopify.uniq = function (t) {
  for (var e = [], o = 0; o < t.length; o++) {
    Shopify.arrayIncludes(e, t[o]) || e.push(t[o]);
  }
  return e;
};

Shopify.updateOptionsInSelector = function(selectorIndex) {
    
  switch (selectorIndex) {
    case 0:
      var key = 'root';
      var selector = jQuery('.single-option-selector:eq(0)');
      break;
    case 1:
      var key = jQuery('.single-option-selector:eq(0)').val();
      var selector = jQuery('.single-option-selector:eq(1)');
      break;
    case 2:
      var key = jQuery('.single-option-selector:eq(0)').val();  
      key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
      var selector = jQuery('.single-option-selector: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 = jQuery('<option></option>').val(option).html(option);
  //   selector.append(newOption);
  // }
  selector.find('option').each(function () {
    var $this = jQuery(this);
    var _value = $this.val();
    if (jQuery.inArray(_value, availableOptions) !== -1) {
      $this.removeAttr('disabled', 'disabled').html(_value);
    } else {
      $this.removeAttr('checked').attr('disabled', 'disabled');
      selector.find('option:not(:disabled)').first().click();
    }
  });
  
  if (selector.find(':checked').length < 1) {
    selector.find('option:not(:disabled)').first().click();
  }

  jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
    if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
      $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
    }
    else {
      $(this).addClass('soldout').hide().find(':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]);
      }
    }
  }
  // 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.
  jQuery('.single-option-selector: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.
  jQuery('.single-option-selector:eq(1)').change(function() {
    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    return true;
  });  
};
 
var $addToCartForm = $('form[action="/cart/add"]');
var product        = $addToCartForm.length > 0 ? JSON.parse($addToCartForm.attr('data-product-json')) : false;

if (product && product.available && product.options.length > 1) {
  if (window.MutationObserver && $addToCartForm.length) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {      
      Shopify.linkOptionSelectors(product);
      observer.disconnect();
    });  
    observer.observe($addToCartForm[0], config);
  }

  Shopify.linkOptionSelectors(product);
}

uumoss · 2020-08-11T20:28:46Z

I've tried trouble shooting using the comments on here to either grey out or even just show out of stock options while also having the linked options work, but I haven't had any luck. I can get one to work or the other, but never at the same time.

I am working with the Out of the Sandbox theme Mobilia. Has anyone been able to make it work with that theme?

sebfie · 2020-12-04T15:26:17Z

I changed also the way to select form from :

$('form[action="/cart/add"]')

to

$('form[action*="/cart/add"]')

Because when you are on a locale (/en), it does not match, and it should !

murthy-softscripts · 2020-12-06T12:28:40Z

Which site sir

…

On Fri, Dec 4, 2020, 8:56 PM Fieloux ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ I changed also the way to select form from : $('form[action="/cart/add"]') to $('form[action*="/cart/add"]') Because when you are on a locale (/en), it does not match, and it should ! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/1083007#gistcomment-3550344>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEMJXZ6HYAD4XRE5XF5LU6TSTD5STANCNFSM4H53ISUA> .

sanjay-makwana-avidbrio · 2021-01-27T08:01:56Z

@ALL

I found the solution and working for me on 27-Jan-2021 with Shopify minimal theme [open here ] (https://belvg.com/blog/shopify-variants.html)

robhuska · 2021-03-17T18:23:32Z

+1 for @Sanjayavidbrio's solution found here: https://belvg.com/blog/shopify-variants.html#step_5! However, if you want to still show products that you do carry, but are out of stock, this will not work out of the box.

My goal was to remove variant combonations that we just do not carry, but if we have a variant that is Out of Stock, we still want to show that. Below is my linked-options.liquid snippet file.

<script>
window.addEventListener('DOMContentLoaded', function() {
  var Shopify = Shopify || {};
    
  // Required functionality from depricated options_selection.js
  Shopify.arrayIncludes = function(e, t) {
    for (var n = 0; n < e.length; n++)
        if (e[n] == t) return !0;
    return !1
  }, Shopify.uniq = function(e) {
      for (var t = [], n = 0; n < e.length; n++) Shopify.arrayIncludes(t, e[n]) || t.push(e[n]);
      return t
  }

  Shopify.optionsMap = {};

  Shopify.updateOptionsInSelector = function(selectorIndex) {
      
    switch (selectorIndex) {
      case 0:
        var key = 'root';
        var selector = jQuery('.single-option-selector:eq(0)');
        break;
      case 1:
        var key = jQuery('.single-option-selector:eq(0)').val();
        var selector = jQuery('.single-option-selector:eq(1)');
        break;
      case 2:
        var key = jQuery('.single-option-selector:eq(0)').val();  
        key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
        var selector = jQuery('.single-option-selector: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 = jQuery('<option></option>').val(option).html(option);
      selector.append(newOption);
    }
    jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
      if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
        $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
      }
      else {
        $(this).addClass('soldout').hide().find(':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];

        // 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]);
        }

    }
    // 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.
    jQuery(".single-option-selector: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.
    jQuery(".single-option-selector:eq(1)").change(function() {
      if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
      return true;
    });  
  };
   
  {% if product.available and product.options.size > 1 %}
    var $addToCartForm = $('form[action="/cart/add"]');
    if (window.MutationObserver && $addToCartForm.length) {
      if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
        observer.disconnect();
      }
      var config = { childList: true, subtree: true };
      var observer = new MutationObserver(function() {      
        Shopify.linkOptionSelectors({{ product | json }});
        observer.disconnect();
      });  
      observer.observe($addToCartForm[0], config);
    }
  {% endif %}
    
  var selector = jQuery('.single-option-selector:eq(0)');
  selector.trigger('change'); 

});
</script>

The key differences are to remove the if (variant.available) { } located at line 61 (and the closing } on line 80). Then I remove the entire chunk from line 117-124 that deals with products with only one option size.

Hope this help someone else!

sanjay-makwana-avidbrio · 2021-04-05T09:52:22Z

@robhuska thanks for your solution that was does not work for me.

i want use radio button( variants swatches ) with linked option

the linked option when u change first option that time second option drop-down selected on box but add to cart still Unavailable . select second option add to cart work

aman-developer · 2021-04-05T10:33:13Z

First you need to convert dropdown into swatches.

There is already tutorial for it.

So go and implement that first and then try to understand what bug or code you need to fix in linked option to make it work.

I explained in my screenshot.

sanjay-makwana-avidbrio · 2021-04-05T11:33:58Z

@aman-developer thanks for your support.

the linked option and variant selection not working

here is my code ` <script>
window.addEventListener('DOMContentLoaded', function() {
var Shopify = Shopify || {};

  // Required functionality from depricated options_selection.js
  Shopify.arrayIncludes = function(e, t) {
    for (var n = 0; n < e.length; n++)
        if (e[n] == t) return !0;
    return !1
  }, Shopify.uniq = function(e) {
      for (var t = [], n = 0; n < e.length; n++) Shopify.arrayIncludes(t, e[n]) || t.push(e[n]);
      return t
  }

  Shopify.optionsMap = {};

  Shopify.updateOptionsInSelector = function(selectorIndex) {
      
    switch (selectorIndex) {
      case 0:
        var key = 'root';
        var selector = jQuery('.single-option-selector:eq(0)');
        break;
      case 1:
        var key = jQuery('.single-option-selector:eq(0)').val();
        var selector = jQuery('.single-option-selector:eq(1)');
        break;
      case 2:
        var key = jQuery('.single-option-selector:eq(0)').val();  
        key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
        var selector = jQuery('.single-option-selector: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 = jQuery('<option></option>').val(option).html(option);
      selector.append(newOption);
    }
    /*
    jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
      if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
        $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
      }
      else {
        $(this).addClass('soldout').hide().find(':radio').removeAttr('checked').attr('disabled','disabled');
      }
    });
    */
    
    $('.variant-swatches :radio').change(function() { {

      var optionIndex = $(this).closest('.variant-swatches').attr('data-option-index');

       jQuery(".variant-swatches[data-option-index='"+optionIndex+"'] .swatch-element").removeClass("active");

      var optionValue = $(this).val();

      jQuery(" .variant-swatches[data-option-index='"+optionIndex+ "'] .swatch-element[data-value='"+optionValue+ "' ] ").addClass("active");

      }})
      /* */
    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]);
        }
      
    }
    // 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.
    jQuery(".single-option-selector: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.
    jQuery(".single-option-selector:eq(1)").change(function() {
      if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
      return true;
    });  
  };
   
  {% if product.available and product.options.size > 1 %}
    var $addToCartForm = $('form[action="/cart/add"]');
    if (window.MutationObserver && $addToCartForm.length) {
      if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
        observer.disconnect();
      }
      var config = { childList: true, subtree: true };
      var observer = new MutationObserver(function() {      
        Shopify.linkOptionSelectors({{ product | json }});
        observer.disconnect();
      });  
      observer.observe($addToCartForm[0], config);
    }
  {% endif %}
    
  var selector = jQuery('.single-option-selector:eq(0)');
  selector.trigger('change'); 
  
/*
  {% if product.options.size == 1 %}
    {% for variant in product.variants %}
      {% unless variant.available %}
        jQuery('.single-option-selector option').filter(function() { return jQuery(this).text().trim() === {{ variant.title | json }}; }).remove();
      {% endunless %}
    {% endfor %}
    jQuery('.single-option-selector').trigger('change');
  {% endif %}
  */
});

/* */

</script>`

sanjay-makwana-avidbrio · 2021-04-06T09:56:14Z

@aman-developer can you please post your solution it not working for me

YahyaYavuz61 · 2022-01-16T20:34:39Z

Hello experts,

this snippet doesnt works for Prestige OS2.0 Theme.
Have anyone a snippet that works for this theme?

Please help me :)

sanjay-makwana-avidbrio · 2022-01-17T01:11:08Z

Thanks for reaching out, you will have to edit the variables to match your theme and it should work! Thanks and Regards, Jim Cook /* Avid Brio / *Business Development Manager Call: +1-919-300-6224 / Skype: jim.avidbrio www.AvidBrio.com <http://avidbrio.com>

…

On Mon, Jan 17, 2022 at 2:04 AM YahyaYavuz61 ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Hello experts, this snippet doesnt works for Prestige OS2.0 Theme. Have anyone a snippet that works for this theme? Please help me :) — Reply to this email directly, view it on GitHub <https://gist.github.com/1083007#gistcomment-4030739>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASTUSG67YH63FITXXIVOQNLUWMTWXANCNFSM4H53ISUA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

aman-developer · 2022-01-17T04:38:28Z

Hello @YahyaYavuz61

This tutorial does not work directly for Prestige theme. Not for old version of Prestige theme too.

You will have to update product-form.liquid file first. You will have to call product options in dropdown and have to keep them hide. You have to update Classes assign to Swatches.
Then You will have to update this snippet and then it will work. There are numerous steps to implement linked-options for Prestige theme in shopify.

YahyaYavuz61 · 2022-01-17T06:00:14Z

@sanjay-makwana-avidbrio which variables i must change? Can you explain please?

YahyaYavuz61 · 2022-01-17T06:02:37Z

Hello @aman-developer thank you!

Can you do that for me?
if it's chargeable, I can also pay you.

webmgrscandia · 2022-03-24T18:21:10Z

Any update on this for Dawn 3.0?

aman-developer · 2022-03-25T06:52:22Z

I recently did it for Dawn 3.0 and 4.0 both.

webmgrscandia · 2022-03-25T14:31:27Z

I recently did it for Dawn 3.0 and 4.0 both.

Dude, could you help me?

Tremand89 · 2022-04-21T11:20:33Z

The code sort of works.
It works in cases when there are 10-15 variants with 3 variant options, but when the varaint quantity increases to 30+ it does not work properly.
Is there a way to solve this?

Edit:
With 2options it works perfectly, but when 3rd option is added the functionality breaks

carolineschnapp/gist:1083007

chefmungus commented Jan 22, 2019 •

edited

Loading

impactcolor commented Jan 29, 2019

VickyFi commented Jul 4, 2019

klongdesigns commented Sep 23, 2019

muneeb434 commented Oct 8, 2019 •

edited

Loading

Drugsbio commented Dec 9, 2019

murthy-softscripts commented Jan 24, 2020

samineb commented Feb 5, 2020

williamgrivera commented Feb 10, 2020 •

edited

Loading

samineb commented Feb 12, 2020

williamgrivera commented Feb 12, 2020

cfxd commented May 31, 2020 •

edited

Loading

uumoss commented Aug 11, 2020

sebfie commented Dec 4, 2020

murthy-softscripts commented Dec 6, 2020 via email

sanjay-makwana-avidbrio commented Jan 27, 2021 •

edited

Loading

robhuska commented Mar 17, 2021 •

edited

Loading

sanjay-makwana-avidbrio commented Apr 5, 2021 •

edited

Loading

aman-developer commented Apr 5, 2021

sanjay-makwana-avidbrio commented Apr 5, 2021 •

edited

Loading

sanjay-makwana-avidbrio commented Apr 6, 2021

YahyaYavuz61 commented Jan 16, 2022

sanjay-makwana-avidbrio commented Jan 17, 2022 via email

aman-developer commented Jan 17, 2022 •

edited

Loading

YahyaYavuz61 commented Jan 17, 2022

YahyaYavuz61 commented Jan 17, 2022

webmgrscandia commented Mar 24, 2022

aman-developer commented Mar 25, 2022

webmgrscandia commented Mar 25, 2022

Tremand89 commented Apr 21, 2022 •

edited

Loading

	<script>
	// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: [email protected]
	// See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus

	var Shopify = Shopify \|\| {};

	Shopify.optionsMap = {};

	Shopify.updateOptionsInSelector = function(selectorIndex) {

	switch (selectorIndex) {
	case 0:
	var key = 'root';
	var selector = jQuery('.single-option-selector:eq(0)');
	break;
	case 1:
	var key = jQuery('.single-option-selector:eq(0)').val();
	var selector = jQuery('.single-option-selector:eq(1)');
	break;
	case 2:
	var key = jQuery('.single-option-selector:eq(0)').val();
	key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
	var selector = jQuery('.single-option-selector: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 = jQuery('<option></option>').val(option).html(option);
	selector.append(newOption);
	}
	jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
	if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
	$(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
	}
	else {
	$(this).addClass('soldout').hide().find(':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]);
	}
	}
	}
	// 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.
	jQuery(".single-option-selector: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.
	jQuery(".single-option-selector:eq(1)").change(function() {
	if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
	return true;
	});
	};

	{% if product.available and product.options.size > 1 %}
	var $addToCartForm = $('form[action="/cart/add"]');
	if (window.MutationObserver && $addToCartForm.length) {
	if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
	observer.disconnect();
	}
	var config = { childList: true, subtree: true };
	var observer = new MutationObserver(function() {
	Shopify.linkOptionSelectors({{ product \| json }});
	observer.disconnect();
	});
	observer.observe($addToCartForm[0], config);
	}
	{% endif %}

	</script>

carolineschnapp/gist:1083007

chefmungus commented Jan 22, 2019 • edited Loading

Fix 1

Fix 2

impactcolor commented Jan 29, 2019

VickyFi commented Jul 4, 2019

klongdesigns commented Sep 23, 2019

muneeb434 commented Oct 8, 2019 • edited Loading

Code:

Drugsbio commented Dec 9, 2019

murthy-softscripts commented Jan 24, 2020

samineb commented Feb 5, 2020

williamgrivera commented Feb 10, 2020 • edited Loading

samineb commented Feb 12, 2020

williamgrivera commented Feb 12, 2020

cfxd commented May 31, 2020 • edited Loading

uumoss commented Aug 11, 2020

sebfie commented Dec 4, 2020

murthy-softscripts commented Dec 6, 2020 via email

sanjay-makwana-avidbrio commented Jan 27, 2021 • edited Loading

robhuska commented Mar 17, 2021 • edited Loading

sanjay-makwana-avidbrio commented Apr 5, 2021 • edited Loading

aman-developer commented Apr 5, 2021

sanjay-makwana-avidbrio commented Apr 5, 2021 • edited Loading

sanjay-makwana-avidbrio commented Apr 6, 2021

YahyaYavuz61 commented Jan 16, 2022

sanjay-makwana-avidbrio commented Jan 17, 2022 via email

aman-developer commented Jan 17, 2022 • edited Loading

YahyaYavuz61 commented Jan 17, 2022

YahyaYavuz61 commented Jan 17, 2022

webmgrscandia commented Mar 24, 2022

aman-developer commented Mar 25, 2022

webmgrscandia commented Mar 25, 2022

Tremand89 commented Apr 21, 2022 • edited Loading

chefmungus commented Jan 22, 2019 •

edited

Loading

muneeb434 commented Oct 8, 2019 •

edited

Loading

williamgrivera commented Feb 10, 2020 •

edited

Loading

cfxd commented May 31, 2020 •

edited

Loading

sanjay-makwana-avidbrio commented Jan 27, 2021 •

edited

Loading

robhuska commented Mar 17, 2021 •

edited

Loading

sanjay-makwana-avidbrio commented Apr 5, 2021 •

edited

Loading

sanjay-makwana-avidbrio commented Apr 5, 2021 •

edited

Loading

aman-developer commented Jan 17, 2022 •

edited

Loading

Tremand89 commented Apr 21, 2022 •

edited

Loading