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