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?

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:

Agora, você irá separar o título do bloco do contador e adicioná-lo à nossa loja embaixo do contador.

Alterando o componente Countdown

1. Em primeiro lugar, remova os imports, o title da interface e altere a constante do CSS handles:

   
   

   _15

   //react/Countdown.tsx

   _15

   import React, { useState } from 'react'

   _15

   import { TimeSplit } from './typings/global'

   _15

   import { tick, getTwoDaysFromNow } from './utils/time'

   _15

   import { useCssHandles } from 'vtex.css-handles'

   _15

   -import { FormattedMessage } from 'react-intl'

   _15

   _15

   interface CountdownProps {

   _15

   targetDate: string,

   _15

   - title: string

   _15

   }

   _15

   _15

   const DEFAULT_TARGET_DATE = getTwoDaysFromNow()

   _15

   -const CSS_HANDLES = ['container', 'countdown', 'title']

   _15

   +const CSS_HANDLES = ['countdown']

   
   

2. 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:

   
   

   _30

   //react/Countdown.tsx

   _30

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({

   _30

   - title,

   _30

   targetDate = DEFAULT_TARGET_DATE,

   _30

   }) => {

   _30

   const [

   _30

   timeRemaining,

   _30

   setTime

   _30

   ] = useState<TimeSplit>({

   _30

   hours: '00',

   _30

   minutes: '00',

   _30

   seconds: '00'

   _30

   })

   _30

   _30

   - const titleText = title || <FormattedMessage id="countdown.title" />

   _30

   const handles = useCssHandles(CSS_HANDLES)

   _30

   _30

   tick(targetDate, setTime)

   _30

   _30

   return (

   _30

   - <div className={`${handles.container} t-heading-2 fw3 w-100 pt7 pb6 c-muted-1 db tc`}>

   _30

   - <div className={`${handles.title} db tc`}>

   _30

   - { titleText }

   _30

   - </div>

   _30

   <div className={`${handles.countdown} db tc`}>

   _30

   {`${timeRemaining.hours}:${timeRemaining.minutes}:${timeRemaining.seconds}`}

   _30

   </div>

   _30

   - </div>

   _30

   )

   _30

   }

   
   

3. Por fim, retire o título do schema:

   
   

   _19

   //react/Countdown.tsx

   _19

   Countdown.schema = {

   _19

   title: 'editor.countdown.title',

   _19

   description: 'editor.countdown.description',

   _19

   type: 'object',

   _19

   properties: {

   _19

   - title: {

   _19

   - title: 'editor.countdown.title.title',

   _19

   - type: 'string',

   _19

   - default: null,

   _19

   - },

   _19

   targetDate: {

   _19

   title: 'editor.countdown.targetDate.title',

   _19

   description: 'editor.countdown.targetDate.description',

   _19

   type: 'string',

   _19

   default: null,

   _19

   },

   _19

   },

   _19

   }

   
   

Criando um novo componente

1. 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:

   
   

   _10

   //react/Title.tsx

   _10

   import React from 'react'

   _10

   import { FormattedMessage } from 'react-intl'

   _10

   import { useCssHandles } from 'vtex.css-handles'

   _10

   _10

   const CSS_HANDLES = ['title'] as const

   
   

2. Agora, é necessário alterar a função do componente:

   
   

   _13

   //react/Title.tsx

   _13

   const Title: StorefrontFunctionComponent<TitleProps> = ({ title }) => {

   _13

   const handles = useCssHandles(CSS_HANDLES)

   _13

   const titleText = title || <FormattedMessage id="countdown.title" />

   _13

   _13

   return (

   _13

   <div

   _13

   className={`${handles.title} t-heading-2 fw3 w-100 c-muted-1 db tc`}

   _13

   >

   _13

   {titleText}

   _13

   </div>

   _13

   )

   _13

   }

   
   

3. Por fim, adicione a interface, o schema e o export:

   
   

   _19

   //react/Title.tsx

   _19

   interface TitleProps {

   _19

   title: string

   _19

   }

   _19

   _19

   Title.schema = {

   _19

   title: 'editor.countdown-title.title',

   _19

   description: 'editor.countdown-title.description',

   _19

   type: 'object',

   _19

   properties: {

   _19

   title: {

   _19

   title: 'editor.countdown.title.title',

   _19

   type: 'string',

   _19

   default: null,

   _19

   },

   _19

   },

   _19

   }

   _19

   _19

   export default Title

   
   

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 pasta store. É preciso declarar os componentes separadamente. No início, nossa interface tinha apenas o Countdown. É 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 e en.json). Abaixo há um exemplo para o caso do arquivo en.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 arquivo home.jsonc do store-theme.