[Shopify]Debutテーマで通貨セレクターをヘッダーに持っていく方法

2020年11月5日

以前、通貨セレクターを任意の場所に埋め込むという記事を紹介しました。

https://ec-penguin.com/blogs/shopify/making-currency-selector

今回はその記事をもう少し掘り下げて、Debutテーマのヘッダーに通貨セレクターを設置する方法を紹介していきます。

Debutのデフォルトだとフッターにしか通貨セレクターが設置できないので、コード編集をする必要があります。通貨セレクターを設置する方法は先ほど上にリンクを貼った過去記事で書いてありますので、そちらもご参照ください。

貼り付けるコードと貼り付け先

まずテーマ編集から貼り付けるコードはこちらです。

通貨セレクターのコード

まずDebutの"header.liquid"ファイルに移動し、

の要素を見つけましょう。Debutテーマをあまりカスタマイズしていなければ、110行目付近にあるはずです。（ここで違う場所に通貨セレクターを入れてしまうと、他デザインも崩れてしまう場合があるので、お気をつけくださいませ。）

その真下に、こちらのコードを貼り付けます。

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

すると通貨セレクターがヘッダーに表示されました！

Shopify 通貨セレクター

ただこの現状通貨セレクターを変更しても通貨表示は変更されないので、もう少しコードを追加していきましょう。

通貨セレクターを変更する処理コード

先ほど追加したコードはあくまでも選択部分の処理なので、実際に通貨変更する処理コードが必要になってきます。

Debutテーマの"theme.js"ファイルの一番下に下記コードを追加して見ましょう。

// 通貨セレクター
function currencySubmit(event) {
　event.target.form.submit();
}

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

これで自動的に通貨変更されるようになりました。

Debutの通貨セレクタースタイル変更

以前の記事でも紹介しましたが、通貨セレクターのHTML構成はこのようになっております。

Shopify 通貨セレクター　要素　検証

form自体は"shopify-currency-form"というクラス名を持っており、その下はinputやselect, optionで指定できるかと思います。

ちなみに、こちらも以前書きましたが

{% 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>