【shopify】商品価格をJSで表示切り替え

下記のようなシチュエーションに遭遇したのでその備忘録

・商品詳細画面において
・バリエーション選択とともに金額を切り替え
・海外対応するので通貨も切り替え

商品詳細画面はvue.jsで表示を切り替えている。
バリエーションの選択肢はラジオボタン

<label>選択１ 
    <input name="variant" type="radio" value="バリエーション１" @change="setVariant('バリエーション１')"></input>
</label>
<label>選択２ 
    <input name="variant" type="radio" value="バリエーション２" @change="setVariant('バリエーション１')"></input>
</label>
<label>選択３ 
    <input name="variant" type="radio" value="バリエーション３" @change="setVariant('バリエーション１')"></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 }}");

これにより動的に金額変更可能です！

以上ですが、役に立ったら「いいね」や「シェア」お願いします😘🚀🙇‍♂️