为什么我在包含 Shopify 链接产品选项时收到此错误“TypeError undefined is not an object...”？

Question

我正在尝试在我的商店中实施 Shopify 的链接产品选项（遵循此 tutorial），它们似乎在产品页面上运行良好，但在我的索引和集合页面。

我在 Safari 中遇到以下错误：

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

引用了这段代码：

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

如果有人对为什么会这样有任何建议，我将不胜感激。我不擅长 JS，所以在这个方面很挣扎！

更新：

我很确定这部分正在定义“键” - 如果键未定义是否意味着它无法找到 .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

第 1 步：查找错误

这意味着availableOptions是undefind所以Shopify.optionsMap[key]返回未定义。

你应该试试这个来调试。是否定义了键？如果 Shopify 对吗？ Shopify.optionsMap 是否存在？

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

第 2 步：使其更加全球化

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