[Shopify]通貨セレクターを好きな場所に追加する方法

2020年10月23日

Shopifyストアで海外向けに販売もしていると、通貨セレクタを使用する機会があるかと思います。

Shopify 通貨セレクター

しかし、この通貨セレクターってShopifyテーマによってはデフォルトだとフッターにしか表示できなかったり、自分の思い通りの位置に動かせないんです。

例えば、Shopify無料Debutテーマの場合は、フッター限定のようです。しかし、ページが長いと下までスクロールするのも大変ですし、最悪通貨セレクターに気づいてもらえない場合もあります。

なので、今回は通貨セレクターをイチから実装し、任意の場所に埋め込めるように調整してみます。

通貨セレクターを実装する前に必要な設定

Shopifyストアを作成したままの状態、デフォルトだと通貨セレクターが表示されていないと思うので、まずは通貨セレクターを表示させていきます。

やることとしては

Shopifyペイメントで複数通貨を設定する
通貨セレクターを有効化

です。（本題では無いので、詳しくは下記参照）

https://help.shopify.com/ja/manual/payments/shopify-payments/multi-currency/setup

ちなみにDebutテーマの場合、

管理画面→テーマ→カスタマイズ→フッター→通貨セレクター

通貨セレクターの表示　Shopify

基本的な通貨セレクターのコード

通常の通貨セレクターの基本的な実装です。

{% form 'currency' %}
{{ form | currency_selector }}
<button type="submit">更新</button>
{% endform %}

このコードで、"更新"ボタンを押すと通貨更新できるようになります。

※この上のコードですが、入れる位置が結構重要で、場所によっては機能しなくなりますのでご注意ください。

ちなみに、見た目はこのような感じです。

Shopify 通貨セレクター

通貨セレクター選択後、自動で通貨変更する

ただこの状態だと、”更新”ボタンを押さないと、通貨更新ができません。このままだとユーザーにとってあまり親切ではありません。

なので、ドロップダウンリストを選択した後に、自動で通貨変更できるようにJSを調整していきます。

通貨セレクターを挿入したい場所にちょっと修正した先ほどのコードを挿入します。

{% form 'currency' %}
　{{ form | currency_selector }}
{% endform %}

そして、theme.jsファイルの一番下に下記コードを追加しましょう。

function currencySubmit(event) {
　event.target.form.submit();
}

document.querySelectorAll('.shopify-currency-form select').forEach(function() {
　this.addEventListener('change', currencySubmit);
});

これで、Shopify通貨セレクターのドロップダウンを選択した時点で、選択した通貨に変換されるようになりました。見た目はこんな感じです。

Shopify currency selector

"更新"ボタンがなくなった分、すっきりしましたね。

通貨セレクターにデザインを当てる

上記の通貨セレクターでも充分な気もしますが、できればサイトのデザインに合わせた通貨セレクターを作成したいものです。

chromeの検証機能を使用して見ると

のようになっており、id="cyrrency_form"を使用してスタイルを当てられるようでした。

先ほどのコードにスタイルを追加してあげると、

{% form 'currency' %}
　{{ form | currency_selector }}
{% endform %}

<style>
#currency_form select{
　width: 150px;
　border: 1px solid gray;
　border-radius: 0;
　margin: 20px;
　background-color: lightyellow;
}
</style>

のように変更できます。これを表示してみると、

のようになります。

これで印象がグッと変わりましたね。（変化をわかりやすくするために、背景に黄色を使用。）

カスタマイズできるような通貨セレクターを作成

ただもっとゴリゴリにカスタマイズしたい！という人は、下記コードをShopify公式から引っ張ってきたので参考にしてみてください。

{% form 'currency' %}
　<select name="currency">
　　{% for currency in shop.enabled_currencies %}
　　　　{% if currency == cart.currency %}
　　　　　<option selected="true">{{currency.iso_code}} {{currency.symbol}}</option>
　　　{% endif %}
　　{% endfor %}
　</select>
{% endform %}

一応やっていることとしては、shop.enabled_currenciesでShopifyストア内の有効化された通貨を拾ってきてoptionタグの中に出力しているという形です。

currency.iso_codeでJPY, GBP, USDなどの表記を拾ってきて、currency.symbolで￥, £, $などの通貨単位を取得しています。