Impactテーマで税抜価格の横に税込価格を併記する際、バリエーション商品で選択を切り替えると表示が正しく更新されない問題が発生しています。
問題の原因:
{{ variant.price | times: 1.1 | money }}形式）は、ページ遷移がある場合やDOM構造が対応している場合のみ有効現状の進捗:
提案された解決策:
.finalPriceから変更する.finalPriceクラスは商品ページとドロワーの両方で使用されているため、意図せずドロワー内の価格も書き換わる可能性があるコード編集によるより具体的なアドバイスには、コラボレーターアクセスが必要とのこと。
impactテーマを使用しておりますが、税抜価格の表示設定の横に税込価格を表記しているのですが、
以下のカスタマイズではバリエーションがある商品の場合、バリエーション違いの商品を選択した際の表示がうまくいきません。（一つ目の商品の金額が画面上に残り、選択した商品の税抜価格だけがその横にそのまま表示される）
こちらの記事も参考にさせていただいたのですが、テーマが違うということと、以前Dawnテーマで以下の実装で特にこの表記方法で問題がなかったので、impactテーマにて実装されたことがある方いらっしゃいましたらご教示いただきたいです。
{{ variant.price | times: 1.0 | money }}
(税込{{ variant.price | times: 1.1 | money }})
興味があり調査してみました。
Imapctテーマは有料であるため、
トライアルで開発ストアにインストールして検証しました。
したがって、コード編集はできないため、
具体的な修正方法の指示はできないことご容赦ください。
少なくとも私がインストールした現時点での最新バージョンのImpactでは、
バリエーションを切り替えた際に、
ページ遷移が発生しません。
(ページ遷移: ブラウザ上でのページの読み込みのことです。)
参考にされた投稿の、
ベストソリューションに記載がある通り、
バリエーション変更時に、
JavaScriptでページの内容を書き換えているパターンに当てはまります。
記載いただいている下記のコードで、うまくいくパターンは下記の3つが想定されます。
{{ variant.price | times: 1.0 | money }}
(税込{{ variant.price | times: 1.1 | money }})
さて、
もし、質問者様のストアにおいて、
全ての商品が「3. 全てのバリエーションの価格が同じだった」であった場合、
もしかしたら下記のようにすることでうまくいくかもしれません。
(税込{{ variant.price | times: 1.1 | money }})
そうではなく、
バリエーションごとに価格が異なる商品がある場合は、
JavaScriptでの実装か、
税込価格を表示することが可能になるアプリの導入かが、
必要になりそうです。
ご参考まで。
(キュー田辺)
ご返信また、ご確認いただきありがとうございます！
今回一部の商品がバリエーションにより金額が異なるため、頂いた回答ではできず現在JSを実装しており、金額の表示は正しくなったのですが、今度はカートに入れた瞬間に表示されるドロワーの中の数字が正しく表示されなくなってしまいました。。。
できるだけJSでの実装をしたく、現在も調査中です＞＜
商品詳細ページに表示される価格も、
カート投入のドロワーの中に表示される価格も、
そのspanタグに、
.finalPrice
という同じCSSクラスが付与されていますので、
もし、JavaScriptの書き換えのターゲットを、
.finalPriceにされている場合は、
意図せず、ドラワー内の価格も書き変わってしまうかもしれませんね。
その場合は、
コード編集で、
商品詳細ページのspanに新たにCSSクラスを付与し、
そのCSSクラスを書き換えのターゲットにされると良いかと存じます。
もし、
解決が難しい場合は、
プライベートメッセージでやりとりさせていただき、
コラボレーターアクセスを頂戴できれば、
もう少し具体的なアドバイスもできるかもしれません。
(キュー田辺)