javascript - 是否有办法使用外部 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>");
};

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

或者将监听器绑定(bind)到元素:

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