shopifyで”translation missing〜”が出た時の解決方法

shopifyのテーマを自作しているが、一部既存テーマを導入している方
(海外の有料テーマをご利用の方も発生する可能性がありますが、今回はテーマを自作している方向けに記事を書いています)
※本ページはプロモーションが含まれています
※テーマファイルに手を加える際は念のためバックアップをとってから行ってください。

概要

テーマを自作しているとたまに”translation_missing:ja 〜”というエラーが出ることがあります。特にテーマを自作している方は比較的遭遇しやすいと思われます。最初はよく分からずなんのこっちゃ状態かもしれませんが、非常にシンプルなエラーですのでさっさと解決していきましょう。

原因

これは結論からいうと、エラー文そのままでテーマの設定言語(日本語)に対応した文言が無いために発生するエラーのようです。

例えば下のようにログイン周りのコードを「Debut」から持ってきた場合、自作テーマだと対応言語の設定がなされていない筈なので”translation_missing:ja 〜”となります(分かりやすいように、CSSも「Debut」の設定を使用しているとします)

translation_missingのエラータイトル

 

エラーとなっているコードは下記のようになっています

“{{ ‘customer.login.title’ | t }}”

translation_missingのコード

解決方法

解決方法としては各文言に対応した日本語を設定すれば良く、その方法にも様々ですが、いちいち追加するのが面倒という方には無料テーマの「Debut」の設定を使用する方法が手っ取り早いのでご紹介します。

「Debut」から設定をコピーする

テーマのコードを編集

ja localesのコピー

 

自作テーマ内に”snippet”や”section”と同じ階層にある“locales”に”ja.json”ファイルを作って保存

ja.jsonをLocalesに保存

 

なお中身はJSONデータですので簡単に加筆修正ができます。例として“my_account”:”登録情報”を追加してみました。

"login":{
        "title": "ログイン",
        "email": "メールアドレス",
        "password": "パスワード",
        "forgot_password": "パスワードをお忘れですか?",
        "sign_in": "ログイン",
        "guest_title": "ゲストとして購入",
        "guest_continue": "続ける",
        "my_account": "登録情報"
}

後は挿入したい箇所に{{ ‘customer.login.my_account’ | t }}”と記述すればOKです。

※上記の例は”customer“オブジェクト内にあるとした場合ですので必要に応じて変えてください。

まとめ

いかがだったでしょうか?

shopifyは基本的なところは日本語に対応していますが、カナダ発ということもありまだ日本語に対応しきれていない部分もあります。

shopifyが公開しているテーマであれば今回のような問題が発生する可能性は低いと思われますが、テーマを自作している方には1度は出会うエラーかと思われます。決して難しいエラーでは無いので今回の記事を参考に対応してみてください。