{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/ftw/how-to-change-ftw-language/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"How to change FTW microcopy language","slug":"how-to-change-ftw-language","updated":"2022-06-14T00:00:00.000Z","category":"ftw-content","ingress":"This guide describes how to change the language used in the Flex Template for Web (FTW) application","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want the template to use a language that is not supported by\ndefault, a new language-specific microcopy file needs to be added and\nthe messages in it need to be translated:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"creating-a-new-microcopy-file","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#creating-a-new-microcopy-file","ariaLabel":"creating a new microcopy file permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Creating a new microcopy file"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Copy the default "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/translations/en.json"}]},{"type":"text","value":" English microcopy file\ninto some other file, for example "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"it.json"}]},{"type":"text","value":" for Italian."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Change the messages in the new microcopy file to the desired\nlanguage."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note: we already have a few other language files available in\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/tree/master/src/translations","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"src/translations/"}]},{"type":"text","value":"\ndirectory for you to start customizing microcopy."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Even if you use "},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/ftw/hosted-microcopy/"},"children":[{"type":"text","value":"hosted microcopy"}]},{"type":"text","value":" to manage\nyour marketplace texts, it is still important to have a built-in\nlanguage-specific microcopy file in FTW as well, so that the application\ncan show meaningful messages for any keys missing from the Flex Console\nmicrocopy asset."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"changing-the-microcopy-used-in-ftw","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#changing-the-microcopy-used-in-ftw","ariaLabel":"changing the microcopy used in ftw permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Changing the microcopy used in FTW"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once you have the microcopy file in place:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/config.js"}]},{"type":"text","value":", change the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"locale"}]},{"type":"text","value":" variable value to match the\nnew locale (the name of the new microcopy file, without the\nextension), for example:"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" locale "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'it'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":2},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/app.js"}]},{"type":"text","value":", change the React Intl import to point to the correct\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"react-intl"}]},{"type":"text","value":" locale, for example:"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" localeData "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'react-intl/locale-data/it'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":3},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you are using a non-english locale with moment library, you should\nalso import time specific formatting rules for that locale:"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'moment/locale/it'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":4},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Point "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"messagesInLocale"}]},{"type":"text","value":" to correct .json file, for example:"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" messagesInLocale "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'./translations/it.json'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"changing-the-microcopy-used-in-tests","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#changing-the-microcopy-used-in-tests","ariaLabel":"changing the microcopy used in tests permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Changing the microcopy used in tests"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Also, in case you will translate the application and develop it forward\nit is wise to change the microcopy file that the tests use. Normally\ntests are language agnostic as they use microcopy keys as values.\nHowever, when adding new microcopy you can end up with missing microcopy\nkeys in tests. To change the microcopy file used in tests change the\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"messages"}]},{"type":"text","value":" variable in\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/blob/master/src/util/test-helpers.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"src/util/test-helpers.js"}]},{"type":"text","value":"\nto match your language in use, for example:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" messages "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'../translations/it.json'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"developing-ftw-into-a-multilanguage-marketplace","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#developing-ftw-into-a-multilanguage-marketplace","ariaLabel":"developing ftw into a multilanguage marketplace permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Developing FTW into a multilanguage marketplace"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you intend to modify a FTW template to handle multiple languages, it\nis good to note that the FTW templates are by default configured to run\nin single language mode, so a multilanguage marketplace requires custom\ndevelopment. For multiple languages, you basically have two approaches\nfor that custom development."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The first option is to create two versions of the client app, one for\nLanguage 1 and one for Language 2. They can both point to the same\nMarketplace API i.e. share the same listings, users, transaction\nprocesses etc. If you have a very location-specific marketplace with\ndifferent locations mainly in different languages, this might be a good\napproach, because you can then target your UI, branding and localization\nmore closely to the target area."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Another option is to customize a single client app to provide multiple\nlanguages. For instance, you could import several language files in\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/app.js"}]},{"type":"text","value":" and select which one you are going to use by modifying\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/routeConfiguration.js"}]},{"type":"text","value":", so that all the paths include a ”locale”\nvariable. E.g. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"/about"}]},{"type":"text","value":" could be changed to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"/:locale/about"}]},{"type":"text","value":" to capture\npaths like "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"/fr/about"}]},{"type":"text","value":". In this case, it is useful to save the user's\nlanguage preference to the extended data."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Read more about having\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/concepts/microcopy/#can-i-have-a-multilanguage-marketplace"},"children":[{"type":"text","value":"a multilanguage marketplace on top of Flex"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"headings":[{"value":"Creating a new microcopy file","depth":2},{"value":"Changing the microcopy used in FTW","depth":2},{"value":"Changing the microcopy used in tests","depth":2},{"value":"Developing FTW into a multilanguage marketplace","depth":2}]}},"pageContext":{"slug":"how-to-change-ftw-language","category":"ftw-content"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}