cyber-s / blog

tipsや質問などをここにknowledgeとして残します。
0 stars 0 forks source link

Shopify: Editing language file #872

Open huirongcs opened 4 years ago

huirongcs commented 4 years ago

Shopify's language file can usually be found in this path: locales/ja.json

You'd need to use prettier to make it readable (if you downloaded the theme to local).

You can just add the translations for the fields you want, example:

"contact": {
    "form": {
        "name": "名前",
        "email": "メールアドレス",
        "phone": "電話番号",
        "type": {
            "type_product": "商品について",
            "type_service": "サービスについて",
            "type_order": "ご注文内容変更について(発送前のみ可能)",
            "type_delivery": "配送状況について",
            "type_login": "ログインについて",
            "type_email": "メールの不達、文字化けについて",
            "type_others": "その他"
        }
    }
}

And call it in .liquid template file:

<label for="ctype" class="sr-only">{{ 'contact.form.type' | t }}</label>
<select class="form-control" id="ctype" name="contact[type]" required="">
    <option value="">お問い合わせ種別を選択してください</option>
    <option value="{{ 'contact.form.type.type_product' | t }}">{{ 'contact.form.type.type_product' | t }}</option>
    <option value="{{ 'contact.form.type.type_service' | t }}">{{ 'contact.form.type.type_service' | t }}</option>
    <option value="{{ 'contact.form.type.type_order' | t }}">{{ 'contact.form.type.type_order' | t }}</option>
    <option value="{{ 'contact.form.type.type_delivery' | t }}">{{ 'contact.form.type.type_delivery' | t }}</option>
    <option value="{{ 'contact.form.type.type_login' | t }}">{{ 'contact.form.type.type_login' | t }}</option>
    <option value="{{ 'contact.form.type.type_email' | t }}">{{ 'contact.form.type.type_email' | t }}</option>
    <option value="{{ 'contact.form.type.type_others' | t }}">{{ 'contact.form.type.type_others' | t }}</option>
</select>

In language file, by default it doesn't allow line breaks.

To enable line breaks, we need to add \n, example:

"post_success": "お問い合わせありがとうございます。\n 通常1〜2営業日以内にご回答させていただきます。\n 週末および祝日はカスタマーサポート業務がお休みのため、翌営業日までお返事をお待ちください。",

And inside .liquid template, we need to add | newline_to_br after | t, example:

{{ success_message | default: 'contact.form.post_success' | t | newline_to_br }}

Useful links: