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

Question

我想问一下有Shopify App开发经验的人，当从React组件单击切换按钮时，如何在“添加到购物车按钮”下将JS脚本注入product.template.liquid。

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

该脚本在页面上显示了虚假的观众人数。

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

非常感谢您的帮助！

Answer 1

我不知道直接在产品模板中添加脚本对您来说有多重要，但是可以使用来自 Shopify REST API 的资产资源来这样做。 您可以使用PUT请求更新product.template.liquid文件。 来自Shopify 文档的样品请求

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 代码段。 您可以根据您的切换按钮从客户端商店添加和删除脚本标签。 在我看来，这个解决方案要干净得多。 来自 Shopify Docs 的示例请求以创建Script Tag 。

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