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

Topic summary

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

実装内容:

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

提案された解決策:

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

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

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.

テーマ「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 }}

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

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

参考:

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

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