shopify如何分别显示尺码和颜色？

Question

我想在前端单独显示颜色和尺寸以过滤 shopify 中的集合。但是当我这样做时，它在同一个带有斜线的变量中显示颜色和大小。

这是图片

这是我尝试的代码

      <div class="size-filter clearfix mt-4">
         <h4>SIZE</h4>
         <hr>
         {% assign available_sizes = '' %}
         {% for product in collections.frontpage.products limit: limit %}
         {% for variant in product.variants %}
         {% if variant.title != 'Default Title' %}
         {% unless available_sizes contains variant.title %}
         {% if  variant.available %}
         {% capture available_sizes %}{{ available_sizes }}, {{ variant.title }}{% endcapture %}
         <div class="form-check">
            <input class="form-check-input coll-filter" type="checkbox" value="{{variant.title}}" id=""
            {% if current_tags contains tag %} checked  {%endif%}>
            <label class="form-check-label" for="">
            {{variant.title}}
            </label>
         </div>
         {% endif %}
         {% endunless %}
         {% endif %}
         {% endfor %}
         {% endfor %}
      </div>

请帮我解决这个错误，我过去 3 天一直卡在这里。

错误已解决但得到此输出：

Answer 1

您可以使用 options_with_values 对象：

{% for product_option in product.options_with_values %}
  <h5>{{ product_option.name }}</h5>
  {% for value in product_option.values %}
    <input id="{{product_option|handle}}-{{value|handle}}" type="checkbox" value="{{ value }}" />
    <label for="{{product_option|handle}}-{{value|handle}}"></label>
  {% endfor %}
{% endfor %}

但是您需要编写一些 Javascript 以便将其绑定到包含变体 ID 的主要 select。

shopify如何分别显示尺码和颜色？

How to show size and colors separately in shoplify?

shopify