# General Translation Integrations: Gestion des paramètres régionaux dans Shopify Hydrogen
URL: https://generaltranslation.com/fr/docs/integrations/shopify/reference/locale-handling.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment une boutique Shopify aligne les textes de la boutique, le contenu du catalogue, les URL et les marchés sur un seul et même paramètre régional. Référence pour la gestion des paramètres régionaux dans les boutiques Shopify.

Ces règles s’appliquent à toutes les boutiques Hydrogen, qu’elles reposent sur React Router ou sur Next.js. Elles garantissent que `gt-react` ou `gt-next`, le contexte de la Storefront API de Shopify, le routage et la mise en cache utilisent le même paramètre régional pour chaque requête.

## Vue d’ensemble [#overview]

| Sujet                                          | Description                                                                                                                      |
| ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| [Codes de paramètres régionaux](#locale-codes) | Une liste unique de paramètres régionaux, mise en correspondance explicite avec les codes Shopify.                               |
| [Routage](#routing)                            | C’est l’URL qui détermine la langue, avec une seule URL canonique par page.                                                      |
| [Langue et marché](#language-market)           | La langue des textes et le pays de vente sont des paramètres distincts, que vous pouvez associer pour chaque paramètre régional. |
| [Pages en cache](#cached-pages)                | Les traductions sont intégrées à la compilation.                                                                                 |

## Codes de paramètres régionaux [#locale-codes]

Définissez les paramètres régionaux une seule fois, dans `gt.config.json`. Dérivez ensuite de cette liste le routage, `<html lang>`, le fournisseur, le sélecteur de langue et le contexte des requêtes Shopify, plutôt que d&#39;en maintenir une seconde.

Dans une boutique Shopify, chaque langue possède trois codes :

* Les **paramètres régionaux General Translation** sont des étiquettes BCP 47, comme `fr` ou `pt-BR` (voir [Codes de paramètres régionaux](/docs/platform/core/guides/locale-codes)).
* Les valeurs **`LanguageCode` de la Storefront API** sont des énumérations en majuscules avec des traits de soulignement, comme `FR` ou `PT_BR`. Passez-les à `@inContext(language:)`.
* Les **paramètres régionaux de l&#39;Admin API** sont les codes de paramètres régionaux de la boutique, comme `fr` ou `pt-BR`. Passez-les à `translationsRegister`.

Définissez explicitement la correspondance de chaque paramètre régional. Remplacer `_` par `-` fonctionne pour la plupart des codes, mais pas pour tous :

| `LanguageCode` Shopify | Langue                 | Paramètre régional General Translation |
| ---------------------- | ---------------------- | -------------------------------------- |
| `EN`                   | Anglais                | `en`                                   |
| `FR`                   | Français               | `fr`                                   |
| `JA`                   | Japonais               | `ja`                                   |
| `PT_BR`                | Portugais (Brésil)     | `pt-BR`                                |
| `PT_PT`                | Portugais (Portugal)   | `pt-PT`                                |
| `ZH_CN`                | Chinois (simplifié)    | `zh-CN` ou `zh-Hans`                   |
| `ZH_TW`                | Chinois (traditionnel) | `zh-TW` ou `zh-Hant`                   |

`ZH_CN` et `ZH_TW` désignent un système d’écriture, et pas seulement une région. `zh-TW` renvoie aussi à Taïwan, tandis que `zh-Hant` désigne le chinois traditionnel, quelle que soit la région. Choisissez un seul paramètre régional par langue Shopify et utilisez-le dans `gt.config.json`, les URL et `<html lang>`.

<Callout type="info">
  **Bientôt dans Hydrogen :** des pull requests ouvertes proposent des utilitaires de paramètres régionaux. [Shopify/hydrogen#4009](https://github.com/Shopify/hydrogen/pull/4009) ajoute `defineShopifyI18n`, une définition des paramètres régionaux avec routage par chemin ou par domaine, ainsi que des utilitaires comme `getSupportedLocales`. [Shopify/hydrogen#4325](https://github.com/Shopify/hydrogen/pull/4325) ajoute `getHtmlLang`, qui convertit un `LanguageCode` en une étiquette `<html lang>` valide, par exemple `PT_BR` en `pt-BR` et `ZH_TW` en `zh-Hant`. Aucune de ces fonctionnalités ne figure encore dans une version publiée de `@shopify/hydrogen` : conservez donc votre propre liste de paramètres régionaux et votre propre correspondance.
</Callout>

Construisez les étiquettes à partir de la seule langue. Un client du marché canadien qui consulte la boutique en français obtient `fr`, et non `fr-CA`. N&#39;ajoutez un paramètre régional distinct, comme `fr-CA`, que si vous gérez des textes spécifiques pour celui-ci.

## Routage [#routing]

### L&#39;URL détermine la langue

Résolvez le paramètre régional à partir du chemin ou du domaine de la requête, puis transmettez cette même valeur au fournisseur, à `<html lang>` et au contexte de requête de Shopify. Un cookie ou l&#39;en-tête `Accept-Language` peut suggérer une redirection, mais une URL affiche toujours la même langue : les caches et les moteurs de recherche ne voient ainsi qu&#39;une seule langue par URL.

### Une URL canonique par page

Servez les paramètres régionaux par défaut sans préfixe et les autres paramètres régionaux sous un préfixe, par exemple `/fr/products/hoodie`. Renvoyez une erreur 404 lorsque les paramètres régionaux par défaut sont préfixés, par exemple `/en/products/hoodie`, ainsi que pour les préfixes inconnus. Les liens affichés sur une page localisée conservent le préfixe de celle-ci.

Transmettez le préfixe à Hydrogen via `i18n.pathPrefix` dans `createShopifyRequestContext`, par exemple `/fr`, ou une chaîne de caractères vide pour les paramètres régionaux par défaut. Hydrogen l&#39;ajoute aux redirections qu&#39;il renvoie, qu&#39;il s&#39;agisse des variantes de produits ou des routes standard.

### Routes non localisées

Ne préfixez pas les routes que Shopify ou ses scripts appellent sur des chemins fixes : les gestionnaires d’API du panier et de la recherche prédictive, les callbacks d’autorisation du compte client et les autres routes `/api`. Dans le modèle Vercel Shop, `proxy.ts` permet à `handleShopifyRoutes` de Hydrogen de répondre à ces requêtes avant toute réécriture liée au paramètre régional. (Voir [Localiser une boutique Shopify Next.js](/docs/integrations/shopify/guides/localizing-nextjs#routing)).

Les requêtes du panier et de la recherche prédictive doivent malgré tout connaître la langue de la page, faute de quoi Shopify renvoie le texte du catalogue dans la langue par défaut. Enregistrez le paramètre régional de la page dans un cookie, lisez-le uniquement pour ces requêtes sans préfixe et n’acceptez que les paramètres régionaux configurés. (Voir [Conserver la langue de la page dans les gestionnaires de Hydrogen](/docs/integrations/shopify/guides/localizing-react-router#handler-locale)).

## Langue et marché [#language-market]

La directive `@inContext` de la Storefront API accepte un `language` et un `country`. Chacun répond à une question différente :

* **`language`** détermine la traduction du contenu du catalogue que Shopify renvoie. Il suit le paramètre régional de la page.
* **`country`** détermine le marché, qui fixe les prix, la devise et la disponibilité des produits. Sur un panier, il ne s&#39;applique que tant que le panier n&#39;a pas d&#39;identité d&#39;acheteur, et il n&#39;en définit jamais. Définissez le pays de l&#39;acheteur via `cartCreate` ou `cartBuyerIdentityUpdate` ; dès lors, l&#39;identité de l&#39;acheteur prévaut sur les valeurs `@inContext` contradictoires. (Consultez les [règles de contexte du panier](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/in-context#cart-queries-and-mutations) de Shopify.)

Choisissez comment les articuler :

* **Un seul marché pour toutes les langues.** Transmettez le même pays pour chaque paramètre régional. Changer de langue ne modifie que les textes et le contenu du catalogue, jamais les prix ni le panier.
* **Un marché par langue.** Associez chaque paramètre régional à un pays, par exemple le français à la France et le japonais au Japon, et transmettez ce pays avec la langue correspondante. Chaque langue affiche alors les prix et la devise de son marché. Lorsque la langue change, mettez à jour le `countryCode` de l&#39;acheteur du panier avec `cartBuyerIdentityUpdate`, car un panier conserve la devise du pays de son acheteur. (Consultez [Vendre sur plusieurs marchés](/docs/integrations/shopify/guides/selling-in-markets).)

Pour permettre aux clients de choisir leur pays indépendamment de la langue, ajoutez plutôt un sélecteur de pays distinct et mettez à jour l&#39;identité de l&#39;acheteur à chaque changement.

Ne convertissez jamais les prix et ne déduisez jamais la devise du paramètre régional. Formatez les montants Shopify avec le code de devise renvoyé par Shopify, à l&#39;aide de [`<Currency>`](/docs/react/reference/components/currency) ou de la fonction `formatMoney` de Hydrogen.

## Pages en cache [#cached-pages]

Lorsque les pages sont mises en cache ou pré-rendues, chargez les traductions à partir de fichiers inclus dans le bundle lors de la compilation. Les requêtes de traduction à l’exécution ne peuvent pas être effectuées dans un shell statique. Dans Next.js avec Cache Components, une fonction [`loadTranslations`](/docs/react/reference/functions/load-translations) personnalisée est obligatoire (voir [Utiliser Cache Components](/docs/react/nextjs/cache-components)).

Les traductions du catalogue stockées dans Shopify ne font pas partie de la compilation : elles suivent les paramètres de cache de votre Storefront API.

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.