Javascript shopify的“OptionSelectors”实际需要哪些参数？

我在这里转圈，我的idea/谷歌搜索都没了。有这么多不同的例子，但似乎都做了不同的事情或不工作。根据shopify的说法，这是我在使用他们的API时能找到的唯一文档：

我看到的一个幽灵对象，不管怎样，越来越多的搜索，我仍然不知道这个参数应该是什么

我尝试传递产品的json对象，正如我在其他各种主题示例中看到的那样：

  var product  = document.querySelector("[data-product-json]").innerHTML,
  product = JSON.parse(product || '{}');
  console.log(product);
  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect-' + product.id, {
      product: product,
      onVariantSelected: selectCallback
      });
  });

控制台日志提供了正确的对象和json，很好

选项选民出错：

Uncaught TypeError: Cannot read property 'parentNode' of null
    at Shopify.OptionSelectors.replaceSelector (option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1)
    at new Shopify.OptionSelectors (option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1)

我只给了它product.id和其他各种东西

---

我在这里一时兴起，说Shopify文档很详细，是的，但在我看来，它对开发人员不友好。他们给了你很多信息，但从来没有给你真正需要的。

你会遇到的问题是不同的主题会改变他们传递的信息。最好创建自己的事件处理程序来获取变量id并查找代码所需的变量详细信息

---

有关如何设置的一些提示，请参阅。

您将遇到的问题是，不同的主题会改变它们传递的内容。最好创建自己的事件处理程序来获取变量id并查找代码所需的变量详细信息

---

有关如何设置的一些提示，请参阅。

Shopify产品有一个非常简单但在某种程度上很奇怪的组织。首先，一个产品最多有三个选项。可以是空的。但是一旦你给一个变量分配了一个选项，它就会被填充。所以你有三个选择。姓名、尺寸、颜色、材质等等

变量具有选项的实际值。因此，如果您提供选项1作为大小，则变量的选项1将等于大小值，如大。重复并在其他选项中分层，直到变体可能有3个。现在，颠倒这个过程，只需获得一个ID，就可以更新价格或其他逻辑

因此，通过这种方式，最多100个变体可以有3个不同的选项，所有选项都不同。回到Shopify的早期，他们产生了一些代码，最终持续了大约十年，而你的OptionSelectors片段就是这种混乱的一个分支

挑战在于做那些旧代码所做的事情，但是为了你的主题。许多图书馆和主题正是这样做的。但请注意，他们也使用了一些代码，这些代码也不太容易分叉并用于您自己的目的

所以，如果你发现破解这个古老的Shopify代码是一种令人麻木的体验，你最好自己重新构建Humpty Dumpty，这样你就完全理解了它。您不需要使用他们的代码。这也是非常令人困惑的，因为当主题作者产生这个代码的另一个版本时，他们经常认为自己很聪明，可以重命名一些东西或针对一些不同的东西，从而使自己成为独特的、更熟练的玩家，但事实上，这只会增加你的痛苦，因为他们没有完成多少工作

---

是的，祝你在努力中一切顺利。分解代码并学习它是大多数主题作者经历的一种成年礼。是的，他们发誓。是的，它揭示了一些WTF时刻。但最终，你将控制你的变体，并获得荣耀。

Shopify产品有一个相当简单但在某种程度上很奇怪的组织。首先，一个产品最多有三个选项。可以是空的。但是一旦你给一个变量分配了一个选项，它就会被填充。所以你有三个选择。姓名、尺寸、颜色、材质等等

变量具有选项的实际值。因此，如果您提供选项1作为大小，则变量的选项1将等于大小值，如大。重复并在其他选项中分层，直到变体可能有3个。现在，颠倒这个过程，只需获得一个ID，就可以更新价格或其他逻辑

因此，通过这种方式，最多100个变体可以有3个不同的选项，所有选项都不同。回到Shopify的早期，他们产生了一些代码，最终持续了大约十年，而你的OptionSelectors片段就是这种混乱的一个分支

挑战在于做那些旧代码所做的事情，但是为了你的主题。许多图书馆和主题正是这样做的。但请注意，他们也使用了一些代码，这些代码也不太容易分叉并用于您自己的目的

所以，如果你发现破解这个古老的Shopify代码是一种令人麻木的体验，你最好自己重新构建Humpty Dumpty，这样你就完全理解了它。您不需要使用他们的代码。这也是非常令人困惑的，因为当主题作者产生另一个版本的代码时，他们通常认为自己很聪明，可以重命名一些东西或针对一些不同的东西，从而使自己成为独特的、更熟练的玩家，但事实上，这只会增加你的mise 因为他们没有取得多大成就

---

是的，祝你在努力中一切顺利。分解代码并学习它是大多数主题作者经历的一种成年礼。是的，他们发誓。是的，它揭示了一些WTF时刻。但最终，你会控制你的变种，并获得荣耀。

我强烈推荐David Lazar的答案，您需要花一些时间构建自己的功能，将产品选项和相关价值分解为客户友好的选项，然后将这些选项转换为单个有效的变体ID。这并不难，有时也有点困难有趣

但是，如果您只是想让OptionSelectors代码正常工作：

var product  = document.querySelector("[data-product-json]").innerHTML,
product = JSON.parse(product || '{}');
console.log(product);
jQuery(function($) {
  new Shopify.OptionSelectors('productSelect-' + product.id, {
    product: product,
    onVariantSelected: selectCallback
    });
});

进入函数的第一个参数是表单中通常隐藏的元素的ID，该元素将存储所选变量的ID值

从选项选择器代码中获取的错误：

  Uncaught TypeError: Cannot read property 'parentNode' of null

通常在代码找不到该元素时抛出

所以，要解决您的问题，在产品表单中，您只需要查找或创建一个name=id的输入字段，并确保该元素的id与您正在使用的内容相匹配

例如：

<input type="hidden" id="productSelect-{{ product.id }}" name="id" value="{{ product.selected_or_first_available_variant.id }}" />

---

或者，使用name=id查找您的输入，并从该字段中获取id属性，并将其用于您对OptionSelectors的呼叫中

我强烈推荐David Lazar的答案，您需要花一些时间构建自己的功能，这些功能可以将产品的选项和相关值分解为客户友好的选项，然后进行翻译将这些选择转换为一个有效的变体ID。这并不太难，有时也很有趣

但是，如果您只是想让OptionSelectors代码正常工作：

var product  = document.querySelector("[data-product-json]").innerHTML,
product = JSON.parse(product || '{}');
console.log(product);
jQuery(function($) {
  new Shopify.OptionSelectors('productSelect-' + product.id, {
    product: product,
    onVariantSelected: selectCallback
    });
});

进入函数的第一个参数是表单中通常隐藏的元素的ID，该元素将存储所选变量的ID值

从选项选择器代码中获取的错误：

  Uncaught TypeError: Cannot read property 'parentNode' of null

通常在代码找不到该元素时抛出

所以，要解决您的问题，在产品表单中，您只需要查找或创建一个name=id的输入字段，并确保该元素的id与您正在使用的内容相匹配

例如：

<input type="hidden" id="productSelect-{{ product.id }}" name="id" value="{{ product.selected_or_first_available_variant.id }}" />

---

或者，用name=id查找您的输入，并从该字段中获取id属性，并在您呼叫OptionSelectors时使用它

这些年来的头号难题是，从概念上讲，有一个元素携带id的值，但是多年来，编码人员使用一个可见元素来交付用户体验，而该元素与隐藏元素无关，只用于最终数据。因此，人们最终会挠头，为什么引用某些元素不起作用。接下来是如何收听某些事件，它们会按照您希望用户体验执行的顺序触发。所以一个变体的改变，应该会引发价格变化，小计更新，也许还有图像交换。是的，这就是为什么我同意你的观点，努力建立自己并获得荣誉是最好的答案：我最终建立了自己的，多亏了你的推荐@DavidLazar，虽然我很感激提供的关于如何使用OptionSelectors方法的信息。如果主题开发是标准化的，那就太好了。当然，大多数JS框架都没有明确的标准，但它们通常是一条最常被遵循的路径，并逐渐进入分叉。令人惊讶的是，一家规模如此之大的公司竟然以这种方式做某些事情。但是，嘿，软件开发是极其复杂的，尤其是在这种规模上，所以我理解。时间：这些年来的头号难题是，从概念上讲，有一个元素承载ID的值，但多年来编码人员使用可见元素来交付UX，而该元素与隐藏元素无关，它只将其用于最终数据。因此，人们最终会挠头，为什么引用某些元素不起作用。接下来是如何收听某些事件，它们会按照您希望用户体验执行的顺序触发。所以一个变体的改变，应该会引发价格变化，小计更新，也许还有图像交换。是的，这就是为什么我同意你的观点，努力建立自己并获得荣誉是最好的答案：我最终建立了自己的，多亏了你的推荐@DavidLazar，虽然我很感激提供的关于如何使用OptionSelectors方法的信息。如果主题开发是标准化的，那就太好了。当然，大多数JS框架都没有明确的标准，但它们通常是一条最常被遵循的路径，并逐渐进入分叉。令人惊讶的是，一家规模如此之大的公司竟然以这种方式做某些事情。但是，嘿，软件开发是极其复杂的，尤其是在这种规模上，所以我理解。及时：