SHOPIFY: как отобразить div в зависимости от варианта c

Question

I sh, чтобы показать спецификацию c div на основе идентификатора варианта. Есть 2 div, где оба содержат пользовательские поля ввода продукта. Когда показывается div 1, поля из div 2 должны быть отключены и наоборот.

Как мне сделать sh это?

Спасибо!

Answer 1

Вы можете сделать это

в выпадающем списке, добавив этот код

<select>
{% for variant in product.variants %}
<option data-variant="{{ variant.id }}">{{ variant.title }}</option>
{% endfor %}
</select>

````
{% for variant in product.variants %}
<div class="input_fields" id="div-{{ variant.id }}">
<p>content...</p>
</div>
{% endfor %}

Тогда у вас должен быть скрипт типа

$(function() {
$('select').on('change', function() {
var selected_variant = $(this).attr('data-variant');
$('.input_fields').hide();
$('#div-'+selected_variant).show();
});
});

PS. Код не проверен! Но это даст вам представление.