# バリエーションを切り替えた時にメタフィールドの情報が反映されない。

**URL:** <https://community.shopify.com/t/topic/351220>\
**Category:** 技術的なQ＆A\
**Tags:** javascript\
**Created:** [August 23, 2024, 12:28am UTC](https://community.shopify.com/t/topic/351220 "2024-08-23T00:28:42Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

**問題の概要:**
Shopifyテーマ「Trade」で、バリエーション切り替え時にメタフィールドの説明文が即座に反映されず、ページをリロードしないと表示されない不具合が発生しています。

**実装内容:**
- バリエーションごとに異なる説明文を表示するため、メタフィールド（`custom._explanation`）を作成
- カスタムLiquidブロックにJavaScriptコードを追加し、バリエーション切り替えイベントをリスニング
- `variant-radios`要素のクリックイベントで動的に説明文を更新する仕組みを実装

**提案された解決策:**
- `querySelector`のセレクター指定を見直す必要がある
- コンソールでエラーや各部の動作を確認することで対応可能
- MDNのドキュメントを参考に、有効なCSSセレクター文字列を使用する

**現状:**
議論は継続中で、具体的な解決には至っていません。コードの一部が文字化けしており、詳細な検証が必要な状態です。

<div class="post-metadata">

**Author:** ![yuki15](https://avatars.discourse-cdn.com/v4/letter/y/e274bd/32.png) [@yuki15](https://community.shopify.com/u/yuki15)\
**Post date:** [August 23, 2024, 12:28am UTC](https://community.shopify.com/t/topic/351220/1 "2024-08-23T00:28:42Z")

</div>

テーマ「Trade」を使用しています。  
バリエーションごとに異なる説明文を表示させたいのですが、  
下記方法も試してみたのですが、リロードしないと反映されないです。

リロードするとメタフィールドの情報が表示されます。

1：バリエーションのメタフィールドを作成する（ネームスペースとキーはcustom.\_explanation）  
2：カスタマイズされたLiquidブロックを追加し下記のコードを入力

{%- assign nowVariantId = product.selected\_or\_first\_available\_variant.id -%}  
{%- for variant in product.variants -%}  
{% if variant.id == nowVariantId %}  
{%- assign optionText = variant.metafields.custom.\_explanation.value | newline\_to\_br -%}  
{% endif %}  
{%- endfor -%}

{{ optionText }}

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [August 27, 2024, 10:33am UTC](https://community.shopify.com/t/topic/351220/2 "2024-08-27T10:33:32Z")

</div>

ちゃんと読んでいませんがとりあえず以下が目についたので直してから、エラーや各部をコンソールなどで確認することで対応できるのではと思います。

- querySelectorのセレクター指定を見直す

参考:

[https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector)

> _文字列で、照合する 1 つ以上のセレクターを設定します。この文字列は妥当な CSS セレクターでなければなりません。_