如何在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 评论我不需要 option.value 在 Shopify 的 product.variants 循环中。我只是添加 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>

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

How to call option.value in the loop of product.variants in Shopify?

shopify