# バリエーション選択時に表示内容を切り替える方法はありますか？ **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [December 9, 2022, 8:06am UTC](https://community.shopify.com/t/topic/174960 "2022-12-09T08:06:39Z")\ **Posts on this page:** 6\ **Page:** 1 ## AI-generated summary **課題:** 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の該当部分を動的に入れ替える処理を追加することで対応可能。 **現状:** 質問者はコードの理解が完全ではないため、提供された情報を参考にしながら実装を進めている段階。回答者は引き続きサポートを提供する意向を示している。
**Author:** ![Anonymous\_876e90207c84eec074dc8f1fbdf1c908](https://avatars.discourse-cdn.com/v4/letter/a/e99b99/32.png) [@Anonymous\_876e90207c84eec074dc8f1fbdf1c908](https://community.shopify.com/u/Anonymous_876e90207c84eec074dc8f1fbdf1c908)\ **Post date:** [December 9, 2022, 8:06am UTC](https://community.shopify.com/t/topic/174960/1 "2022-12-09T08:06:39Z")
いつもお世話になっております。 Dawnを使用しています。 バリエーションにメタフィールドを設定して表示させ、バリエーション選択した際に表示を切り替える、といったことが可能でしたら行いたいです。 JavaScriptを使用し、バリエーション選択ボタンにchangeイベントが発生した際にテキスト内容を下記のように変更してみましたが、うまくいきませんでした。 ```markup {{ product.selected_or_first_available_variant.metafields.custom.value }} ``` おそらくページ読み込みをしないと ```markup selected_or_first_available_variant ``` の部分がうまく反応してくれないのかなと思っています。 金額の表示は、バリエーションの選択を変更すると自動的に変更されるので、金額の実装方法がわかればヒントになるかもしれないと思っているのですが、コードをよく見てみても、勉強不足で私にはわかりませんでした。 金額の実装方法だけでもわかる方がいらっしゃいましたら、教えてください。 よろしくお願いいたします。 ---
**Author:** ![ogasawarakyohei](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/ogasawarakyohei/32/28415_2.png) [@ogasawarakyohei](https://community.shopify.com/u/ogasawarakyohei)\ **Post date:** [December 11, 2022, 9:13am UTC](https://community.shopify.com/t/topic/174960/2 "2022-12-11T09:13:01Z")
るんさん、はじめまして。 Tsunの小笠原と申します。 Dawnをお使いの場合、バリエーションごとの価格表示はSnipets/price.liquid内で行われています。 price.liquidの上部でprice変数をselected\_or\_first\_available\_variantから取得して設定している箇所があります。 ```markup assign price = target.price | default: 1999 ``` の箇所です。(targetには直前でproduct.selected\_or\_first\_available\_variantが代入されています) price変数と同様に ```markup assign test_metafield = target.metafields.custom.test_metafield.value ``` とすることで、バリエーションごとにtest\_metafieldの値が変更されませんでしょうか？ 手元の環境ではDawn v7.0.1で確認しています。 ---
**Author:** ![Anonymous\_876e90207c84eec074dc8f1fbdf1c908](https://avatars.discourse-cdn.com/v4/letter/a/e99b99/32.png) [@Anonymous\_876e90207c84eec074dc8f1fbdf1c908](https://community.shopify.com/u/Anonymous_876e90207c84eec074dc8f1fbdf1c908)\ **Post date:** [December 13, 2022, 1:57am UTC](https://community.shopify.com/t/topic/174960/3 "2022-12-13T01:57:44Z")
株式会社Tsun 小笠原様 ご回答ありがとうございます。 確かにこの方法でしたら、バリエーションを切り替えるとメタフィールドの表示も切り替えることができますね！ 金額のすぐ近くに表示したい場合はこの方法で実装できたのですが、金額から表示を離したい場合はどのようにすれば良いでしょうか？ こちらもよろしければ教えていただけると助かります。 よろしくお願いいたします。 ---
**Author:** ![ogasawarakyohei](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/ogasawarakyohei/32/28415_2.png) [@ogasawarakyohei](https://community.shopify.com/u/ogasawarakyohei)\ **Post date:** [December 16, 2022, 11:38pm UTC](https://community.shopify.com/t/topic/174960/4 "2022-12-16T23:38:42Z")
るんさん、返信遅れてすみません。 > 金額のすぐ近くに表示したい場合はこの方法で実装できたのですが、金額から表示を離したい場合はどのようにすれば良いでしょうか？ 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をあてる等) などでも対応できると思います。 ---
**Author:** ![Anonymous\_876e90207c84eec074dc8f1fbdf1c908](https://avatars.discourse-cdn.com/v4/letter/a/e99b99/32.png) [@Anonymous\_876e90207c84eec074dc8f1fbdf1c908](https://community.shopify.com/u/Anonymous_876e90207c84eec074dc8f1fbdf1c908)\ **Post date:** [December 21, 2022, 8:19am UTC](https://community.shopify.com/t/topic/174960/5 "2022-12-21T08:19:42Z")
株式会社Tsun 小笠原様 お返事遅くなりまして申し訳ございません。 詳しく教えていただきましてありがとうございました。 まだコードの中身をきちんと理解できてはいないですが、教えていただいたことを参考にコードをよく見てみようと思います。 ありがとうございました。 ---
**Author:** ![ogasawarakyohei](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/ogasawarakyohei/32/28415_2.png) [@ogasawarakyohei](https://community.shopify.com/u/ogasawarakyohei)\ **Post date:** [December 22, 2022, 12:14pm UTC](https://community.shopify.com/t/topic/174960/6 "2022-12-22T12:14:14Z")
るんさん、参考になってよかったです。 JavaScriptでの実装部分もあるので、大変かと思いますが、またわからないことがあれば聞いてください！