# 商品ページでバリエーションごとに値段が自動で変更する仕組みについて。

**URL:** <https://community.shopify.com/t/topic/73759>\
**Category:** 技術的なQ＆A\
**Created:** [October 23, 2021, 9:23am UTC](https://community.shopify.com/t/topic/73759 "2021-10-23T09:23:39Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

・商品ページでバリエーション選択時に価格が自動切替される仕組みを把握し、その応用でバリエーションごとのメタフィールドを自動表示したいという相談。画像で同一商品のサイズ違い（S/M/L）により価格が変わる例が示されている。

・最新の見解：実装はテーマ依存で、ShopifyのDebutテーマではJavaScript（theme.js）が価格切替を担う可能性が高い。theme.jsを削除すると動作しないという未確認情報がある。

・提案されたアプローチ：価格の仕組みを直接流用せず、ページ表示時に全バリエーションのメタフィールドを出力。バリエーション変更をjQueryのchangeイベント（選択変更の検知）で捉え、表示コンテンツを切り替える。

・コードの要点：Liquidでproduct.variantsをループし、variant.metafields.namespace.keyを事前出力。フロント側で現在選択バリエーションのみを表示するようDOM操作。

・注意点：提示コードは即席・未検証で、バリエーションが1種類の場合のみ想定。複数オプション対応には追加のループや実装が必要。

・結論／状態：価格自動切替の具体コードや最終解決は提示されておらず、議論は未解決・継続中。画像は挙動の補足で中心資料ではない。

<div class="post-metadata">

**Author:** ![Taito](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/taito/32/263981_2.png) [@Taito](https://community.shopify.com/u/Taito)\
**Post date:** [October 23, 2021, 9:23am UTC](https://community.shopify.com/t/topic/73759/1 "2021-10-23T09:23:39Z")

</div>

お世話になります。  
Taitoと申します。

現在、商品ページのバリエーションごとに値段が自動で変わる仕組みについて調べているのですが、解決できておりません。

どういった仕組みでバリエーションごとに自動で変更されるか、ご教示いただけると幸いです。  
宜しくお願いたします。

**▼経緯**  
・バリエーションごとにある、メタフィールドの値をバリエーションごとに出力したい（値段の部分のように自動で変更される）  
・値段の部分の仕組みがわかれば、応用がきくのではないか、と考えた

↓以下の画像は商品は同じ商品ですが、バリエーションが違うので（サイズ；S,M,L）値段が変わっています。

 ![グループ 1.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/6/16882d27bde0dc73bc095631ebad6e2cef1d557b.png)

---

<div class="post-metadata">

**Author:** ![Sota\_yohaku](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Sota\_yohaku](https://community.shopify.com/u/Sota_yohaku)\
**Post date:** [October 25, 2021, 1:24am UTC](https://community.shopify.com/t/topic/73759/2 "2021-10-25T01:24:51Z")

</div>

初めまして、清水と申します。  
バリエーションの変更で値段が変わる仕組みはテーマによると思いますが、debutの場合はjavascriptで操作していたと思います。  
該当のソースコードは見ていないですが、theme.jsを消すと動かなかったような気がします(未確認)。

根本的な解決になるか分かりませんが、僕も一度バリエーションごとに商品説明をメタフィールドで設定し、バリエーションの変更があった場合商品説明を切り替えるページを作成しました。  
その時のコードをまるまる貼ることができないので似たようなコードを用意しました。

```ruby
{% comment %} バリエーションの最初のブロックのみ表示 {% endcomment %}

{% comment %} バリエーションのメタフィールドを出力 {% endcomment %}
{% for variant in product.variants %}
  {{ variant.metafields.namespace.key }}

{% endfor %}

{% comment %} バリエーションのメタフィールドの表示切り替え {% endcomment %}

```

バリエーションでの値段切り替えを応用する場合、用意されたコードを読んで理解する必要があるためそれは避けました。  
行ったことはページが表示される段階でバリエーションの全てのメタフィールドを出力しておき、バリエーションの変更をjqueryのchageで検出して表示するコンテンツを操作しました。

上記のコードは即席で書いたため実装確認してませんが、大体のコードの雰囲気はこんな感じです。バリエーションも１つのものにしか対応していないですが、ループさえ書ければ幾らか応用が利くと思います。

ほしい回答ではないかもしれないですが参考にどうぞ。