i18n and translating simple strings inside a Hydrogen store #1061

DennisKraaijeveld · 2023-06-29T15:24:14Z

DennisKraaijeveld
Jun 29, 2023

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"
    >
    ```