You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Com o bloco customizado na loja, devemos aprender a internacionalizar o conteúdo apresentado.
É importante lembrar que os blocos devem sempre seguir boas práticas de localização, e não devem mostrar strings hardcoded, mas sim sensíveis a linguagem que a loja opera.
Não se preocupe, você não precisará adicionar traduções de todos os textos para as variadas linguagens nas quais o Store Framework é usado. Portanto, nessa etapa, serão apresentados conceitos acerca da internacionalização de apps e como fazê-la.
As Messages
O conceito de messages facilita a adição de novos idiomas ao tema. As messages centralizam todos os serviços de tradução na plataforma. Dada um texto a ser traduzido, Messages irá primeiramente checar o contexto definido pelo usuário para, em seguida, checar as traduções das apps e, por fim, passa pelo sistema de tradução automática.
Na estrutura do diretório, é possível observar que há uma pasta chamada messages, que apresenta três arquivos principais: pt.json, en.json e es.json, cada um responsável pelas traduções: português, inglês e espanhol, respectivamente. Além disso, a fim de fornecer traduções automáticas melhores, é utilizado o arquivo context.json, responsável por evitar ambiguidades.
Para utilizar tais definições, os arquivos de tradução mencionados anteriormente são JSON, cujas chaves são as mensagens e os valores são as traduções.
O arquivo context.json é necessário e precisa conter todas as mensagens, além de oferecer as traduções automáticas em casos excepcionais.
Atividade
Você já deve ter aprendido a usar o nosso builder messages, e será através dele que serão adicionadas strings internacionalizadas nos componentes.
Para isso, na pasta /messages, adicione agora uma mensagem de título para o componente:
Agora, junte o título e o contador para renderizá-los. Para isso, defina um container por fora. Além disso, o texto do título será passado através da proptitle:
//react/Countdown.tsxconstCountdown: StorefrontFunctionComponent<CountdownProps>=({
title,
targetDate,})=>{const[timeRemaining,setTime]=useState<TimeSplit>({hours: '00',minutes: '00',seconds: '00',})consttitleText=title||<FormattedMessageid="countdown.title"/>consthandles=useCssHandles(CSS_HANDLES)tick(targetDate,setTime)return(<divclassName={`${handles.container} t-heading-2 fw3 w-100 c-muted-1`}><divclassName={`${handles.title} db tc`}>{titleText}</div><divclassName={`${handles.countdown} db tc`}>{`${timeRemaining.hours}:${timeRemaining.minutes}:${timeRemaining.seconds}`}</div></div>)}
Note que são utilizados três handlesnovos: container, countdown e title. Dessa forma, lembre-se de declará-los na constante CSS_HANDLES, vista na etapa anterior:
Pronto! Agora, para testar sua loja em outros idiomas basta adicionar a query string/?cultureInfo=pt-br ou /?cultureInfo=es-ar na URL, por exemplo. Ao utilizar tal URL, o resultado esperado é esse aqui:
The text was updated successfully, but these errors were encountered:
Práticas de internacionalização no VTEX IO
Introdução
Com o bloco customizado na loja, devemos aprender a internacionalizar o conteúdo apresentado.
É importante lembrar que os blocos devem sempre seguir boas práticas de localização, e não devem mostrar strings hardcoded, mas sim sensíveis a linguagem que a loja opera.
Não se preocupe, você não precisará adicionar traduções de todos os textos para as variadas linguagens nas quais o Store Framework é usado. Portanto, nessa etapa, serão apresentados conceitos acerca da internacionalização de apps e como fazê-la.
As Messages
O conceito de messages facilita a adição de novos idiomas ao tema. As messages centralizam todos os serviços de tradução na plataforma. Dada um texto a ser traduzido, Messages irá primeiramente checar o contexto definido pelo usuário para, em seguida, checar as traduções das apps e, por fim, passa pelo sistema de tradução automática.
Na estrutura do diretório, é possível observar que há uma pasta chamada
messages
, que apresenta três arquivos principais:pt.json
,en.json
ees.json
, cada um responsável pelas traduções: português, inglês e espanhol, respectivamente. Além disso, a fim de fornecer traduções automáticas melhores, é utilizado o arquivocontext.json
, responsável por evitar ambiguidades.Para utilizar tais definições, os arquivos de tradução mencionados anteriormente são JSON, cujas chaves são as mensagens e os valores são as traduções.
Atividade
Você já deve ter aprendido a usar o nosso builder messages, e será através dele que serão adicionadas strings internacionalizadas nos componentes.
Para isso, na pasta
/messages
, adicione agora uma mensagem de título para o componente:messages/pt.json
{ ..., + "countdown.title": "Contagem Regressiva" }
messages/en.json
{ ..., + "countdown.title": "Countdown" }
messages/es.json
{ ..., + "countdown.title": "Cuenta Regresiva" }
messages/context.json
{ ..., + "countdown.title": "Countdown" }
Feito isso, para renderizar o título deve-se usar o componente
FormattedMessage
da biblioteca react-intl.Adicione a biblioteca usando
yarn add react-intl
na pasta reactNo código do seu componente
Countdown.tsx
importe o FormattedMessage//react/Countdown.tsx + import { FormattedMessage } from 'react-intl'
Adicione uma nova prop ao
CountdownProps
:interface CountdownProps { + title: string targetDate: string }
Adicione uma constante que será o seu título:
Agora, junte o título e o contador para renderizá-los. Para isso, defina um container por fora. Além disso, o texto do título será passado através da prop
title
:Note que são utilizados três handles novos: container, countdown e title. Dessa forma, lembre-se de declará-los na constante
CSS_HANDLES
, vista na etapa anterior:Por fim, é preciso adicionar a prop de
title
no schema:Pronto! Agora, para testar sua loja em outros idiomas basta adicionar a query string
/?cultureInfo=pt-br
ou/?cultureInfo=es-ar
na URL, por exemplo. Ao utilizar tal URL, o resultado esperado é esse aqui:The text was updated successfully, but these errors were encountered: