商品詳細ページにて、値段表示をもう一つ設置したのですが、SKUごとに違う値段がうまく動きません。

日本語 ディスカッション 技術的なQ＆A
, ,

Topic summary

商品詳細ページにデフォルト以外の場所へ価格表示を追加したが、SKU（バリエーション）変更時に価格が自動更新されない問題が発生。

技術的な原因：

  • Dawnテーマでは、バリエーション変更による価格更新はJavaScriptのVariantSelects内のrenderProductInfo関数で処理される
  • 価格情報はID（price-${this.dataset.section}形式）で取得・更新されるため、同じIDが複数存在すると最初の1つしか更新されない

解決方法：

  • 追加した価格表示要素をclassで取得できるよう、HTMLとJavaScriptを修正
  • 複数の要素を繰り返し処理で更新するロジックに変更
  • IDではなくclassベースで価格情報を取得・更新する実装が必要

質問者は自力で解決できたと報告し、クローズ。

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

商品詳細ページにて、値段表示をもう一つ設置したのですが、SKUごとに違う値段がうまく動きません。

デフォルトの値段表示以外の場所にもう一つ設置したのですが、件名の通りうまく動きません。

更新せずに自動で値段が変わるようにしたいのですが…

なにかいい方法はありませんか？

コピペで張り付けてバリエーションピッカーなど他は機能しています。

バリエーション変えた後に更新すればその商品の値段に変わるのですがどうしたらよいですか？

以下該当箇所のコード
2

@FF31 様

おそらくDawnをお使いだと思いますので、Dawn 11.0.0を前提に回答いたします。

商品詳細ページでのバリエーション変更による、商品情報の更新は、JavaScriptにより行われます。

具体的に言いますと、

スニペット > global.js の

VariantSelectsの定義の中の、

renderProductInfoという関数で実行しています。

具体的に言いますと、

下記の処理で、destionationに現在の価格情報のHTML、sourceに変更後の価格情報のHTMLが格納され、

const destination = document.getElementById(`price-${this.dataset.section}`);
        const source = html.getElementById(
          `price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`
        );

下記の処理で、「現在の価格情報のHTML」が、「変更後の価格情報のHTML」に書き換わります。

if (source && destination) destination.innerHTML = source.innerHTML;

上記、処理をご覧いただくとわかる通り、価格情報のHTMLは、idで取得されます。

prive-template-xxxxxxxxxxxxx-main のようなidです。

同じidが1つのHTML上に存在する場合、getElementByIdでは最初の1つしか取得されません。

そのため、価格情報をliquid上で増やしても、JavaScriptの書き換え対象にならないのです。

これを修正するには、

JSとHTMLの改修が必要になります。

例えば、idではなくclassで情報を取得するように、JSとHTMLを改修しつつ、

さらに、classに変更することで取得できた複数の要素を、

繰り返し処理で更新するようにすれば良いかと思います。

ご参考まで。

(キュー田辺)

3

詳しくありがとうございます。
自力でできたのですが、後から読んでも参考になりました。
また何かあったら相談させてください。

1 Like