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

**URL:** <https://community.shopify.com/t/impact/210469>\
**Category:** Shopify テーマ\
**Created:** [April 23, 2023, 4:11am UTC](https://community.shopify.com/t/impact/210469 "2023-04-23T04:11:45Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

Impactテーマで税抜価格の横に税込価格を併記する際、バリエーション商品で選択を切り替えると表示が正しく更新されない問題が発生しています。

**問題の原因:**
- Impactテーマはバリエーション切り替え時にページ遷移せず、JavaScriptで内容を書き換える仕様
- 参考記事のコード（`{{ variant.price | times: 1.1 | money }}`形式）は、ページ遷移がある場合やDOM構造が対応している場合のみ有効
- バリエーションごとに価格が異なる場合、JavaScriptでの追加実装が必要

**現状の進捗:**
- 質問者はJavaScriptを実装し、商品詳細ページの価格表示は正しく動作
- しかし、カート投入時に表示される一時的なドロワー内の数字表示が正しく更新されない新たな問題が発生

**提案された解決策:**
- 商品詳細ページのspanタグに新しいCSSクラスを付与し、JavaScriptの書き換えターゲットを`.finalPrice`から変更する
- `.finalPrice`クラスは商品ページとドロワーの両方で使用されているため、意図せずドロワー内の価格も書き換わる可能性がある

コード編集によるより具体的なアドバイスには、コラボレーターアクセスが必要とのこと。

<div class="post-metadata">

**Author:** ![goodmido](https://avatars.discourse-cdn.com/v4/letter/g/c68b51/32.png) [@goodmido](https://community.shopify.com/u/goodmido)\
**Post date:** [April 23, 2023, 4:11am UTC](https://community.shopify.com/t/impact/210469/1 "2023-04-23T04:11:45Z")

</div>

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

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

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

```php

     {{ variant.price | times: 1.0 | money }}

     (税込{{ variant.price | times: 1.1 | money }})

```

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [April 27, 2023, 9:47am UTC](https://community.shopify.com/t/impact/210469/2 "2023-04-27T09:47:11Z")

</div>

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

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

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

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

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

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

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

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

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

参考にされた投稿の、

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

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

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

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

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

```markup

     {{ variant.price | times: 1.0 | money }}

     (税込{{ variant.price | times: 1.1 | money }})

```

さて、

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

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

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

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

```markup

     (税込{{ variant.price | times: 1.1 | money }})

```

そうではなく、

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

JavaScriptでの実装か、

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

必要になりそうです。

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![goodmido](https://avatars.discourse-cdn.com/v4/letter/g/c68b51/32.png) [@goodmido](https://community.shopify.com/u/goodmido)\
**Post date:** [April 28, 2023, 9:20am UTC](https://community.shopify.com/t/impact/210469/3 "2023-04-28T09:20:16Z")

</div>

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

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

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

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [April 28, 2023, 9:53am UTC](https://community.shopify.com/t/impact/210469/4 "2023-04-28T09:53:59Z")

</div>

@goodmido 様

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

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

そのspanタグに、

.finalPrice

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

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

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

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

その場合は、

コード編集で、

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

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

もし、

解決が難しい場合は、

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

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

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

(キュー田辺)