如何與 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"
  }
}