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

实现代码 #

直接使用Shopify Liquid内置的variant.option_by_name方法获取对应规格值填充到属性即可，修改后的完整代码如下：

<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="product-variant-id">
 {% for variant in product.variants %}
    {% if variant.available %}
       <option data-size="{{ variant.option_by_name('Size') | escape }}" data-color="{{ variant.option_by_name('Color') | escape }}" value="{{ variant.id }}">{{ variant.title }}</option>
    {% endif %}
 {% endfor %}
 </select>
 {% if product.available %}
    <input type="hidden" min="1" 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>

说明 #

• variant.option_by_name参数需要和你Shopify后台设置的产品选项名完全匹配，如果你后台的选项名是中文「尺码」「颜色」，对应修改为variant.option_by_name('尺码')和variant.option_by_name('颜色')即可
• 已修正原代码中两处逻辑问题：
  • 隐藏选择框的id属性取值错误问题
  • 加购按钮判断条件错误（原代码直接调用循环外的variant变量，会导致判断失效）
• 代码中增加的escape过滤器用于转义特殊字符，避免属性值异常

内容的提问来源于stack exchange，提问作者Anupam Mistry