Why am I getting this error 'TypeError undefined is not an object…' when including Shopify Linked Product Options?

Question

I'm trying to implement Shopify's Linked Product Options into my store (followed this tutorial ), they seem to be working fine on the product page but breaking other script (Cart & Quick Shop open but no content) on my index and collection pages.

I'm getting the following error in Safari:

TypeError: undefined is not an object (evaluating 'availableOptions.length')

which is referencing this piece of code:

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

If anyone has any suggestions as to why that might be I would appreciate your input. I'm not great with JS so struggling with this one!

Update:

I'm pretty sure this part is defining 'key' - if key is undefined does that mean it cannot find .single-option-selector ?

 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)');
  }

Answer 1

Step 1 : Find the error

It means availableOptions is undefind So the Shopify.optionsMap[key] returns undefined.

You should try this to debug. Is key defined? If Shopify right? Does Shopify.optionsMap exist?

console.log(key);
console.log(Shopify);
console.log(Shopify.optionsMap);
console.log(Shopify.optionsMap[key]);

Step 2: Make it more global

var key = '';
var selector = '';
switch (selectorIndex) {
case 0:
  key = 'root';
  selector = jQuery('.single-option-selector:eq(0)');
  break;
case 1:
  key = jQuery('.single-option-selector:eq(0)').val();
  selector = jQuery('.single-option-selector:eq(1)');
  break;
case 2:
  key = jQuery('.single-option-selector:eq(0)').val();  
  key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
  selector = jQuery('.single-option-selector:eq(2)');
  }