閲覧履歴を実装したのですが、価格表示をカスタマイズしたいです

日本語 ディスカッション Shopify テーマ
,

Topic summary

ユーザーが参考サイトを基に商品ページに閲覧履歴機能を実装したが、価格表示のカスタマイズに課題を抱えている。

希望する機能:

  • 「￥」マークを通貨セレクターに応じて自動変換
  • 価格の後ろにJPY、TWDなどの通貨単位を自動表示

提案された解決策:

簡易的な方法:

  • JavaScriptでShopify.currencyを参照し、単位とレートを取得
  • item.productPriceを再計算して単位を付与
  • ただし、Shopifyの標準出力と価格の下位桁がズレる可能性あり

正確な方法:

  • Local storageに商品ハンドルを保存
  • /products/{商品ハンドル}.jsonから現在の通貨設定に応じた価格情報を取得
  • Shopify.currencyから通貨単位を取得して組み合わせて出力
  • 注意点:閲覧履歴の数によっては処理時間がかかる

参考サイトの実装方法では要望の実現が難しいため、HTMLの書き出し部分の工夫が必要とのこと。

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

コードの公開をしている方を参考に、商品ページ内に閲覧履歴を実装しました。

（参考サイト：https://note.com/nomad_yuri/n/ne1ab3d35bfba）

無事に表示まではこぎつけたのですが、価格の部分をカスタマイズしたいと思っています。

希望としては以下の二点です。

「￥」マーク ⇒ 通貨セレクターに合わせて自動変換

価格の後ろに ⇒ JPYやTWDなど単位も自動で表示したい

もしご存知の方がいらっしゃいましたら教えて頂けないでしょうか。

どうぞよろしくお願いいたします。

2

@Anonymous_3a6dfd1ea4ec21ef34ba000a7dbe499b 様

参考サイトを拝見しましたが、

参考サイトのやり方ですと、

ご要望の実現は難しいかと思います。

もし、参考サイトのやり方を踏襲して実現されたい場合は、下記のHTMLの書き出し部分を工夫されると良いかと思います。

pdpData.forEach(function(item){ 
                recentViewHtml.push(`
                    
                `)
            })

item.productPrice

が、価格情報を出力している箇所ですので、下記のような調整をします。

  • JavaScriptで、 “Shopify.currency” を参照すると、単位とrateが取得できます。
  • この値で、item.productPriceを再計算および、単位の付与を行います。

しかし、この方法ですと、おそらく価格の下何桁かがShopifyが素直に出力する外貨価格とズレると思います。

正確な価格情報が欲しい場合は、下記のようにすると良いかと思います。

  • local storageに保存する情報を商品ハンドルにする
  • 閲覧履歴の出力時に、local storageに保存した商品ハンドルのリストを利用して、{質問者様のストアのドメイン}/products/{商品ハンドル}.jsonから、価格情報を取得する。ストア上で通貨設定が変わった状態であれば、この時、その通貨設定にあった商品価格が取得できるはずです。
  • Shopify.currencyから通貨単位を取得する
  • 情報を組み合わせて出力する

※閲覧履歴の数によっては処理に時間がかかります。

ご参考まで。

(キュー田辺)