FROM CACHE - jp_header

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

nayao
観光客
10 0 1

テーマはDawnを使用しています。

コレクションページの商品価格の上に、オプション「入数」のバリエーションを表示して、

「この商品には1個、5個、10個入りがある」ということを示したいです。

 

card-product.liquidの {% render 'price' %}の上あたりに追記が必要だと思うのですが、

下記のディスカッションを参考に試してみましたが、全く表示されません。

 

https://community.shopify.com/c/shopify-design/adding-size-variations-to-collection-page/m-p/1241482

https://community.shopify.com/c/technical-q-a/product-variations-display/m-p/537977

 

ちなみに、一つ目のリンクのコードでは売り切れのバリエーションは表示しない条件分岐がありますが(多分・・)、在庫状況にかかわらず表示は出したいです。

アドバイスいただけると助かります。よろしくお願いいたします。

4件の返信4
st_mh
遊覧客
15 6 7

商品情報からオプションを参照し、表示させる方法は「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. 最後の要素の後には何も追加されませんので、別途記述しておきます。
nayao
観光客
10 0 1

早速のご返信ありがとうございます。

挿入する場所としては、card-product.liquid でいいのでしょうか。

st_mh
遊覧客
15 6 7

同じ状況にないもので、確実なことが言えまないのですが、少なくとも{% render 'price' %}と同じ場所で大丈夫です。

つまりcard-product.liquidですね。

nayao
観光客
10 0 1

ありがとうございます!やってみます。