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

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

我已经使用Node.js和React（Polaris框架）安装了一个应用程序，我可以与Shopify进行连接和身份验证。我还编写了JS脚本，当我将其直接添加到product.template.liquid页面时，该脚本可以正常工作。现在我想把这两个连接起来

该脚本在页面上显示了虚假的浏览人数

我想做的是，如果this.state==已启用，则显示该脚本；如果this.state==已禁用，则隐藏该脚本

---

非常感谢你的帮助

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

---

嘿，谢谢你的回答。这太棒了！我按照您给出的线程和这里的教程：我现在如何从scriptTag加载脚本？ScriptTag有一个属性：“event”：“onload”触发脚本加载的DOM事件。有效值：onload。我在我的js脚本中这样使用这个属性：如果我想在app安装中加载脚本，我该怎么做？我是否需要以任何方式使用apollo来实现这一点？我已经阅读了这里的教程，但我不确定如何将这些示例应用到我的需要中。@DigitalDom

event:onload

意味着您的JavaScript将包含在客户端的Shopify存储中。在JS文件（创建脚本标记时使用的URL）中，只需像对待Product.liquid一样编写普通的JavaScript代码。非常感谢。对于将来有类似问题的其他人。这里有一个人在这个帖子里：。他设法做了类似的事情。也许这对你有用。

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>"
  }
}

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