Linkando uma app e a utilizando em um tema de loja

Introdução

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.

Adicionando um texto fixo ao nosso componente

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:

   tsx

   //react/Countdown.tsx
   import React from 'react'
   
   interface CountdownProps {}
   
   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({}) => {
     return <div></div>
   }
   
   Countdown.schema = {
     title: 'editor.countdown.title',
     description: 'editor.countdown.description',
     type: 'object',
     properties: {},
   }
   
   export default Countdown
   

   Algumas coisas para prestar atenção:

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

     ts

     interface CountdownProps {}
     

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

     tsx

     Countdown.schema = {
       title: 'editor.countdown.title',
       description: 'editor.countdown.description',
       type: 'object',
       properties: {},
     }
     

   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:

   Diff

   const Countdown: StorefrontFunctionComponent<CountdownProps> = ({}) => {
   -   return <div></div>
   +   return (
   +     <div>
   +       <h1>Countdown Test</h1>
   +     </div>
   +   )
   }
   

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:

   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:

   vtex unlink --all
   

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

   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:

   Diff

   {
       ...
       "dependencies": {
           ...
   +        "vtex.countdown": "0.x",
           ...
       },
       ...
   }
   

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:

   Diff

   {
       "store.home": {
           "blocks": [
   +           "countdown",
               ...
           ]
           ...
       }
       ...
   }
   

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.

Está com dúvidas?

Veja o gabarito para esta etapa ou acompanhe nosso [office hours] no canal VTEX Developers(https://www.youtube.com/c/VTEXDevelopers)