Desenvolvendo blocos customizados no VTEX IO
View in EnglishThis content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.
De forma a introduzir os desenvolvedores a como construir blocos customizados no VTEX IO, este curso foi lançado. Ele contempla os conceitos e passos necessários para ter um bloco customizado em um tema, que utilize React, Typescript e GraphQL.
Step 1: Introdução
Introdução a este curso
Step 2: Conhecendo uma app VTEX IO
Neste passo, você irá aprender como se organizam os arquivos em uma app VTEX IO e o que cada campo no manifest.json significa
Step 3: Linkando uma app e utilizando-a no tema da loja
Após modificar algo no código da app, iremos linká-la e verificar o resultado na loja, após haver adicionado a app no tema
Step 4: Tornando o bloco countdown customizável
Através da API de props do React, você aprendenrá como tornar seus blocos configuráveis com o Store Framework
Step 5: Criando a funcionalidade do bloco countdown
Utilizando os hooks do React.js, iremos finalizar a implementação do bloco countdown
Step 6: Modificando o bloco countdown para ter um estilo configurável
O VTEX IO oferece uma maneira para seus blocos poderem ter um estilo CSS customizável: CSS Handles. Também veremos sobre a biblioteca de CSS funcional Tachyons
Step 7: Práticas de internacionalização no VTEX IO
Para que os nossos blocos sejam usados por todo mundo, deveremos nos atentar às boas práticas de internacionalização suportadas pelo VTEX IO
Step 8: Componentizando o bloco countdown
Para que os blocos que criamos sejam flexíveis, devemos atentar a granularidade dos componentes visuais de cada bloco.
Step 9: Conectando backend e frontend
Utilizando dados do catálogo da VTEX em seu componente