我的 Shopify 应用程序用它自己的形式替换了产品页面的“添加到购物车”表单/产品表单。决定是否渲染整个<form>的是Liquid逻辑。元素。
这效果很好，但在某些主题上(例如 Shopify 的 Jumpstart)，产品页面完全错误，向我抛出一个错误:
option_selection.js - can't access its "parentNode" property
我相信是 option_selection.js 函数，它在页面上的某处查找选择框/变体 ID。
当然，这个变体 ID/选择框不存在，因为它没有被渲染。
如何在满足 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 函数返回 true 值时，添加的代码段才会计算为 false。这种情况会阻止新的 Shopify.OptionSelectors 部分运行，因为我们使用 && 作为一种短路/紧急停止操作。
如果您的应用加载失败(或在未更新液体代码的情况下从商店中卸载)，或者如果 MyAppNamespace.isProdHidden 返回 false，则添加的 block 的代码计算结果为 true 并且新的 Shopify.OptionSelectors 正常发生。
上述内容相当于将整个 new Shopify.OptionSelectors 调用包装在 if 语句中，其安装优势是安装您的应用的一方不需要阅读主题代码以找出 OptionSelectors 调用的结束位置。在大多数主题中，OptionSelectors 代码分布在多行中，偶尔主题开发人员将其 onVariantChange 函数声明为内联匿名函数 - 对于经验丰富的开发人员来说，这两者都不是大障碍，但对于没有这种专业知识的新手和店主来说，这是一个巨大的复杂性。
就主题安装兼容性而言，通过 Javascript 以某种方式提供应用程序的状态可能是您要做的最好的事情。有些主题的 OptionSelectors 调用直接在产品页面中，这可能会受到动态 Liquid 变量的影响，但许多主题都将此代码隐藏在 Assets 文件夹中的 .js 文件中。还有一些主题根本不使用 Shopify 的 OptionSelectors 代码，而是运行自己的东西，因此您的应用可能会以完全意想不到的方式或位置进行干扰。因此，创建工具来更轻松地将您的应用程序集成到其他人的代码中是您可以做的最好的事情之一。
您还需要确保您的代码能够处理多种产品，因为许多商店在整个网站上都有快速商店，可以加载任意产品表单。通过确保您已经提供了可用的工具，您、您的支持团队(如果有)和主题开发人员就可以对(几乎!)任何任意主题进行所需的更新。
希望有帮助!
关于javascript - 我的 Shopify 应用程序替换了产品表单 - option_selection.js 中断 : can't access its "parentNode" property，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53565073/