FROM CACHE - jp_header

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

解決済
nishi-ec
遊覧客
23 1 2

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>

 

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

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

1 件の受理された解決策

ベストソリューション
株式会社フルバランス
Shopify Partner
639 180 398

成功

Nishi-Ecさま


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


当方で検証したところ、下記方法で出力ができました。
1、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 %}

 


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

 

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

 

 

スクリーンショット 2022-08-10 11.22.18.png


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


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


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

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ECの技術・実務・成長、お悩みのことがあれば、気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2
株式会社フルバランス
Shopify Partner
639 180 398

成功

Nishi-Ecさま


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


当方で検証したところ、下記方法で出力ができました。
1、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 %}

 


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

 

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

 

 

スクリーンショット 2022-08-10 11.22.18.png


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


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


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

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ECの技術・実務・成長、お悩みのことがあれば、気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
nishi-ec
遊覧客
23 1 2

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

 

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

 

{%  if value != blank %}

 

の部分を

 

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


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

 

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