i18n and translating simple strings inside a Hydrogen store

[DennisKraaijeveld]

Hi!

Almost finished development of our new store. We went from using the Storefront API and Gatsby, to a completely new Hydrogen 2.0 store.

The CMS we are using is Sanity and this is where most of our translations are coming from as well. But there are some strings on the cart and account pages for instance, which we would like to translate as well.

At first I came across the i18n(ext) packages everybody is using for translating their project but Hydrogen has already a i18n functionality, right? So what would be a great approach to translate those strings across the store?

What I have done right now:

root.tsx

export async function loader({request, context}: LoaderArgs) {
  const {language, country} = context.storefront.i18n;

  let translations;
  switch (language) {
    case 'NL':
      translations = DUTCH_TRANSLATIONS;
      break;
    case 'EN':
    default:
      translations = ENGLISH_TRANSLATIONS;
      break;
  }

  const [customerAccessToken, shopData, layout] = await Promise.all([
    context.session.get('customerAccessToken'),
    getShopData(context),
    context.sanity.query<any>({
      query: LAYOUT_QUERY,
      params: {
        language: language.toLowerCase(),
      },
      cache,
    }),
  ]);

  ...    // Some other stuff

  return defer({
    translations,
    selectedLocale: context.storefront.i18n,
    // Some other stuff
  });
}

And then in my components i will use useMatches to get the data from the root.

function CartDrawer({isOpen, onClose}: {isOpen: boolean; onClose: () => void}) {
  const [root] = useMatches();

  const {translations} = root.data || {};

  return (
    <Drawer
      open={isOpen}
      onClose={onClose}
      heading={translations?.cart}
      openFrom="right"
    >
    ```

[blittle]

Hi @DennisKraaijeveld there's many ways to do it, and we don't have an official example yet. Though it's a priority to get an example soon.

[mkromann]

Is there any update on this? :-)

[juanpprieto]

This is an experimental approach
#1279

More info here:
https://github.com/Shopify/hydrogen/blob/fad0ec6f0a0c364f131dde6bc3c6469f46a3834b/examples/i18n/RFC.md

[JaxsonLuu]

Hello there,
This is another way to implement multiple languages in Shopify Hydrogen:
https://truestorefront.com/blog/how-to-add-multiple-languages-in-shopify-hydrogen
I hope this article helpful!

[amDavid01]

This seems to be broken on the latest hydrogen version, getting "Text content does not match server-rendered HTML." and "Hydration failed because the initial UI does not match what was rendered on the server.". Are there now better options for this?

[JaxsonLuu]

Hi @amDavid01 It worked with the latest Hydrogen version (2024.1.1). You can check my commit here:
Truestorefront/shopify-hydrogen-multiple-languages@57833d6

[JaxsonLuu]

@amDavid01 You can add my discord: jaxsonluu
Then share the screenshot of the issue. I will try to take a look

[jamalsoueidan]

I made a simple example here:
jamalsoueidan/booking-store#112

• client side use dynamic fetching from public
• server side use dynamic loading from public

3 packages: i18next, i18next-http-backend, react-i18next

For autocompletion:
i18next-resources-for-ts