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中的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代码段。您可以基于“切换”按钮从客户端存储中添加和删除脚本标记。我认为该解决方案更加干净。来自Shopify Docs的示例请求，以创建Script Tag。

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

如何与Shopify店面进行通信并将JS代码段添加到产品页面

1 个答案: