javascript - SHOPIFY:如何根据特定变体显示 div

Question

我希望根据变体 ID 显示特定的 div。有 2 个 div，两者都包含自定义产品输入字段。当显示 div 1 时，div 2 中的字段应被禁用，反之亦然。

我该如何实现这个目标？

谢谢!

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。代码未测试!但这会给你一个想法。