Dado que você já está familiarizado com o Store Framework, você deve saber que utilizamos blocos, como a shelf e o sku-selector, para criar uma loja no VTEX IO. Neste passo, você irá criar um bloco a ser utilizado na home do tema da sua loja.

1. No template local que foi clonado, abra o arquivo Countdown.tsx. Você verá que contém uma implementação base de um componente React, que é uma div vazia, como mostrado abaixo:

   
   

   _17

   //react/Countdown.tsx

   _17

   import React from 'react'

   _17

   _17

   interface CountdownProps {}

   _17

   _17

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({}) => {

   _17

   return <div></div>

   _17

   }

   _17

   _17

   Countdown.schema = {

   _17

   title: 'editor.countdown.title',

   _17

   description: 'editor.countdown.description',

   _17

   type: 'object',

   _17

   properties: {},

   _17

   }

   _17

   _17

   export default Countdown

   
   

   Algumas coisas para prestar atenção:

   • Os tipos para as props do componente são definidos aqui:

     
     

     _10

     interface CountdownProps {}

     
     

   • Este schema se refere ao conteúdo que é mostrado no Site Editor:

     
     

     _10

     Countdown.schema = {

     _10

     title: 'editor.countdown.title',

     _10

     description: 'editor.countdown.description',

     _10

     type: 'object',

     _10

     properties: {},

     _10

     }

     
     

   Para que o seu bloco possa aceitar configurações do usuário, é preciso exportar um schema no componente React responsável por aquele bloco utilizando JSON schema. Isso irá, automaticamente, gerar um formulário para o Site Editor relativo ao bloco que você está desenvolvendo.

2. Agora, vamos adicionar uma tag h1 dentro do componente:

   
   

   _10

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({}) => {

   _10

   - return <div></div>

   _10

   + return (

   _10

   + <div>

   _10

   + <h1>Countdown Test</h1>

   _10

   + </div>

   _10

   + )

   _10

   }

   
   

3. De forma a ver o bloco que você acabou de criar, é necessário declará-lo em um tema.

   Qual tema eu posso utilizar?

   No caso de já ter um tema dos cursos feitos anteriormente, você pode utilizá-lo. Porém, se você ainda não tiver um, pode utilizar o vtex.store-theme, que pode ser clonado ao rodar o seguinte comando no seu terminal:

   
   

   _10

   git clone https://github.com/vtex-apps/store-theme.git

   
   

   Observação: Pode ser clonado em uma pasta de sua preferência, mas não dentro do diretório da aplicação que você está desenvolvendo.

   Agora, para evitar conflitos, vá ao terminal e unlinke qualquer tema ou aplicação que você tenha linkado no seu workspace:

   
   

   _10

   vtex unlink --all

   
   

   Com os dois repositórios prontos, você precisa linkar ambos, em dois terminais diferentes, utilizando o seguinte comando:

   
   

   _10

   vtex link

   
   

   Lembre-se de utilizar seu próprio workspace!

4. Com ambos os links ativos (tema e bloco customizado), vamos adicionar o bloco ao tema. Para fazer isso, é necessário adicioná-lo nas dependências do tema:

   
   

   _10

   {

   _10

   ...

   _10

   "dependencies": {

   _10

   ...

   _10

   + "vtex.countdown": "0.x",

   _10

   ...

   _10

   },

   _10

   ...

   _10

   }

   
   

5. Por fim, nós queremos adicionar o bloco na loja, para que este possa ser visto. Dentro do arquivo store-theme/store/blocks/home/home.jsonc, declare um bloco countdown:

   
   

   _10

   {

   _10

   "store.home": {

   _10

   "blocks": [

   _10

   + "countdown",

   _10

   ...

   _10

   ]

   _10

   ...

   _10

   }

   _10

   ...

   _10

   }

   
   

O resultado esperado é encontrar um header no topo da home da sua loja, como visto abaixo:

No caso de adicionar o bloco como o último em store.home, você o verá no final da página.