Shopify 通过应用与产品页面 HTML 交互答案

【问题标题】：Shopify Interact with product page HTML via appShopify 通过应用与产品页面 HTML 交互
【发布时间】：2020-01-24 15:56:32
【问题描述】：

我们计划创建一个 Shopify 应用，但我们面临一些问题，需要在文档中找到如何与页面交互。

我不确定我们是否必须要求每次用户添加代码等，所以我需要知道我是否错过了什么。

我需要通过应用与 Shopify 中的产品页面进行交互。

我为此搜索并阅读了所有网络，所有内容都是如何开始的，但不是实际示例。

我知道 ScriptTags 以及如何包含它们，但就是这样。如果有人可以给我一个简单的例子，例如如何隐藏“购买”按钮并在上面插入一些东西。

我知道如何使用 JQuery 的默认主题来选择它，但是所有其他主题呢？

【问题讨论】：

【解决方案1】：

与首页交互有两种方式：

1) 在页面中注入一些代码（现场代码）

2) 使用您提到的 ScriptTag。

代码注入脚本将修改产品模板，如果您希望自动执行此操作，或者您可以指示用户自己执行此操作，但如果他们不是精通代码可能会有问题。

此外，在大多数情况下，此代码仅适用于实时主题。如果用户喜欢在特定时间删除您的应用程序，您必须确保以这样一种方式编写逻辑，即如果您的应用程序不再存在，它不会影响站点（因为清理自动添加代码后的文件）

对于这种方法，您需要使用 Asset API。

您需要将带有GET request 的文件内容添加到文件中并创建put request 以更新它。

更好的方法是使用 ScriptTag API。

这将允许使用将附加在每个主题上的脚本文件。这不会以任何形式或形状修改主题文件。

这似乎是您正在寻找的方法。

请记住，您将是从您的应用程序托管文件的人，因此您几乎可以在那里编写您喜欢的任何内容。因此，如果您喜欢使用 jQuery，您必须确保主题已包含 jQuery，否则您必须在脚本中添加 jQuery 核心代码。

【讨论】：

感谢您的冗长回答，但我已经知道这一点，但我仍然不明白 - 例如如何在某处添加一个脚本来隐藏购买按钮。
@MartinTonev 好吧，您只需为隐藏部分编写 JS 并使用 API 创建一个 ScriptTag。我不明白你的困惑。该脚本将出现在每个页面上，因此只要您定位按钮，您就可以做任何您想做的事情。该脚本由您托管，当您通过 ScriptTag API 注册它时，Shopify 会自动在主题中链接到它，因此您无需执行任何其他操作。
感谢您的回复，但正如我在问题中解释的那样，我知道什么是 ScriptTag 以及它是如何工作的。如何为所有主题提供通用的东西？例如，我将通过 $('#ID) 来定位按钮，但如果用户使用不同的主题并且此 ID 不同怎么办？
@MartinTonev 你不能。每个主题都可能有自己的添加到购物车按钮的实现，没有通用的类或名称。强制用户为按钮设置类或其他内容，或在您的应用中添加选项以允许管理员设置目标类。
谢谢，这是我的问题，我只是在想这么大的产品必须有像 Hooks 之类的东西，我想我错过了什么。但这怎么可能，即使 WordPress 对此也有严格的规定，开发人员可以围绕它构建一切？