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

[nishi-ec]

Dawnを利用しています。

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

■実現したいこと

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

■困っていること

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

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

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

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

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

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

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

          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
            {%- endif -%}

            <span class="caption-large light">{{ block.settings.description | escape }}</span>

            {%- 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
              %}
              <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}">
                <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
              </div>
              <p class="rating-text caption">
                <span aria-hidden="true">{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}</span>
              </p>
              <p class="rating-count caption">
                <span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
                <span class="visually-hidden">{{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
              </p>
            {%- endif -%}

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

              {% render 'price', product: card_product, price_class: '' %}
            </div>
          </div>
        </div>

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

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

[株式会社フルバランス · Accepted solution]

Nishi-Ecさま

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

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

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

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

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

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

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

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

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

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

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

[nishi-ec]

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

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

{%  if value != blank %}

の部分を

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

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

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