バリエーション選択時に表示内容を切り替える方法はありますか？

[るん]

いつもお世話になっております。

Dawnを使用しています。

バリエーションにメタフィールドを設定して表示させ、バリエーション選択した際に表示を切り替える、といったことが可能でしたら行いたいです。

JavaScriptを使用し、バリエーション選択ボタンにchangeイベントが発生した際にテキスト内容を下記のように変更してみましたが、うまくいきませんでした。

{{ product.selected_or_first_available_variant.metafields.custom.value }}

おそらくページ読み込みをしないと

selected_or_first_available_variant

の部分がうまく反応してくれないのかなと思っています。

金額の表示は、バリエーションの選択を変更すると自動的に変更されるので、金額の実装方法がわかればヒントになるかもしれないと思っているのですが、コードをよく見てみても、勉強不足で私にはわかりませんでした。

金額の実装方法だけでもわかる方がいらっしゃいましたら、教えてください。

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

[KyoheiOgasawara]

るんさん、はじめまして。

Tsunの小笠原と申します。

Dawnをお使いの場合、バリエーションごとの価格表示はSnipets/price.liquid内で行われています。

price.liquidの上部でprice変数をselected_or_first_available_variantから取得して設定している箇所があります。

assign price = target.price | default: 1999

の箇所です。(targetには直前でproduct.selected_or_first_available_variantが代入されています)

price変数と同様に

assign test_metafield = target.metafields.custom.test_metafield.value

とすることで、バリエーションごとにtest_metafieldの値が変更されませんでしょうか？

手元の環境ではDawn v7.0.1で確認しています。

[るん]

株式会社Tsun

小笠原様

ご回答ありがとうございます。

確かにこの方法でしたら、バリエーションを切り替えるとメタフィールドの表示も切り替えることができますね！

金額のすぐ近くに表示したい場合はこの方法で実装できたのですが、金額から表示を離したい場合はどのようにすれば良いでしょうか？

こちらもよろしければ教えていただけると助かります。

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

[KyoheiOgasawara · Accepted solution]

るんさん、返信遅れてすみません。

> 金額のすぐ近くに表示したい場合はこの方法で実装できたのですが、金額から表示を離したい場合はどのようにすれば良いでしょうか？

Dawnの場合、price.liquid以外でやるにはJSの実装が必要です。

Dawnでバリエーションが変わった場合にprice.liquid部分が再レンダリングされる仕組みはassets/global.js内にあるVariantSelectsクラスで行われています。

ざっくりとした説明ですが、

1. バリエーションの変更をイベントで受け取る
2. バリエーションを変更したsectionの状態をfetch
3. price.liquidで表示している部分のHTMLのみ2でfetchしたものに入れ替え

によって金額の動的な変更がされています。

price.liquid以外の部分でも動的に変更するには、

上記で説明したVariantSelectsクラスのrenderProductInfoメソッド内で、動的に変更したい部分のHTMLを入れ替える処理を追加する

でできると思います。

一応別解として、こちらもJSによる実装が必要ですが、

バリエーションごとに切り替えたい要素をすべて非表示の状態でレンダリングさせておき、VariantSelectsクラスで選択されていない要素は非表示に切り替える(非表示のCSSをあてる等)

などでも対応できると思います。

[るん]

株式会社Tsun

小笠原様

お返事遅くなりまして申し訳ございません。

詳しく教えていただきましてありがとうございました。

まだコードの中身をきちんと理解できてはいないですが、教えていただいたことを参考にコードをよく見てみようと思います。

ありがとうございました。

[KyoheiOgasawara]

るんさん、参考になってよかったです。

JavaScriptでの実装部分もあるので、大変かと思いますが、またわからないことがあれば聞いてください！