コレクションページにバリエーションを表示する方法

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

商品情報からオプションを参照し、表示させる方法は「options_by_name」が合致するものと思います。

（参考）https://shopify.dev/api/liquid/objects#product

[例文]

例えば、私の管理サイトでは、商品にオプション「カラー」を設定しています。

出力方法はいくつかあり、簡単な方法は以下です。

{% for value in product.options_by_name['カラー'].values %}
    {{ value }}
{% endfor %}
または
{{ product.options_by_name['カラー'].values }}
↓↓

ブラック ホワイト グリーン etc

（例はテキストを並べるだけ）

おそらく、オプション「入数」にも複数の値が設定されるかと思います。

また表示結果の文字列に手を加える必要もあります。

  • （表示結果）1個、5個、10個
    • 個数の間に「個、」という文字を追加
    • かつ最後の個数の後は「個」と表記

[対処法]

この商品には{{ product.options_by_name['入数'].values | join: '個、' }}個入りがある
  1. 簡潔に、目的のオプションの配列をフィルタ付きで出力します。
  2. フィルタ「| join: ‘文字列’」で、値の間に任意の文字列を追加します。
  3. 最後の要素の後には何も追加されませんので、別途記述しておきます。
1 Like