At Tinloof, we have an internal library that does a lot of heavy lifting when it comes to building fast Remix websites that have their content managed from Sanity.
A while ago, we took a step back to research and implement a localization setup with Sanity that handles all use-cases and provides a decent user experience for content managers.
Now that we have a great localization workflow, we included it in our code generation tool, and in this article, we鈥檒l cover what that looks like from both the user and developer perspectives.
The demos below are from a research demo store we're developing, which is a redesigned version of Tony's Chocolonely online shop.
All translatable documents like pages, products, blog articles, and navigation headers or footers can be filtered through by configured locale.
The configured locale can be a language, a country, or a combination of both.
Notice that you also have the option to view unfiltered documents of a certain type.
Once you're on a document, you can also navigate between its various translations from the Translations tab.
If you create a document when you're on a specific locale filter, then the locale is automatically assigned to the document.
In this example, I'm looking at pages from Denmark. Notice how when I create a document, it automatically has the Denmark locale assigned to it.
If you create a document from the unfiltered tab (All), you're prompted to select a locale for it.
Translations can be added from the "Translations" tab. When a translation is created, content from the original document is copied over to the translation document and any references are translated automatically.
What does that mean?
Let's take the navigation header for example, which consists mainly of references to other pages that are displayed as links.
The "Worldwide" header points to "Worldwide" pages. When I create a German translation of it, content is copied from the "Worldwide" header but the new header links to German pages automatically.
Moreover, when you want to link to any other document from the German header, you can only link to German documents.
This makes translations much easier to handle while avoiding any potential errors when linking to other documents.
Tinloof's localization implementation is based on scalability and developer user experience.
Locales are defined as a property of a general config.ts file and you can change them at any point.
// config.tsexport const config = {// ...,locales: {"en-uk": {country: "United Kingdom",country_iso: "UK",icon: "馃嚞馃嚙",currency: "GBP",},"en-us": {country: "United States",country_iso: "USA",icon: "馃嚭馃嚫",currency: "USD",},"de-de": {country: "Germany",country_iso: "DEU",icon: "馃嚛馃嚜",currency: "EUR",},},};
The configured locales are automatically reflected on the Remix routing, GROQ queries, and Sanity studio configurations.
You can make a document translatable/localizable by adding setting the localized flag to true on the schema.
// schemas/documents/blogArticle.tsexport default {// ...,localized: true}
As a Shopify development agency and certified Shopify partner, we offer a variety of services for ecommerce businesses including:
Get in touch with us today to discuss your next project.
