如何与 Shopify Storefront 通信并将 JS 片段添加到产品页面答案

【问题标题】：How to communicate with Shopify Storefront and add JS snippet to Product Page如何与 Shopify Storefront 通信并将 JS 片段添加到产品页面
【发布时间】：2020-08-12 12:07:51
【问题描述】：

想请教有Shopify App开发经验的人，当点击React组件中的Toggle按钮时，如何将JS脚本注入到“添加到购物车按钮”下的product.template.liquid中。

我已经使用 Node.js 和 React（Polaris 框架）设置了一个应用程序，我可以使用 Shopify 进行连接和身份验证。当我将它直接添加到 product.template.liquid 页面时，我还编写了正在运行的 JS 脚本。现在我想把这两者联系起来。

脚本在页面上显示了虚假的查看人数。

如果 this.state == enabled，我想做的是显示这个脚本，如果 this.state == disabled，则隐藏这个脚本。

非常感谢您的帮助！

【问题讨论】：

标签： javascript node.js reactjs shopify shopify-app

【解决方案1】：

我不知道直接在产品模板中添加脚本对您来说有多重要，但可以使用 Shopify REST API 中的Asset resource 来实现。您可以使用 PUT 请求更新 product.template.liquid 文件。来自Shopify Docs的示例请求

PUT /admin/api/2020-07/themes/828155753/assets.json
{
  "asset": {
    "key": "templates/index.liquid",
    "value": "<img src='backsoon-postit.png'><p>We are busy updating the store for you and will be back within the hour.</p>"
  }
}

或者，您可以使用 ScriptTag 来包含您的 JavaScript sn-p。您可以根据您的切换按钮从客户端商店添加和删除脚本标签。在我看来，这个解决方案要干净得多。 Shopify Docs 创建Script Tag 的示例请求。

POST /admin/api/2020-07/script_tags.json
{
  "script_tag": {
    "event": "onload",
    "src": "https://djavaskripped.org/fancy.js"
  }
}

【讨论】：

您好，谢谢您的回答。这太棒了！我设法按照您提供的线程和此处的教程使用 GraphQL 突变创建了一个 scriptTag：shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/… 我现在如何从 scriptTag 加载脚本？ ScriptTag 有一个属性： "event": "onload" 触发脚本加载的 DOM 事件。有效值：onload。我在我的 js 脚本中使用这个属性：如果我想在应用安装时加载脚本，我该怎么做？
我需要以任何方式使用阿波罗来实现这一切吗？我已经从这里shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/… 阅读了教程，但我不确定如何将这些示例应用于我的需要。
@DigitalDom event: onload 表示您的 JavaScript 将包含在您客户端的 Shopify 商店中。在 JS 文件（创建脚本标签时使用的 URL）中，只需像对 Product.liquid 所做的那样编写普通的 JavaScript 代码。
非常感谢。对于将来有类似问题的其他人。在这个线程中有一个人：community.shopify.com/c/Shopify-APIs-SDKs/…。他设法做了类似的事情。也许它会对你有用。