# General Translation Integrations: Vendere in più mercati
URL: https://generaltranslation.com/it/docs/integrations/shopify/guides/selling-in-markets.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Come associare ogni lingua a un mercato Shopify dedicato e trasferire il carrello quando gli acquirenti cambiano lingua.

Shopify restituisce prezzi, valuta e disponibilità in base al mercato selezionato tramite il parametro `country` in `@inContext`. Le guide sulla localizzazione usano un unico mercato per tutte le lingue, perciò cambiando lingua cambia soltanto il testo. Questa guida associa ogni lingua a un mercato dedicato, come avviene nello [storefront di esempio](https://gt-shopify-vercel.vercel.app), così che ogni lingua mostri anche i prezzi e la valuta del rispettivo mercato.

*Nota: il codice estende i moduli `proxy.ts` e `lib/i18n` della guida [Localizzare uno storefront Shopify con Next.js](/docs/integrations/shopify/guides/localizing-nextjs).*

## Prima di iniziare [#before-start]

* Completa la guida [Localizzare uno storefront Shopify con Next.js](/docs/integrations/shopify/guides/localizing-nextjs).
* Aggiungi un mercato Shopify per ogni paese che vuoi associare a una lingua. Se memorizzi le traduzioni del catalogo in Shopify, pubblica ciascuna lingua nel relativo mercato.

Associare le lingue ai mercati è facoltativo. Se vuoi che gli acquirenti possano scegliere il paese indipendentemente dalla lingua, aggiungi invece un selettore di paese separato e aggiorna la buyer identity del carrello a ogni cambio di paese. (Vedi [Lingua e mercato](/docs/integrations/shopify/reference/locale-handling#language-market)).

## Associa ogni impostazione regionale a un mercato [#market-map]

Sostituisci `getCommerceLocale`, che gestisce un unico mercato, con una mappa che associa ogni impostazione regionale a un paese e a una lingua di Shopify:

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

// Ogni lingua è associata a un unico mercato Shopify, quindi Shopify restituisce i prezzi e la valuta di quel mercato.
// La valuta in sé arriva sempre dalla risposta di Shopify, mai da questa tabella.
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;
}
```

Ogni paese nella mappa deve appartenere a uno dei mercati Shopify del negozio e ogni lingua deve essere un `LanguageCode` della Storefront API (vedi [Codici locale](/docs/integrations/shopify/reference/locale-handling#locale-codes)).

Per le letture del catalogo, i gestori di Hydrogen e [`getRegion`](/docs/react/nextjs/reference/functions/get-region) non cambia nient&#39;altro: leggono già `getCommerceLocale`, quindi ora ogni impostazione regionale interroga il proprio mercato e i getter `"use cache"` mantengono una voce di cache distinta per ciascun mercato. Quando crei nuovi carrelli, usa il paese del mercato come `countryCode` dell&#39;acquirente.

## Spostare il carrello tra mercati [#move-cart]

Un carrello mantiene la valuta del paese del suo acquirente. I gestori del carrello di Hydrogen non prevedono alcuna azione per il paese dell&#39;acquirente: per questo, quando la navigazione tra pagine può cambiare il mercato, il proxy legge il paese effettivo del carrello e lo aggiorna prima che la pagina venga renderizzata:

```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;
  // Legge il carrello senza usare la cache: un'altra scheda o sessione potrebbe averlo spostato.
  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 carrello scaduto viene gestito dal flusso di creazione del carrello già previsto dal template.
  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");
  }
}
```

In `proxy.ts`, esegui lo spostamento solo quando il mercato potrebbe cambiare e imposta il cookie dell&#39;impostazione regionale solo dopo che lo spostamento è riuscito. Questo sostituisce l&#39;aggiornamento del cookie descritto nella guida di Next.js:

```ts title="proxy.ts"
// Un cambio di lingua, o una visualizzazione di pagina senza il cookie dell'impostazione regionale, può spostare il carrello in un altro mercato.
const marketMayChange = isPageNavigation && rememberedLocale !== locale;

// Dopo che handleShopifyRoutes ha rifiutato la richiesta, prima della risposta della pagina o del cookie dell'impostazione regionale.
if (marketMayChange) {
  try {
    await moveCartToMarket(request, requestContext);
  } catch {
    // Non renderizzare i prezzi del nuovo mercato accanto a un carrello di un altro mercato.
    const failure = new NextResponse("Unable to switch the cart's market. Please reload to retry.", {
      status: 503,
      headers: { "Cache-Control": "no-store" },
    });
    // L'aggiornamento potrebbe aver raggiunto Shopify anche se qui non è riuscito, quindi elimina
    // l'impostazione regionale memorizzata: la navigazione di pagina successiva rileggerà il carrello.
    failure.cookies.delete(LOCALE_COOKIE_NAME);
    return failure;
  }
}

// Sulla risposta. Eseguito solo se moveCartToMarket va a buon fine.
if (marketMayChange) {
  response.cookies.set(LOCALE_COOKIE_NAME, locale, { path: "/", sameSite: "lax" });
}
```

Come si comporta il controllo:

* **Costo.** Le navigazioni all&#39;interno della stessa lingua saltano il controllo. Un cambio di lingua, o una visita senza il cookie, aggiunge una lettura del carrello non in cache, più una mutation solo quando i paesi non coincidono. Non mettere in cache la query sul paese del carrello.
* **Errori.** Errori di rete, errori GraphQL e `userErrors` della mutation restituiscono 503 anziché renderizzare i prezzi del nuovo mercato accanto a un carrello del vecchio mercato. Poiché il controllo viene eseguito solo quando cambia il mercato, un&#39;interruzione del carrello Shopify blocca il cambio di lingua, non la navigazione.
* **Ripristino.** Il cookie dell&#39;impostazione regionale viene impostato solo dopo uno spostamento riuscito. Uno spostamento non riuscito, compreso uno che ha raggiunto Shopify ma la cui risposta è andata persa, elimina il cookie, così la successiva navigazione di pagina, in qualsiasi lingua, rilegge il carrello. Il cookie resta un indizio, non una prova del paese del carrello: un paese modificato al di fuori di questo proxy viene corretto al successivo cambio di lingua o alla successiva visita senza cookie.

Dopo un aggiornamento del paese riuscito, Shopify ricalcola i prezzi delle righe del carrello. Il [selettore della lingua](/docs/integrations/shopify/guides/localizing-nextjs#routing) naviga con un caricamento completo della pagina, quindi il proxy intercetta ogni cambio.

## 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.