Desafio VTEX IO
Go to file
2023-02-10 16:17:18 -03:00
.vscode feat: configura o json html prop 2023-01-20 12:00:50 -03:00
assets fix(product): corrige estilos em scss para mobile 375px e corrige estrutura para obter sucesso na execucao do script de testId 2023-02-10 15:55:38 -03:00
docs docs: dicas sobre componentes flexiveis 2023-01-20 13:50:27 -03:00
react fix(pix): corrige custom pix 2023-02-10 15:56:57 -03:00
store fix(product): corrige estilos em scss para mobile 375px e corrige estrutura para obter sucesso na execucao do script de testId 2023-02-10 15:55:38 -03:00
styles fix(breadcrumb): corrige estilos em scss para o breadcrumb na resolucao 2500px 2023-02-10 16:17:18 -03:00
.editorconfig feat: sobe repo com custom etc etc e sass 2023-01-12 13:56:35 -03:00
.eslintrc.js feat: sobe repo com custom etc etc e sass 2023-01-12 13:56:35 -03:00
.gitignore feat: sobe repo com custom etc etc e sass 2023-01-12 13:56:35 -03:00
.prettierignore feat: sobe repo com custom etc etc e sass 2023-01-12 13:56:35 -03:00
.vtexignore feat: sobe repo com custom etc etc e sass 2023-01-12 13:56:35 -03:00
CHANGELOG.md feat: sobe repo com custom etc etc e sass 2023-01-12 13:56:35 -03:00
Example.tsx fix(product): corrige estilos em scss para mobile 375px e corrige estrutura para obter sucesso na execucao do script de testId 2023-02-10 15:55:38 -03:00
gulpfile.js docs: descricoes basicas de como rodar o projeto 2023-01-20 13:19:56 -03:00
html.ts fix(product): corrige estilos em scss para mobile 375px e corrige estrutura para obter sucesso na execucao do script de testId 2023-02-10 15:55:38 -03:00
index.d.ts fix(product): corrige estilos em scss para mobile 375px e corrige estrutura para obter sucesso na execucao do script de testId 2023-02-10 15:55:38 -03:00
manifest.json fix(product): corrige estilos em scss para mobile 375px e corrige estrutura para obter sucesso na execucao do script de testId 2023-02-10 15:55:38 -03:00
package.json chore: apaga dados inuteis 2023-01-20 13:46:50 -03:00
yarn.lock feat: sobe repo com custom etc etc e sass 2023-01-12 13:56:35 -03:00

Desafio M3 Academy - VTEX IO

Configuração do inicial

  1. Instale as dependências do projeto
yarn
  1. Faça o login na VTEX na agencia Magma
vtex login agenciamagma
  1. 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
  1. Rode o gulp para compilar os arquivos
yarn scss
  1. Abrar o seu workspace no navegador
vtex browse

Problemas frequentes

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.