【shopify】商品価格をJSで表示切り替え
下記のようなシチュエーションに遭遇したのでその備忘録
・商品詳細画面において
・バリエーション選択とともに金額を切り替え
・海外対応するので通貨も切り替え
商品詳細画面はvue.jsで表示を切り替えている。
バリエーションの選択肢はラジオボタン
<label>選択1
<input name="variant" type="radio" value="バリエーション1" @change="setVariant('バリエーション1')"></input>
</label>
<label>選択2
<input name="variant" type="radio" value="バリエーション2" @change="setVariant('バリエーション1')"></input>
</label>
<label>選択3
<input name="variant" type="radio" value="バリエーション3" @change="setVariant('バリエーション1')"></input>
</label>
<input type="hidden" v-name="id" v-model="variant_id">
変更部分は上記のような感じ
<div class="price">
<span v-text="variant_price"></span>
</div>
動的に変えたい金額部分はこんな感じ
variant_priceにバリエーションの金額と現地の通貨を動的に挿入したい。
npmやyarnのプロジェクト段階であれば、shopifyのtheme-scriptsが使える
https://github.com/Shopify/theme-scripts/blob/master/packages/theme-currency/currency.js
npm等使っていない場合、↑のcurrency.jsをコンパイルしてくれている
https://gist.github.com/stewartknapman/8d8733ea58d2314c373e94114472d44c
これが使える。(コーギーの赤羽先生に教えてもらいました^^ Thanx🙇♂️🎉)
liquidに上記のshopify-moeny.jsなんかを読み込んで金額部分は下記。
/// vueのsetVariantメソッドに記載
// バリエーションを選択時にidをセット
this.selected_variant_id = variant.id;
// 金額変更
this.variant_price = Shopify.formatMoney(variant.price, "{{ shop.money_format }}");
これにより動的に金額変更可能です!
以上ですが、役に立ったら「いいね」や「シェア」お願いします😘🚀🙇♂️
この記事が気に入ったらサポートをしてみませんか?