Desafio M3 Academy - VTEX IO

Configuração do inicial

1. Instale as dependências do projeto

yarn

2. Faça o login na VTEX na agencia Magma

vtex login agenciamagma

3. Crie um workspace de desenvolvimento. Recomendamos seguir o padrão: m3academy<nome>. so e permitido o uso de letras minusculas e números.

vtex use m3academyanabrunasouza

Desenvolvimento

1. Inicie o projeto

vtex link

2. Rode o gulp para compilar os arquivos

yarn scss

3. Abrar o seu workspace no navegador

vtex browse

Problemas frequentes

As vezes pode acontecer de bugar o link do projeto. Para resolver isso, rode o comando abaixo que vai desfazer o link e depois rode o comando de link novamente.

vtex unlink --all

vtex link

Dicas de desenvolvimento

Alternativa para o Flex layout

A VTEX acaba impondo algumas limitacoes e verbosidade a mais nos blocos vtex.flex-layout. Para facilitar o desenvolvimento, criamos um bloco custom chamado html. Ele funciona da mesma forma que o flex-layout, mas com uma sintaxe mais simples que permite a escrita de um html mais semântico. Veja a documentação do bloco aqui.

Blocos JSON para diferente para determinados tamanhos de tela

Para criar telas com diferentes blocos em diferente tamanhos de tela, podemos usar o bloco responsive-layout. Ele nos permite isso. Veja a documentação do bloco aqui.