FROM CACHE - jp_header
解決済

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

c-s
Shopify Partner
15 0 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 %}
</div>
{% endif %}

1 件の受理された解決策

Qcoltd
Shopify Partner
1050 429 412

成功

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

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

「カラー」と「サイズ」の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の何番目にカラーがあるかを数え上げて、その数値を使って、処理を書き換えてください。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1050 429 412

成功

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

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

「カラー」と「サイズ」の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の何番目にカラーがあるかを数え上げて、その数値を使って、処理を書き換えてください。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
c-s
Shopify Partner
15 0 1

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