shopify 的 'OptionSelectors' 实际需要哪些参数？

Question

我在这运行个圈子，我不知道's/google 搜索。有这么多不同的例子，但似乎都做了不同的事情或不起作用。根据 shopify 的说法，这是我使用他们的 API 可以找到的 only 文档：https://shopify.dev/tutorials/customize-theme-use-products-with-multiple-options

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

我曾尝试传递 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，不错。

OptionSelectors 错误：

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 文档很详细，是的，但我认为它不对开发人员友好。他们给了你这么多信息，但从来没有你真正需要的。

Answer 1

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

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

Answer 2

Shopify 产品的组织方式非常简单，但在某种程度上很奇怪。首先，一个产品有一系列最多三个被称为选项的东西。可以为空。但是，一旦您将一个选项分配给一个变体，它就会被填充。所以您有三个选项。例如：名称、尺寸、颜色、Material 等等。

变体具有选项的实际值。因此，如果您提供选项 1 作为大小，变体的选项 1 将等于大小值，例如“大”。重复并在其他选项中分层，直到变体可能有 3 个。现在，反转该过程以简单地获取 ID，以便您可以更新价格或其他一些逻辑！

所以这样一来，最多100个变体可以有3个不同的选项，都是不同的。回到早期的 Shopify，他们产生了一些代码，这些代码最终持续了大约十年，而你的 OptionSelectors 片段是那个烂摊子的一个分支。

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

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

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

Answer 3

我强烈推荐 David Lazar 的回答，你需要一些时间来构建自己的函数，这些函数可以将产品的选项和相关值分解为 customer-friendly 选项，然后将它们转换选择转换为单个有效的变体 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 值。

您从 OptionSelectors 代码中得到的错误：

  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 时使用它）

shopify 的 'OptionSelectors' 实际需要哪些参数？

What parameters does shopify's 'OptionSelectors' actually need?

javascript

liquid

shopify