Hydrogen V2 Language Selector

[User_Spfy]

HI, i'm using Hydrogen V2 for the frontend of my store. I'm trying to add a language selector, following the documentation. Unfortunately there are some parts that are dated or only for currency selector. Based on the latest Hydrogen releases, the skeleton template (the one i'm using) actually asks how you want to manage different markets during installation; subdomain, subfolders etc... I'm not able to code an actual language selector in Hydrogen that is connected to the store too, only for the static data. Any suggestions?

[StephaneGcrd · Accepted solution]

Hi, I ran into the same issue as you, and I found a work-around although i'm not sure this is the best solution. I found it by taking pieces of code from this very helpful repo, so I don't take the credit into writing this code.

So I manage locale with subfolders urls such as www.shop.com/fr-fr

And all my remix routes looks like ($locale).something.tsx - I used the option from the CLI so every

You need to add the locale in the url when you go into your website - and you can do this inside app/entry.server.tsx  

The idea is that if you have a locale and its not yet in the url, then you redirect to an url with the locale in it. 

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
) {  
...
  const url = new URL(request.url);

  const locale = getLocale() // I assume here you have a function to get the locale.

  if (
    !url.pathname.startsWith(`/${defaultLocale}/`)) {
    return redirect(`/${defaultLocale}${url.pathname}`);
  }

...
}

With this, you should be redirected to url/locale when you load the website.

Then I created a component, LocaleLink, that is just a Link Component but can keep the Locale in the destination url: app/components/LocaleLink

import { useParams } from "@remix-run/react";
import { Link } from "@remix-run/react";
import { RemixLinkProps } from "@remix-run/react/dist/components";

/**
 * Get a link with the current locale parameter
 * @returns A localized <Link>
 */
export const LocaleLink: React.FC<
  RemixLinkProps & React.RefAttributes<HTMLAnchorElement>
> = ({ children, ...args }) => {
  const { locale } = useParams();

  return (
    <Link {...args} to={`/${locale}${args.to}`}>
      {children}
    </Link>
  );
};

So with this, you can navigate through your website with a locale, and fetch it from the url. I believe if you build your website through the CLI, and select subfolder locale, then the API calls should already be configured to work with it. 

You just need to build a selector that stores the locale in some sort of state, or a cookie, and then you should be good to go !

I hope this helps,

Stéphane