Nessa etapa, a app tem dois elementos principais: o título e o contador. Porém, para obter uma maior flexibilidade de posicionamento e customização, é interessante que sejam separadas em dois blocos distintos. Para isso, é preciso apresentar brevemente o conceito de interfaces para, em seguida, ser desenvolvido um novo componente Title. Um exemplo de customização em termos de posicionamento, que será abordada nessa etapa, é:
E se eu quisesse que o título estivesse embaixo ou ao lado do contador?
Interface
Uma interface funciona como um contrato, com restrições bem definidas de como os blocos funcionarão juntos. Define, então, um mapeamento que cria um bloco do Store Framework, a partir de um componente React. É importante destacar que o uso de interfaces, de forma a separar uma app em diversas interfaces torna o poder de customização muito maior.
Ao definir a app na interface, a propriedade component é responsável por definir o componente React que será usado. É importante ressaltar que o nome do component tem que ser igual ao nome do arquivo do componente dentro da pasta react/.
Exemplo de interfaces.json:
{
"countdown": {
"component": "Countdown"
}
}
Atividade
Agora, você irá separar o título do bloco do contador e adicioná-lo à nossa loja embaixo do contador.
Alterando o componente Countdown
Em primeiro lugar, remova os imports, o title da interface e altere a constante do CSS handles:
Crie um novo arquivo dentro da pasta /react, chamado Title.tsx, ele será o novo componente do título. Nele, alguns imports precisam ser feitos. A estrutura básica do código é muito similar a do componente Countdown. Feito isso, adicione os imports necessários e a constante do CSS handles:
//react/Title.tsx
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'
const CSS_HANDLES = ['title'] as const
Agora, é necessário alterar a função do componente:
Nesta altura, há dois componentes na app: o título e o contador. Porém, é preciso alterar o arquivo interfaces.json, que se encontra na pasta store. É preciso declarar os componentes separadamente. No início, nossa interface tinha apenas o Countdown. É necessário adicionar o outro componente:
Também é preciso adicionar ao Messages as traduções cujas chaves são as strings do schema que incluímos no arquivo Title.tsx logo acima. Como visto na etapa de Messages, vá à pasta /messages e adicione em cada um dos arquivos as traduções necessárias (pt.json, es.json e en.json). Abaixo há um exemplo para o caso do arquivo en.json:
Por fim, para ver as mudanças, volte ao tema para alterá-lo a fim de incluir o novo bloco. Para isso, basta adicionar à home o título! Assim como feito para o contador, é necessário adicionar o countdown.title como um bloco no tema da loja, ou seja, no arquivo home.jsonc do store-theme.
Componentizando o bloco countdown
Introdução
Nessa etapa, a app tem dois elementos principais: o título e o contador. Porém, para obter uma maior flexibilidade de posicionamento e customização, é interessante que sejam separadas em dois blocos distintos. Para isso, é preciso apresentar brevemente o conceito de interfaces para, em seguida, ser desenvolvido um novo componente
Title
. Um exemplo de customização em termos de posicionamento, que será abordada nessa etapa, é:Interface
Uma interface funciona como um contrato, com restrições bem definidas de como os blocos funcionarão juntos. Define, então, um mapeamento que cria um bloco do Store Framework, a partir de um componente React. É importante destacar que o uso de interfaces, de forma a separar uma app em diversas interfaces torna o poder de customização muito maior.
Ao definir a app na interface, a propriedade
component
é responsável por definir o componente React que será usado. É importante ressaltar que o nome docomponent
tem que ser igual ao nome do arquivo do componente dentro da pastareact/
.Exemplo de
interfaces.json
:Atividade
Agora, você irá separar o título do bloco do contador e adicioná-lo à nossa loja embaixo do contador.
Alterando o componente
Countdown
Em primeiro lugar, remova os imports, o
title
da interface e altere a constante do CSS handles:Agora, no componente React em si, é preciso retirar o
title
como prop recebida e a constante do texto do título, além de alterar o que é renderizado:Por fim, retire o título do schema:
Criando um novo componente
Crie um novo arquivo dentro da pasta
/react
, chamadoTitle.tsx
, ele será o novo componente do título. Nele, alguns imports precisam ser feitos. A estrutura básica do código é muito similar a do componenteCountdown
. Feito isso, adicione os imports necessários e a constante do CSS handles:Agora, é necessário alterar a função do componente:
Por fim, adicione a interface, o schema e o export:
Alterando o arquivo
interfaces.json
Nesta altura, há dois componentes na app: o título e o contador. Porém, é preciso alterar o arquivo
interfaces.json
, que se encontra na pastastore
. É preciso declarar os componentes separadamente. No início, nossa interface tinha apenas oCountdown
. É necessário adicionar o outro componente:Adicionando internacionalização
Também é preciso adicionar ao Messages as traduções cujas chaves são as strings do schema que incluímos no arquivo
Title.tsx
logo acima. Como visto na etapa de Messages, vá à pasta/messages
e adicione em cada um dos arquivos as traduções necessárias (pt.json
,es.json
een.json
). Abaixo há um exemplo para o caso do arquivoen.json
:Adicionando o novo bloco na home da loja
Por fim, para ver as mudanças, volte ao tema para alterá-lo a fim de incluir o novo bloco. Para isso, basta adicionar à home o título! Assim como feito para o contador, é necessário adicionar o
countdown.title
como um bloco no tema da loja, ou seja, no arquivohome.jsonc
do store-theme.Pronto! Agora vamos ver como deve ser o resultado: