Impactテーマにてバリエーション選択時の税込価格併記

[goodmido]

impactテーマを使用しておりますが、税抜価格の表示設定の横に税込価格を表記しているのですが、

以下のカスタマイズではバリエーションがある商品の場合、バリエーション違いの商品を選択した際の表示がうまくいきません。（一つ目の商品の金額が画面上に残り、選択した商品の税抜価格だけがその横にそのまま表示される）

こちらの記事も参考にさせていただいたのですが、テーマが違うということと、以前Dawnテーマで以下の実装で特にこの表記方法で問題がなかったので、impactテーマにて実装されたことがある方いらっしゃいましたらご教示いただきたいです。

<span class="base-price">
     {{ variant.price | times: 1.0 | money }}
</span>
<span class="taxin-price">
     (税込{{ variant.price | times: 1.1 | money }})
</span>

[Qcoltd]

興味があり調査してみました。

Imapctテーマは有料であるため、

トライアルで開発ストアにインストールして検証しました。

したがって、コード編集はできないため、

具体的な修正方法の指示はできないことご容赦ください。

少なくとも私がインストールした現時点での最新バージョンのImpactでは、

バリエーションを切り替えた際に、

ページ遷移が発生しません。

(ページ遷移: ブラウザ上でのページの読み込みのことです。)

参考にされた投稿の、

ベストソリューションに記載がある通り、

バリエーション変更時に、

JavaScriptでページの内容を書き換えているパターンに当てはまります。

記載いただいている下記のコードで、うまくいくパターンは下記の3つが想定されます。

1. バリエーション切り替え時にページ遷移が発生していた
2. 元々、こちらのDOM構造でJavaScriptがうまく機能するようになっていた
3. 全てのバリエーションの価格が同じだった

<span class="base-price">
     {{ variant.price | times: 1.0 | money }}
</span>
<span class="taxin-price">
     (税込{{ variant.price | times: 1.1 | money }})
</span>

さて、

もし、質問者様のストアにおいて、

全ての商品が「3. 全てのバリエーションの価格が同じだった」であった場合、

もしかしたら下記のようにすることでうまくいくかもしれません。

• まず、カスタマイズする前の状態に戻します。
• 価格を表示する部分のコードの付近に、下記のコードを追加します。

<span class="taxin-price">
     (税込{{ variant.price | times: 1.1 | money }})
</span>

そうではなく、

バリエーションごとに価格が異なる商品がある場合は、

JavaScriptでの実装か、

税込価格を表示することが可能になるアプリの導入かが、

必要になりそうです。

ご参考まで。

(キュー田辺)

[goodmido]

ご返信また、ご確認いただきありがとうございます！

今回一部の商品がバリエーションにより金額が異なるため、頂いた回答ではできず現在JSを実装しており、金額の表示は正しくなったのですが、今度はカートに入れた瞬間に表示されるドロワーの中の数字が正しく表示されなくなってしまいました。。。

できるだけJSでの実装をしたく、現在も調査中です＞＜

[Qcoltd]

@goodmido 様

商品詳細ページに表示される価格も、

カート投入のドロワーの中に表示される価格も、

そのspanタグに、

.finalPrice

という同じCSSクラスが付与されていますので、

もし、JavaScriptの書き換えのターゲットを、

.finalPriceにされている場合は、

意図せず、ドラワー内の価格も書き変わってしまうかもしれませんね。

その場合は、

コード編集で、

商品詳細ページのspanに新たにCSSクラスを付与し、

そのCSSクラスを書き換えのターゲットにされると良いかと存じます。

もし、

解決が難しい場合は、

プライベートメッセージでやりとりさせていただき、

コラボレーターアクセスを頂戴できれば、

もう少し具体的なアドバイスもできるかもしれません。

(キュー田辺)