【Shopify】チェックアウト画面を任意の言語で表示する

JSONとJavaScriptで言語切り替えを実装しているテーマで、チェックアウト画面の言語も切り替える方法を見つけたのでメモ。

tl;dr

• Shopify管理画面のチェックアウト言語切り替えはアクセス元の地域によって言語を切り替えるため、日本からのアクセスでは全て日本語で表示されてしまう。
• チェックアウトページのURLに?locale=enとパラメータを付けると指定した言語で表示される。
• カート画面にある<form>のaction属性を/cart?locale=enとすると遷移先のチェックアウトページへパラメータが引き継がれ、任意の言語でチェックアウト画面を表示できる。

やりたいこと

各言語の翻訳テキストをJSONに格納して、JavaScriptでレンダリングする方法で多言語対応をしているストアで、JavaScriptで制御の効かないチェックアウト画面も任意の言語で表示したい。

問題点

管理画面の言語切り替えは使えない

Shopify管理画面からチェックアウト言語切り替えができるようになっていますが、これはアクセス元に応じて言語を切り替える仕組みのようで、日本からアクセスしている限りは英語に切り替えたとしてもチェックアウト画面は日本語になってしまいます。

翻訳アプリはコストに見合わない

LangShopのような翻訳アプリを入れれば選択した言語でチェックアウト画面を表示してくれます。
動的コンテンツを翻訳する必要があれば確かに便利ですが、今回は基本的に自前のJSONとJSで言語切り替えを実装しているので、チェックアウト画面の言語を切り替えるためだけに月18ドル払うのは割に合わないです。
あと静的テキストなどは更新するたびに翻訳を実行しなければならず面倒だったり

実装

公式リファレンスでは見つけられなかったのですが、チェックアウト画面のURLに?locale=frのようにパラメータをくっつけると、パラメータの値に設定した言語で表示してくれる仕様みたいです。

ただ、基本的にチェックアウト画面はカスタマイズできない（プランによってはできるようです）のでカート画面をちょっといじります。

cart.liquid

<form class="cart-form" action="/cart" method="post" novalidate>
   <!-- formの中身 -->
</form>

cart.liquid内にこんな感じでチェックアウト用のフォームがあるかと思います。
ここのaction属性にチェックアウト画面で表示したい言語の言語コードをGETパラメータとして設定すれば、それがそのままチェックアウト画面のURLへ引き継がれるという仕様になっているみたいです。

例えばフランス語で表示したかったらこんな感じです

cart.liquid

<form class="cart-form" action="/cart?locale=fr" method="post" novalidate>
   <!-- formの中身 -->
</form>

これでチェックアウトボタンを押せばフランス語のチェックアウト画面が表示されます。

ちなみに管理画面で言語の設定をする必要はなく、Shopify側で用意されている言語であればどれでも表示することができるようです。ありがたい。

まとめ

翻訳アプリを入れるとチェックアウトも言語切り替えができて不思議に思っていたのですが、GETパラメータで言語を切り替える仕様だったようですね。
公式のドキュメントにはアクセス元によって言語を切り替えるやり方しか書いてないですが、自前で言語切り替えを用意したいときはこの方法で何とかできそうです。

参考
Pass Locale parameter using Buy Button - Shopify Community
Draft Orders Checkout -- set locale parameter for translation
- Shopify Community