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

[Taito]

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

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

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

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

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

[Sota_yohaku · Accepted solution]

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

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

{% comment %} バリエーションの最初のブロックのみ表示 {% endcomment %}
<style>
  .variant { display: none }
  .variant:first-of-type { display: block }
</style>

{% comment %} バリエーションのメタフィールドを出力 {% endcomment %}
{% for variant in product.variants %}
  <div class="variant" data-name="{{ variant.title }}">{{ variant.metafields.namespace.key }}</div>
{% endfor %}

{% comment %} バリエーションのメタフィールドの表示切り替え {% endcomment %}
<script>
  $(function(){
    // バリエーション変更をトリガー
    $('select').change(function(){
      // 全ての.variantを非表示
      $('.variant').css('display','none');
      // 選択されたバリエーションのvalueを取得
      select_chage_value = $(this).val();
      // .variantを繰り返し処理
      $('.variant').each(function(index, element){
        // 選択したバリエーションと.variantのdata-name属性が一致するものを検出
        if(select_chage_value == $(this).data('name')) {
          // 一致したものを表示
          $(this).css('display','none');
        }
      })
    });
  });
</script>

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

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

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