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

 Shopify 通貨セレクター 追加 方法

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

Shopify 通貨セレクター

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

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

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

 

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

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

やることとしては

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

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

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の検証機能を使用して見ると

Shopify 検証 通貨セレクター

のようになっており、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 通貨セレクター

のようになります。

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

 

 

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

 ただもっとゴリゴリにカスタマイズしたい!という人は、下記コードを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で¥, £, $などの通貨単位を取得しています。

 

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

以上、Shopifyストアにて通貨セレクターを作成する方法のまとめでした。

もっとたくさん編集しなければいけない部分があるのかなと思っていたのですが、数行のコードで解決できたので、さすがはShopifyさんです😳

ただ通貨セレクターの入れどころによっては、うまく動作しない場合がありますのでお気をつけください。

それでは本日も良い1日を!

コメントを残す

コメントは表示される前に承認される必要があります。