r2brito / store-block

https://lab.github.com/vtex-trainings/vtex-store-block-course
0 stars 0 forks source link

Making the countdown block customizable #3

Closed github-learning-lab[bot] closed 4 years ago

github-learning-lab[bot] commented 4 years ago

Tornando o bloco countdown customizável

Introdução

Agora que temos um elemento h1 renderizado, é possível utilizá-lo para mostrar informações que dependam de uma prop do componente. Para isso, alguns conceitos serão apresentados, já que são necessários para desenvolver uma aplicação.

Conceitos

Atividade

  1. Na interface definida no Countdown.tsx, adicione uma prop chamada targetDate, ela é do tipo string. Com isso, estamos definindo uma prop do componente que será utilizada para inicializar o contador.

    A definição da prop em si é feita através da declaração dela na interface CountdownProps no arquivo Countdown.tsx, mostrada anteriormente. Assim, adicione uma linha que defina uma prop chamada targetDate, do tipo string.

    // react/Countdown.tsx
    interface CountdownProps {
    +   targetDate: string    
    }
  2. Feito isso, é preciso utilizá-la no componente, substituindo o texto de antes, "Teste Countdown" por um outro texto, através do Site Editor.

    No futuro, esse targetDate será utilizado para definir a data de término para o contador. Porém, por enquanto, esse campo pode ser genérico.

    Primeiramente, é preciso alterar o componente para utilizar a prop targetDate definida anteriormente. Para isso, é preciso adicionar dentro do componente React a variável a ser utilizada no h1. Você lembra do bloco de código do componente na etapa anterior? Vamos utilizá-lo novamente para fazer as alterações.

    // react/Countdown.tsx
    const Countdown: StorefrontFunctionComponent<CountdownProps> = ({ targetDate }) => {
      return (
        <div>
          <h1>{ targetDate }</h1>
        </div>
      ) 
    }
  3. Além disso, para alterar essa propriedade através do Site Editor, é necessário adicionar essa mesma prop ao schema. Isso é feito através da adição de um objeto com chave targetDate dentro do objeto properties no schema. Ou seja:

    // react/Countdown.tsx
    Countdown.schema = {
      title: 'editor.countdown.title',
      description: 'editor.countdown.description',
      type: 'object',
      properties: {
    +   targetDate: {
    +      title: 'Data final',
    +      description: 'Data final utilizada no contador',
    +      type: 'string',
    +      default: null,
    +   },
      },
    }

    Pronto! Agora você pode alterar o conteúdo do texto através do Site Editor. Vamos ver como ficou? Vá até o Site Editor e clique em Countdown no menu lateral, isso abrirá o menu de edição da app, que será como a imagem abaixo.

image

Agora, no campo abaixo do título, digite uma data no formato AAAA-MM-DD e veja a alteração, que passará a exibir o texto que você digitou.

image

github-learning-lab[bot] commented 4 years ago

Você terminou este passo com sucesso!

Vá para o próximo passo