# General Translation Integrations: Vendre sur plusieurs marchés
URL: https://generaltranslation.com/fr/docs/integrations/shopify/guides/selling-in-markets.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment associer chaque langue à son propre marché Shopify et transférer le panier lorsque les clients changent de langue.

Shopify renvoie les prix, la devise et la disponibilité correspondant au marché sélectionné par le champ `country` de `@inContext`. Les guides de localisation utilisent un seul marché pour toutes les langues : changer de langue ne modifie donc que le texte. Ce guide associe chaque langue à son propre marché, comme le fait la [boutique d’exemple](https://gt-shopify-vercel.vercel.app), afin que chaque langue affiche également les prix et la devise de son marché.

*Remarque : le code étend les modules `proxy.ts` et `lib/i18n` du guide [Localiser une boutique Shopify Next.js](/docs/integrations/shopify/guides/localizing-nextjs).*

## Avant de commencer [#before-start]

* Suivez d'abord le guide [Localiser une boutique Shopify Next.js](/docs/integrations/shopify/guides/localizing-nextjs).
* Ajoutez un marché Shopify pour chaque pays que vous associez à une langue. Si vous stockez les traductions de votre catalogue dans Shopify, publiez chaque langue dans le marché correspondant.

Associer des langues à des marchés reste facultatif. Pour permettre aux clients de choisir un pays indépendamment de la langue, ajoutez plutôt un sélecteur de pays distinct et mettez à jour l'identité de l'acheteur du panier à chaque changement de pays. (Voir [Langue et marché](/docs/integrations/shopify/reference/locale-handling#language-market).)

## Associer chaque paramètre régional à un marché [#market-map]

Remplacez la fonction `getCommerceLocale`, limitée à un seul marché, par une table de correspondance qui associe chaque paramètre régional à un pays et à une langue Shopify :

```ts title="lib/i18n/index.ts"
import type { CommerceLocale } from "@/lib/config/types";

// Chaque langue correspond à un seul marché Shopify : Shopify renvoie donc les prix et la devise de ce marché.
// La devise provient toujours de la réponse de Shopify, jamais de cette table.
const markets: Record<string, CommerceLocale> = {
  en: { country: "US", language: "EN" },
  fr: { country: "FR", language: "FR" },
  ja: { country: "JP", language: "JA" },
  ko: { country: "KR", language: "KO" },
  id: { country: "ID", language: "ID" },
};

export function getCommerceLocale(locale: string): CommerceLocale {
  const market = markets[locale];
  if (!market) throw new Error(`No Shopify market for locale: ${locale}`);
  return market;
}
```

Chaque pays de la table de correspondance doit appartenir à l&#39;un des marchés Shopify de la boutique, et chaque langue doit être un `LanguageCode` de la Storefront API (voir [Codes de paramètres régionaux](/docs/integrations/shopify/reference/locale-handling#locale-codes)).

Rien d&#39;autre ne change pour les lectures du catalogue, les gestionnaires de Hydrogen ou [`getRegion`](/docs/react/nextjs/reference/functions/get-region) : ils lisent déjà `getCommerceLocale`, si bien que chaque paramètre régional interroge désormais son propre marché, et les accesseurs `"use cache"` conservent une entrée de cache par marché. Lors de la création d&#39;un panier, utilisez le pays du marché comme `countryCode` de l&#39;acheteur.

## Transférer le panier d&#39;un marché à l&#39;autre [#move-cart]

Un panier conserve la devise du pays de son acheteur. Les gestionnaires de panier d&#39;Hydrogen ne proposent aucune action permettant de modifier le pays de l&#39;acheteur. Lorsqu&#39;une navigation entre pages risque de changer le marché, le proxy lit donc le pays effectif du panier et le met à jour avant l&#39;affichage de la page :

```ts title="lib/cart/request.ts"
const CART_COUNTRY_QUERY = gql(`#graphql
  query cartCountry($cartId: ID!) {
    cart(id: $cartId) {
      buyerIdentity { countryCode }
    }
  }
`);

const CART_COUNTRY_UPDATE_MUTATION = gql(`#graphql
  mutation cartCountryUpdate($cartId: ID!, $countryCode: CountryCode!) {
    cartBuyerIdentityUpdate(cartId: $cartId, buyerIdentity: { countryCode: $countryCode }) {
      cart { buyerIdentity { countryCode } }
      userErrors {
        message
      }
    }
  }
`);

export async function moveCartToMarket(
  request: Request,
  requestContext: ShopifyRequestContext,
): Promise<void> {
  const cartId = getCartId({ cookie: request.headers.get("cookie") ?? undefined });
  if (!cartId) return;
  const client = createRequestStorefrontClient(requestContext);
  const countryCode = requestContext.i18n.country;
  // Lire le panier sans passer par le cache ; un autre onglet ou une autre session a pu le déplacer.
  const current = await client.graphql(CART_COUNTRY_QUERY, { variables: { cartId } });
  if (current.errors) throw new Error("Unable to read the cart's country");
  const cart = current.data?.cart;
  // Un panier expiré est pris en charge par le flux de création de panier déjà présent dans le modèle.
  if (!cart || cart.buyerIdentity.countryCode === countryCode) return;

  const result = await client.graphql(CART_COUNTRY_UPDATE_MUTATION, {
    variables: { cartId, countryCode },
  });
  if (result.errors) throw new Error("Unable to update the cart's country");
  const updated = result.data.cartBuyerIdentityUpdate;
  if (
    !updated ||
    updated.userErrors.length > 0 ||
    updated.cart?.buyerIdentity.countryCode !== countryCode
  ) {
    throw new Error("The cart's country was not updated");
  }
}
```

Dans `proxy.ts`, n&#39;effectuez le déplacement que si le marché est susceptible de changer, et ne définissez le cookie de paramètre régional qu&#39;une fois cette opération réussie. Ce code remplace la mise à jour du cookie décrite dans le guide Next.js :

```ts title="proxy.ts"
// Un changement de langue, ou l’affichage d’une page sans le cookie de paramètre régional, peut déplacer le panier vers un autre marché.
const marketMayChange = isPageNavigation && rememberedLocale !== locale;

// Une fois la requête refusée par handleShopifyRoutes, avant la réponse de la page ou le cookie de paramètre régional.
if (marketMayChange) {
  try {
    await moveCartToMarket(request, requestContext);
  } catch {
    // Ne pas afficher les prix du nouveau marché à côté d’un panier rattaché à un autre marché.
    const failure = new NextResponse("Unable to switch the cart's market. Please reload to retry.", {
      status: 503,
      headers: { "Cache-Control": "no-store" },
    });
    // La mise à jour a pu parvenir à Shopify même si elle a échoué ici : on oublie donc le
    // paramètre régional mémorisé, et la prochaine navigation relira le panier.
    failure.cookies.delete(LOCALE_COOKIE_NAME);
    return failure;
  }
}

// Sur la réponse. Atteint uniquement si moveCartToMarket a réussi.
if (marketMayChange) {
  response.cookies.set(LOCALE_COOKIE_NAME, locale, { path: "/", sameSite: "lax" });
}
```

Comportement de la vérification :

* **Coût.** Les navigations au sein d&#39;une même langue ne déclenchent pas la vérification. Un changement de langue, ou une visite sans le cookie, ajoute une lecture du panier non mise en cache, ainsi qu&#39;une mutation uniquement lorsque les pays diffèrent. Ne mettez pas en cache la requête du pays du panier.
* **Échecs.** Les échecs réseau, les erreurs GraphQL et les `userErrors` de mutation renvoient une erreur 503 plutôt que d&#39;afficher les prix du nouveau marché à côté d&#39;un panier de l&#39;ancien marché. Comme seuls les changements de marché déclenchent la vérification, une panne du panier Shopify empêche de changer de langue, mais pas de naviguer.
* **Reprise.** Le cookie de paramètre régional n&#39;est défini qu&#39;après un transfert réussi. Un transfert échoué, y compris un transfert parvenu à Shopify mais dont la réponse a été perdue, supprime le cookie : la navigation suivante, quelle que soit la langue, relit donc le panier. Le cookie reste une simple indication, et non une preuve du pays du panier : un pays modifié en dehors de ce proxy est corrigé lors du prochain changement de langue ou de la prochaine visite sans le cookie.

Shopify recalcule le prix des lignes du panier après une mise à jour réussie du pays. Le [sélecteur de langue](/docs/integrations/shopify/guides/localizing-nextjs#routing) navigue en rechargeant entièrement la page, ce qui permet au proxy de voir chaque changement.

## Next steps

- /docs/integrations/shopify/guides/localizing-nextjs
- /docs/integrations/shopify/guides/translating-products
- /docs/integrations/shopify/guides/localizing-react-router

## Sitemap

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