Shopify：收藏页面上复杂的变体显示

我正在为客户设置一个定制的Shopify主题。他们的产品有不同的颜色和尺寸。我需要在收藏页面上单独显示每个颜色变体，但不将所有尺寸变体显示为单独的项目

然后，仍然在集合页面上，在每个产品项中，我需要显示该变体可用的尺寸范围

比如：

红色T恤 尺码：XS S M L XL XXL

蓝色T恤 尺码：XS S M L XL XXL

我一直在使用这篇文章中的解决方案：，这让我有了一部分的方法-我能够单独显示颜色变体，但现在我不知道如何将尺寸变体与产品一起输出

下面是我正在使用的代码的简化版本：

{% for product in collection.products %}

    {% for option in product.options %}

        {% if option == "Color" or option == "Colour" %}

            {% assign index = forloop.index0 %}
            {% assign colorlist = '' %}
            {% assign color = '' %}

            {% for variant in product.variants %}

                {% capture color %}
                    {{ variant.options[index] }}
                {% endcapture %}

                {% unless colorlist contains color %}

                    {% assign product = variant %}

                    <a class="product" href="{{ product.url | within: collection }}">

                        <img src="{{ product.featured_image.src | img_url: '480x480' }}">

                        {{ product.title }}

                        <ul class="product__sizes">
                            <!-- Need to output sizes here -->
                        </ul>

                    </a>

                    {% capture tempList %}
                        {{colorlist | append: color | append: ' '}}
                    {% endcapture %}

                    {% assign colorlist = tempList %}

                {% endunless %}

            {% endfor %}

        {% endif %}

    {% endfor %}

{% endfor %}

---

非常感谢您的帮助

您就快到了，但我必须稍微清理一下您的代码，因为您彼此之间有3个for，这是相当多的循环

以下是修改后的代码：

{% for product in collection.products %}
    {% assign options = product.options %}
    {% assign have_color = false %}
    {% assign size_index = false %}

    {% for option in options %}
        {% comment %}Check if there is a color option{% endcomment %}
        {% if option == "Color" or option == "Colour" %}
            {% assign have_color = forloop.index0 %}
        {% endif %}
        {% comment %}Get the size index{% endcomment %}
        {% if option == "Size" %}
            {% assign size_index = forloop.index0 %}
        {% endif %}
    {% endfor %}


    {% if have_color != false %}
        {% assign variants = product.variants %}
        {% assign colorlist = '' %}
        {% assign sizelist = '' %}
        {% assign color = '' %}

        {% comment %}Get All Sizes{% endcomment %}
        {% for variant in variants %}
            {% comment %}We use the @ to wrap the string since sizes tend to have parts of other sizes, example S,XS,L,XL,XXL{% endcomment %}
            {% assign string_check = variant.options[size_index] | append: '@' | prepend: '@' %}
            {% unless sizelist contains string_check %}
                {% capture sizelist %}{% unless forloop.first %}{{sizelist}},{% endunless %}@{{ variant.options[size_index] }}@{% endcapture %}
            {% endunless %}
        {% endfor %}

        {% assign sizelist_array = sizelist | replace: '@', '' | split: ',' %}

        {% for variant in variants %}
            {% capture color %}
                {{ variant.options[have_color] }}
            {% endcapture %}


            {% unless colorlist contains color %}

                {% assign product = variant %}

                <a class="product" href="{{ product.url | within: collection }}">

                    <img src="{{ product.featured_image.src | img_url: '480x480' }}">

                    {{ product.title }}
                    <ul class="product__sizes">
                      {% for size in sizelist_array %}
                        <li>
                            {{ size }}
                        </li>
                      {% endfor %}
                    </ul>

                </a>

                {% capture tempList %}
                  {{colorlist | append: color | append: ' '}}
                {% endcapture %}

                {% assign colorlist = tempList %}

            {% endunless %}

        {% endfor %}

    {% endif %}

{% endfor %}

我添加了变量，一个用于颜色检查，一个用于大小索引

{% for option in options %}
    {% comment %}Check if there is a color option{% endcomment %}
    {% if option == "Color" or option == "Colour" %}
        {% assign have_color = forloop.index0 %}
    {% endif %}
    {% comment %}Get the size index{% endcomment %}
    {% if option == "Size" %}
        {% assign size_index = forloop.index0 %}
    {% endif %}
{% endfor %}

{% assign sizelist = '' %}

在这个循环中，我们检查产品是否有颜色，并设置大小索引

{% for option in options %}
    {% comment %}Check if there is a color option{% endcomment %}
    {% if option == "Color" or option == "Colour" %}
        {% assign have_color = forloop.index0 %}
    {% endif %}
    {% comment %}Get the size index{% endcomment %}
    {% if option == "Size" %}
        {% assign size_index = forloop.index0 %}
    {% endif %}
{% endfor %}

{% assign sizelist = '' %}

我们创建另一个变量来保存所有大小

{% comment %}Get All Sizes{% endcomment %}
{% for variant in variants %}
    {% comment %}We use the @ to wrap the string since sizes tend to have parts of other sizes, example S,XS,L,XL,XXL{% endcomment %}
    {% assign string_check = variant.options[size_index] | append: '@' | prepend: '@' %}
    {% unless sizelist contains string_check %}
        {% capture sizelist %}{% unless forloop.first %}{{sizelist}},{% endunless %}@{{ variant.options[size_index] }}@{% endcapture %}
    {% endunless %}
{% endfor %}

在这里，我们用所有大小填充sizelist变量，我们使用@字符创建唯一的字符串，我们可以检查它们是否包含在列表中

{% assign sizelist_array = sizelist | replace: '@', '' | split: ',' %}

之后，我们从@character中清除填充的变量并将其拆分，以创建一个数组

<ul class="product__sizes">
    {% for size in sizelist_array %}
        <li>
            {{ size }}
        </li>
    {% endfor %}
</ul>

---

这是我们输出尺寸的美妙时刻。

哇，这是一个多么美妙的答案。非常感谢！这些尺码现在看起来不错。唯一的问题是，现在我得到了6个变型显示在收集的6个大小？而不是两种变体，每种颜色一种。有没有办法更新代码，使其只显示每种颜色的产品？哎呀，我忘了更新索引。现在我们将使用have_color变量作为索引，因为我们只使用它来检查产品是否有颜色。请参阅更新的代码。@Infobahn欢迎使用StackOverflow。“一定要把你们认为特别好的答案投到上面去。”斯科特·威尔逊我试过了，但因为我的声望不到15，所以我的投票没有显示出来！

{% comment %}Get All Sizes{% endcomment %}
{% for variant in variants %}
    {% comment %}We use the @ to wrap the string since sizes tend to have parts of other sizes, example S,XS,L,XL,XXL{% endcomment %}
    {% assign string_check = variant.options[size_index] | append: '@' | prepend: '@' %}
    {% unless sizelist contains string_check %}
        {% capture sizelist %}{% unless forloop.first %}{{sizelist}},{% endunless %}@{{ variant.options[size_index] }}@{% endcapture %}
    {% endunless %}
{% endfor %}