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

解決済
Taito
新規メンバー
1 0 0

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

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

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

 

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

 

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

グループ 1.png

1 件の受理された解決策

ベストソリューション
Sota_yohaku
観光客
9 4 3

成功

初めまして、清水と申します。
バリエーションの変更で値段が変わる仕組みはテーマによると思いますが、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で検出して表示するコンテンツを操作しました。

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

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

元の投稿で解決策を見る

1件の返信1
Sota_yohaku
観光客
9 4 3

成功

初めまして、清水と申します。
バリエーションの変更で値段が変わる仕組みはテーマによると思いますが、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で検出して表示するコンテンツを操作しました。

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

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

元の投稿で解決策を見る