是否有使用外部 Javascript/jquery 文件檢測 Shopify 中的變體變化？

Question

我編寫了一個在商店產品頁面上顯示自定義文本的外部 JS 腳本。 目前，JS function 被調用一次，在 window.onload function 上。

我希望我的腳本能夠檢測到變體更改並將文本換成不同的，只要選擇了不同的變體。 如何僅使用 JS/jQuery function 在外部 JS 文件中檢測變體更改並獲取其價格。

<script id="testscript" src="https://example.com/test.js?amount=${{ product.price | divided_by: 100.00 | round: 2 }}"></script>
<div id="mydiv"></div>

My code in test.js:
window.onload = function () {
    document.getElementById("mydiv").innerHTML += ("<p>This is a test.</p>");
};

Answer 1

這取決於您的主題結構如何。 假設您使用的是 Debut 主題：
https://debut-demo.myshopify.com/products/laptop-sleeve

您需要在負責變體更改的頁面元素上設置一個事件偵聽器。 在上面的頁面上，它是一個 select，允許客戶更改項目大小。

如果打開頁面檢查器並預覽網站代碼，select 元素具有以下結構：

<select class="single-option-selector single-option-selector-product-template product-form__input" id="SingleOptionSelector-0" data-index="option1">                    
    <option value="13”" selected="selected">13”</option>
    <option value="15”">15”</option>
</select>

您可以通過多種方式實現它。 第一步是在你的 JS 文件中創建這樣的 function ：

function detectChange(element) {
    var value = element.value;
    var myDiv = document.getElementById("mydiv");
    myDiv.innerHTML += `<p>${value}</p>`;
}

然后在select元素中添加 function 作為事件偵聽器：

<select class="single-option-selector single-option-selector-product-template product-form__input" id="SingleOptionSelector-0" data-index="option1" onchange="detectChange(this)">

或者將監聽器綁定到一個元素：

document.getElementById("SingleOptionSelector-0").addEventListener("change", detectChange(this));