Liquid、JavaScriptなどに関する質問
お世話になります。
Taitoと申します。
現在、商品ページのバリエーションごとに値段が自動で変わる仕組みについて調べているのですが、解決できておりません。
どういった仕組みでバリエーションごとに自動で変更されるか、ご教示いただけると幸いです。
宜しくお願いたします。
▼経緯
・バリエーションごとにある、メタフィールドの値をバリエーションごとに出力したい(値段の部分のように自動で変更される)
・値段の部分の仕組みがわかれば、応用がきくのではないか、と考えた
↓以下の画像は商品は同じ商品ですが、バリエーションが違うので(サイズ;S,M,L)値段が変わっています。
解決済! ベストソリューションを見る。
成功
初めまして、清水と申します。
バリエーションの変更で値段が変わる仕組みはテーマによると思いますが、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つのものにしか対応していないですが、ループさえ書ければ幾らか応用が利くと思います。
ほしい回答ではないかもしれないですが参考にどうぞ。
成功
初めまして、清水と申します。
バリエーションの変更で値段が変わる仕組みはテーマによると思いますが、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つのものにしか対応していないですが、ループさえ書ければ幾らか応用が利くと思います。
ほしい回答ではないかもしれないですが参考にどうぞ。
ユーザー | ランク |
---|---|
43 | |
30 | |
21 | |
4 | |
3 |
山田繊維株式会社(むす美)は京都の地で風呂敷製造卸売業:山田貫七商店として昭和12年に創業。メイン商材は1000年以上前から使われているという記録がある風呂敷で、その他ハンカチや袱...
By Nanami Jan 12, 2023過去に失われた売り上げを回復するには?Shopifyの新しい自動化機能を活用し、失われた売り上げを簡単に回復する方法を学びましょう!
By Mirai Jan 10, 2023オンラインストアの構築が完了しましたら、一般公開をする前にいくつかのテスト注文を行い、チェックアウトプロセスを確認することが大事です。Shopifyペイメントをご利用いただいている...
By rinaflora Dec 4, 2022