我的 Shopify 应用替换了产品表单 - option_selection.js 中断：无法访问其 "parentNode" 属性
My Shopify app replaces the product form - option_selection.js breaks: can't access its "parentNode" property
我的 Shopify 应用程序将产品页面 'Add To Cart' 表格/产品表格替换为自己的表格。决定是否渲染整个 <form> 元素的是 Liquid 逻辑。
效果很好，但在某些主题上（例如 Shopify 的 Jumpstart），产品页面完全出错，向我抛出一条错误消息：
option_selection.js - can't access its "parentNode" property
我认为这是 option_selection.js 函数，它在页面某处寻找 select 框/变体 ID。
当然，这个变体 ID / select 框不存在，因为它没有被渲染。
如何在满足 option_selection.js 功能的同时替换添加到购物车表单？
通常这没什么大不了的，但 Shopify 的应用审查团队会给我带来问题，特别是在 Jumpstart 主题上，这个错误会导致产品照片无法呈现；完全破坏页面。
有什么想法吗？非常感谢！
砍掉整个产品形式似乎有点极端——没有办法以一种侵入性较小的方式做你需要做的事情吗？
假设没有，您将需要扩展安装，以便您可以更新主题中初始化产品表单的任何代码，以考虑到您违背了主题的简单假设的可能性。
为了 option_selection.js 兼容性，您将查找 new Shopify.OptionSelectors 被调用的位置。如果您的代码通过 Javascript 设置了一个变量，这可能是最容易进行的检查。假设您的代码创建了一个名为 MyAppNamespace.isProdHidden:
的函数的内联安装示例
原文：
new Shopify.OptionSelectors( ...
已更新：
!(window.MyAppNamespace && MyAppNamespace.isProdHidden({{ product.id | json }}) ) && new Shopify.OptionSelectors( ...
当且仅当您的应用程序已正确加载并且您的 isProdHidden 函数 returns 为真值时，添加的代码段将评估为 false。这种情况会阻止 new Shopify.OptionSelectors 部分出现 运行ning，因为我们使用 && 作为一种 short-circuit/emergency-stop 操作。
如果您的应用无法加载（或在未更新 liquid 代码的情况下从商店中卸载），或者如果 MyAppNamespace.isProdHidden returns false，则添加的代码块评估为 true 并且 new Shopify.OptionSelectors 正常发生。
以上相当于将整个 new Shopify.OptionSelectors 调用包装在 if 语句中，安装的好处是安装您的应用程序的一方无需阅读主题代码即可弄清楚OptionSelectors 通话结束的地方。在大多数主题中，OptionSelectors 代码分布在多行中，偶尔主题开发人员将他们的 onVariantChange 函数声明为内联匿名函数——这对有经验的开发人员来说都不是什么大障碍，但对新手来说却是一个巨大的复杂问题和没有这种专业知识的店主。
就主题安装兼容性而言，通过 Javascript 以某种方式提供您的应用程序状态可能是您最好的选择。一些主题的 OptionSelectors 调用权在产品页面中，这可能会受到动态 Liquid 变量的影响，但许多主题将此代码隐藏在资产文件夹中的 .js 文件中。还有一些主题根本不使用 Shopify 的 OptionSelectors 代码，而是 运行 它们自己的东西，因此您的应用可能会以完全意想不到的方式或地方进行干扰。因此，创建工具以便更轻松地将您的应用程序集成到其他人的代码中是您可以做的最好的事情之一。
您还需要确保您的代码能够处理多种产品，因为许多商店在整个网站上都有快速商店，可以加载任意产品形式。通过确保您已提供这些工具，您、您的支持团队（如果有的话）和主题开发人员可以对（几乎！）任何任意主题进行必要的更新。
希望对您有所帮助！
我的 Shopify 应用程序将产品页面 'Add To Cart' 表格/产品表格替换为自己的表格。决定是否渲染整个 <form> 元素的是 Liquid 逻辑。
效果很好，但在某些主题上（例如 Shopify 的 Jumpstart），产品页面完全出错，向我抛出一条错误消息：
option_selection.js - can't access its "parentNode" property
我认为这是 option_selection.js 函数，它在页面某处寻找 select 框/变体 ID。
当然，这个变体 ID / select 框不存在，因为它没有被渲染。
如何在满足 option_selection.js 功能的同时替换添加到购物车表单？
通常这没什么大不了的，但 Shopify 的应用审查团队会给我带来问题，特别是在 Jumpstart 主题上，这个错误会导致产品照片无法呈现；完全破坏页面。
有什么想法吗？非常感谢！
砍掉整个产品形式似乎有点极端——没有办法以一种侵入性较小的方式做你需要做的事情吗？
假设没有，您将需要扩展安装，以便您可以更新主题中初始化产品表单的任何代码，以考虑到您违背了主题的简单假设的可能性。
为了 option_selection.js 兼容性，您将查找 new Shopify.OptionSelectors 被调用的位置。如果您的代码通过 Javascript 设置了一个变量，这可能是最容易进行的检查。假设您的代码创建了一个名为 MyAppNamespace.isProdHidden:
原文：
new Shopify.OptionSelectors( ...
已更新：
!(window.MyAppNamespace && MyAppNamespace.isProdHidden({{ product.id | json }}) ) && new Shopify.OptionSelectors( ...
当且仅当您的应用程序已正确加载并且您的 isProdHidden 函数 returns 为真值时，添加的代码段将评估为 false。这种情况会阻止 new Shopify.OptionSelectors 部分出现 运行ning，因为我们使用 && 作为一种 short-circuit/emergency-stop 操作。
如果您的应用无法加载（或在未更新 liquid 代码的情况下从商店中卸载），或者如果 MyAppNamespace.isProdHidden returns false，则添加的代码块评估为 true 并且 new Shopify.OptionSelectors 正常发生。
以上相当于将整个 new Shopify.OptionSelectors 调用包装在 if 语句中，安装的好处是安装您的应用程序的一方无需阅读主题代码即可弄清楚OptionSelectors 通话结束的地方。在大多数主题中，OptionSelectors 代码分布在多行中，偶尔主题开发人员将他们的 onVariantChange 函数声明为内联匿名函数——这对有经验的开发人员来说都不是什么大障碍，但对新手来说却是一个巨大的复杂问题和没有这种专业知识的店主。
就主题安装兼容性而言，通过 Javascript 以某种方式提供您的应用程序状态可能是您最好的选择。一些主题的 OptionSelectors 调用权在产品页面中，这可能会受到动态 Liquid 变量的影响，但许多主题将此代码隐藏在资产文件夹中的 .js 文件中。还有一些主题根本不使用 Shopify 的 OptionSelectors 代码，而是 运行 它们自己的东西，因此您的应用可能会以完全意想不到的方式或地方进行干扰。因此，创建工具以便更轻松地将您的应用程序集成到其他人的代码中是您可以做的最好的事情之一。
您还需要确保您的代码能够处理多种产品，因为许多商店在整个网站上都有快速商店，可以加载任意产品形式。通过确保您已提供这些工具，您、您的支持团队（如果有的话）和主题开发人员可以对（几乎！）任何任意主题进行必要的更新。
希望对您有所帮助！