課題: Dawnテーマでバリエーション選択時にメタフィールドの表示内容を動的に切り替えたい。JavaScriptでchangeイベントを使った実装を試みたが、うまく動作しなかった。
解決策:
価格表示の近くに配置する場合: Snippets/price.liquid内で、price変数と同様にassign test_metafield = target.metafields.custom.test_metafield.valueのようにメタフィールドを取得すれば、バリエーション変更時に自動で切り替わる。
価格表示から離れた場所に配置する場合: JavaScriptでの実装が必要。assets/global.js内のVariantSelectsクラスが、バリエーション変更時にprice.liquid部分を再レンダリングする仕組みを持っている。VariantSelectsクラスのrenderProductInfoメソッド内で、fetchしたHTMLの該当部分を動的に入れ替える処理を追加することで対応可能。
現状: 質問者はコードの理解が完全ではないため、提供された情報を参考にしながら実装を進めている段階。回答者は引き続きサポートを提供する意向を示している。
いつもお世話になっております。
Dawnを使用しています。
バリエーションにメタフィールドを設定して表示させ、バリエーション選択した際に表示を切り替える、といったことが可能でしたら行いたいです。
JavaScriptを使用し、バリエーション選択ボタンにchangeイベントが発生した際にテキスト内容を下記のように変更してみましたが、うまくいきませんでした。
{{ product.selected_or_first_available_variant.metafields.custom.value }}
おそらくページ読み込みをしないと
selected_or_first_available_variant
の部分がうまく反応してくれないのかなと思っています。
金額の表示は、バリエーションの選択を変更すると自動的に変更されるので、金額の実装方法がわかればヒントになるかもしれないと思っているのですが、コードをよく見てみても、勉強不足で私にはわかりませんでした。
金額の実装方法だけでもわかる方がいらっしゃいましたら、教えてください。
よろしくお願いいたします。
るんさん、はじめまして。
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
小笠原様
ご回答ありがとうございます。
確かにこの方法でしたら、バリエーションを切り替えるとメタフィールドの表示も切り替えることができますね！
金額のすぐ近くに表示したい場合はこの方法で実装できたのですが、金額から表示を離したい場合はどのようにすれば良いでしょうか？
こちらもよろしければ教えていただけると助かります。
よろしくお願いいたします。
るんさん、返信遅れてすみません。
金額のすぐ近くに表示したい場合はこの方法で実装できたのですが、金額から表示を離したい場合はどのようにすれば良いでしょうか？
Dawnの場合、price.liquid以外でやるにはJSの実装が必要です。
Dawnでバリエーションが変わった場合にprice.liquid部分が再レンダリングされる仕組みはassets/global.js内にあるVariantSelectsクラスで行われています。
ざっくりとした説明ですが、
によって金額の動的な変更がされています。
price.liquid以外の部分でも動的に変更するには、
上記で説明したVariantSelectsクラスのrenderProductInfoメソッド内で、動的に変更したい部分のHTMLを入れ替える処理を追加する
でできると思います。
一応別解として、こちらもJSによる実装が必要ですが、
バリエーションごとに切り替えたい要素をすべて非表示の状態でレンダリングさせておき、VariantSelectsクラスで選択されていない要素は非表示に切り替える(非表示のCSSをあてる等)
などでも対応できると思います。
株式会社Tsun
小笠原様
お返事遅くなりまして申し訳ございません。
詳しく教えていただきましてありがとうございました。
まだコードの中身をきちんと理解できてはいないですが、教えていただいたことを参考にコードをよく見てみようと思います。
ありがとうございました。
るんさん、参考になってよかったです。
JavaScriptでの実装部分もあるので、大変かと思いますが、またわからないことがあれば聞いてください！