Есть ли способ обнаружить изменение варианта в Shopify с помощью внешнего файла Javascipt / jquery?

Question

Я написал внешний JS-скрипт, который показывает пользовательский текст на странице товара магазина. В настоящее время функция JS вызывается один раз для функции window.onload.

Я хочу, чтобы мой сценарий мог обнаруживать изменение варианта и заменять текст другим, когда выбран другой вариант. Как обнаружить изменение варианта и получить его цену во внешнем файле JS, используя только функцию JS / jQuery.

<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-рукав

Вам необходимо установить прослушиватель событий на элементе вашей страницы, который отвечает за изменение варианта. На странице выше это выбор, который позволяет клиентам изменять размер элемента.

Если вы открываете инспектор страниц и просматриваете код веб-сайта, элемент 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 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));