バリエーションの一覧表示を重複しないようにしたい

日本語 ディスカッション 技術的なQ＆A
1

現在、バリエーション登録している商品を、商品一覧に表示されるように実装してあります。

※商品タグに「not to be displayed separately」を付けた場合は一覧表示されない。

この場合、オプションが1つのみであれば問題ないのですが、商品に複数のオプションがあると重複して表示されてしまいます。

例えば、Tシャツに「カラー（2色）」「サイズ（3サイズ）」あった場合

2×3+2×3＝12 で12のバリエーションが一覧として表示されます。

そのため、オプションが複数ある商品は、1つのオプションのみ一覧表示させる、

などの条件を加えたいです。

ご教授いただけたら幸いです。

よろしくお願いいたします。

main-collectionに以下を記述

{% for product in collection.products %}
{% assign variation = false %}
{% assign variationsItem = false %}
{% if product.tags contains ‘not to be displayed separately’ %}
{% assign variationsItem = true %}
{% endif %}

{% if product.variants.size > 1 and variationsItem == false %}
{% assign variation = true %}
{% for option in product.options %}
{% for variant in product.variants %}
{% render ‘product-block-variant’,mainproduct:product, product: variant, custom_aspect_ratio: chosen_aspect_ratio, animate: true %}
{% endfor %}
{% endfor %}
{% endif %}
{% if variation == false %}
{% render ‘product-block’, product: product, custom_aspect_ratio: chosen_aspect_ratio, animate: true %}
{% endif %}
{% endfor %}

{% endif %}
2

汎用的な解決方法ではありませんが、

例で示されているように、

「カラー」と「サイズ」の2つのオプションがある場合にのみ回答いたします。

通常、「カラー」だけを表示されたいと思いますので、下記のようにされてはいかがでしょうか？

※動作確認はしておりません。

{% for product in collection.products %}
    {% assign variation = false %}
    {% assign variationsItem = false %}
    {% if product.tags contains 'not to be displayed separately' %}
        {% assign variationsItem = true %}
    {% endif %}

    {% if product.variants.size > 1 and variationsItem == false %}
        {% assign variation = true %}
        {% assign has_two_options = false %}
        {% if product.options contains 'カラー' and product.options contains 'サイズ' %}
            {% assign has_two_options = true %}
        {% endif %}
        {% if has_two_options %}
            {% for option in product.options %}
                {% if option.name == 'カラー' %}
                    {% assign variant_colors = '' %}
                    {% for variant in product.variants %}
                        {% unless variant_colors contains variant.option1 %}
                            {% render 'product-block-variant',mainproduct:product, product: variant, custom_aspect_ratio: chosen_aspect_ratio, animate: true %}
                            {% assign variant_colors = variant_colors | append: variant.option1 | append: ',' %}
                        {% endunless %}
                    {% endfor %}
                {% endif %}
            {% endfor %}
        {% else %}
            {% for variant in product.variants %}
                {% render 'product-block-variant',mainproduct:product, product: variant, custom_aspect_ratio: chosen_aspect_ratio, animate: true %}
            {% endfor %}
        {% endif %}
    {% endif %}
    {% if variation == false %}
        {% render 'product-block', product: product, custom_aspect_ratio: chosen_aspect_ratio, animate: true %}
    {% endif %}
{% endfor %}

  • カラーとサイズ、2つのオプションを持つ時だけ特殊処理をします。

  • optionの1つ目がカラーであることを前提としています。カラーが入る順番に応じて、

    {% unless variant_colors contains variant.option1 %}を書き換えてください。

    もし何番目にカラーが入るかを固定化できない場合は、product.optionsの何番目にカラーがあるかを数え上げて、その数値を使って、処理を書き換えてください。

ご参考まで。

(キュー田辺)

3

ご教示ありがとうございます！