Shopify：产品系列页面上复杂的变体显示

Question

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

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

所以像这样：

T 恤（红色）

尺码：XS S M L XL XXL

T 恤（蓝色）

尺码：XS S M L XL XXL

我一直在使用这个 post 中的解决方案：Shopify show color variants in collection but not size variant，这让我完成了部分工作 - 我能够单独显示颜色变体，但现在我'我不确定如何随产品一起输出尺寸变体。

这是我使用的代码的简化版本：

{% 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 %}

非常感谢任何帮助！

Answer 1

你快到了，但我不得不稍微清理一下你的代码，因为你有 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 循环中取出了 color 检查，在同一个循环中我得到了 size 选项索引。此外，还有一个单独的循环来填充大小列表变量。

这是额外添加的项目的代码分解：

{% 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 %}

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

{% 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: ',' %}

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

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

这是我们输出尺寸的甜蜜时刻。

Shopify：产品系列页面上复杂的变体显示

Shopify: Complicated variant display on collection pages

liquid

shopify

T 恤（红色）

T 恤（蓝色）