有没有办法使用外部Javascript/jquery文件检测Shopify中的变体更改？

Question

我编写了一个外部JS脚本，它可以在商店产品页面上显示自定义文本。目前这个JS函数只会在window.onload函数中被调用一次。

我希望我的脚本能够检测到变体的更改，并在选择不同的变体时将文本替换为不同的文本。如何使用只有JS/jQuery函数，在外部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>");
};

- Mahi

Answer 1

这取决于您的主题结构如何。假设您正在使用Debut主题：
https://debut-demo.myshopify.com/products/laptop-sleeve 您需要在负责变体更改的页面元素上设置事件监听器。在上面的页面中，它是一个选择器，允许客户更改物品大小。

如果您打开页面检查器并预览网站代码，则选择元素具有以下结构：

<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 detectChange(element) {
    var value = element.value;
    var myDiv = document.getElementById("mydiv");
    myDiv.innerHTML += `<p>${value}</p>`;
}

然后在 select 元素中将该函数作为事件监听器添加：

<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));

- Lukasz Formela