如何在Shopify中的product.variants循环中调用option.value

Question

我有一个隐藏的下拉列表和两个variant-selector下拉列表

一个下拉菜单用于color，另一个下拉列表用于size

我想在name=id的下拉列表中添加data-size=""中的size数据和data-color=""中的color数据。

<form method="post" action="/cart/add">          
{% if product.variants.size > 1 %} 
{% for option in product.options_with_values %}          
<select  class="variant-selector {{option.name}}" data-var="{{forloop.index}}">
{% if product.available %}
{% for values in option.values %}
<option value="{{values}}">{{values}}</option>
{% endfor %}
{% endif %}
</select>
{% endfor %}

<select name="id" style="display:none;" id="data{{forloop.index}}">
{% for variant in product.variants %}
{% if variant.available %}
<option data-size="" data-color="" value="{{ variant.id }}"  >{{ variant.title }}</option>
{% endif %}
{% endfor %}
</select>
{% if variant.available%}
<input type="hidden" min="1" type="number" name="quantity" value="1" />
<input type="submit" value="{{ 'products.product.add_to_cart' | t }}"  class="btn add-to-cart" />
{% else %}
<input type="submit" value="{{ 'products.product.sold_out' | t }}"  class="btn add-to-cart" disabled="disabled">
{% endif %}
{% endif %}
</form>

Answer 1

作为Dave B的评论，我不需要在Shopify中的product.variants循环中使用option.value。我只需添加data-size="{{ variant.option1 }}"和data-color="{{ variant.option2 }}"

<select name="id" style="display:none;" id="data{{forloop.index}}">             
{% for variant in product.variants %}
{% if variant.available %}             
<option data-size="{{ variant.option1 }}" data-color="{{ variant.option2 }}" value="{{ variant.id }}"  >{{ variant.title }}</option>             
{% endif %}
{% endfor %}             
</select>