コレクションページへ商品のオプション情報（option.value）を表示する方法

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

Dawnを利用しています。

コレクションページへ商品オプション情報（例 カラー：レッドの「レッド」）を表示したいのですが、うまく表示されず、ご助言頂けると幸いです。

■実現したいこと

コレクションページのデフォルトの表示では、商品画像の下に商品名と金額が表示されていますが、金額の横にその商品の任意のオプション情報（例 カラー：レッドの「レッド」）を表示させたいです。

■困っていること

オプション情報はおそらくoption.valueで出力できると予測し、

card-product.liquid内の以下の金額表示のコードの上部に

{% render 'price', product: card_product, price_class: '' %}

以下のコードを追加してみましたが、何も表示されません。

{%- if option.values != empty -%}
                {{ option.value }}
              {%- endif -%}

{{ option.value }}のみでも表示はされませんでした。

該当部分の全体のコードを以下に記述します。


            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ card_product.vendor }}

            {%- endif -%}

            {{ block.settings.description | escape }}

            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              

                
              

              

                {{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
              

              

                ({{ card_product.metafields.reviews.rating_count }})
                {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
              

            {%- endif -%}

{% comment %} 追加部分ここから {% endcomment %}
            
              {%- if option.values != empty -%}
                {{ option.value }}
              {%- endif -%}
{% comment %} ここまで {% endcomment %}

              {% render 'price', product: card_product, price_class: '' %}

お気づきの点がございましたらアドバイス頂けますと幸いです。

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

2

Nishi-Ecさま

おそらくoptionの値をfor文で取得していないのが原因かと思われます。

当方で検証したところ、下記方法で出力ができました。
１、option.liquidというsnippetを作成し下記コードを記入

すべてのオプションを取得する場合：

{% for product_option in product.options_with_values %}
    {% for value in product_option.values %}
      {%  if value != blank %}
       {{ value }}
      {% endif %}
    {% endfor %}
{% endfor %}

特定のオプションだけ取得する場合：

{% for color_option in product.options_by_name['Color'].values %}
{% if color_option != blank %}
{{ color_option }}
{% endif %}
{% endfor %}

２、card-product.liquidに作成したsnippetを読み込む

{% render 'option', product: card_product %}

スクリーンショット 2022-08-10 11.22.18.png
スクリーンショット 2022-08-10 11.22.18.png456×500 7.48 KB

参考記事：https://qiita.com/eijiSaito/items/37769a88d95e67a38253

参考になりましたら幸いです。
またお困りのことがございましたら、ぜひご質問ください。

株式会社フルバランス 渡邉

1 Like
3

ご回答ありがとうございます！ご教示頂いたコードで実現できました。

【すべてのオプションを取得する場合】の実施時に、オプションを指定していない商品に「Default Title」という文字が表示されてしまいましたため、

{%  if value != blank %}

の部分を

{% if value != 'Default Title' %}

に変更したところ、意図した動作となりました。

分かりやすくご教示頂き大変助かりました。