Voici un point important lors de la mise en place d’une application, pourtant beaucoup d’entre elles l’ignorent, la traduction de l’interface d’administration, en effet votre application doit pouvoir être traduite dans n’importe quelle langue pour pouvoir être utilisée par n’importe quel propriétaire de boutique, sans compter que ça peut se révéler bloquant pour son intérêt auprès de personnes ne comprenant pas langue que vous utilisez par défaut.

Pour commencer nous allons nous rendre dans le répertoire de l’application dans une console puis installer la dépendance nécessaire :

npm install @shopify/react-i18n

Lorsque cette dernière est installée, la deuxième action est de créer le répertoire ainsi que les fichiers json permettant de renseigner les chaines, dans notre cas ce sera en et fr, pour ma part j’ai placé les fichiers dans le répertoire translations situé dans le répertoire resources :

Ensuite dans votre fichier react principal, pour moi App.jsx, vous devez placer ce code, les éléments importants étant en gras :

...
import {I18nContext, I18nManager} from '@shopify/react-i18n';


const App = () => {
	const appBridge = useAppBridge();
	
	const locale = appBridge.config.locale;
	const i18nManager = new I18nManager({
	  locale,
	  onError(error) {
	    console.log(error);
	  },
	});
	
...
	
	return (
		<AppProvider>
			<I18nContext.Provider value={i18nManager}>
				<Parameters />
			</I18nContext.Provider>
		</AppProvider>
	);
};

export default App;

Nous appelons donc un composant Parameters qui doit lui aussi adopter la structure de traduction :

import {useI18n} from '@shopify/react-i18n';

import en from '../../translations/en.json';
import fr from '../../translations/fr.json';

const Parameters = () => {
	...

	const [i18n] = useI18n({
	  id: 'NotFound',
	  fallback: en,
	  translations(locale) {
	    if (locale === 'en') {
	      return en;
	    } else if (locale === 'fr') {
	      return fr;
	    }
	  },
	});
	
	console.log(fr);
	
	return (
		<Frame>
			<Page title={i18n.translate('Parameters')} primaryAction={ primaryActionButtons }>
				<Layout>
					<Layout.Section>
					
					{i18n.translate('greeting')}
					

Nos fichiers en.json et fr.json, devant contenir les 2 chaines avec la traduction correspondante, pour le fr, ça donne :

{
	"Parameters" : "Paramètres",
	"greeting" : "Bonjour"
}

Une fois sur notre interface, nous pouvons voir le résultat :

Pour plus de flexibilité, il sera nécessaire de pouvoir créer un fichier manquant en fonction des langues installées sur la boutique du marchand, et bien entendu de proposer une interface de traduction afin que ce dernier puisse saisir les traductions des différentes langues, nous verrons cela dans un prochain billet.