Iniciar um projeto

Depois de instalar e configurar todos os aplicativos e o ambiente de setup, sua loja está pronta para ser implementada e customizada.

Normalmente o processo de customização de uma loja é feito em duas etapas:

• Alterando em um ambiente teste: para que as alterações não reflitam imediatamente na loja oficial.
• Realizando o deploy das alterações: para subir as alterações para o ambiente final.

Para auxiliar nos seus primeiros passos de customização veja o exemplo a seguir.

Alterações no ambiente de testes (nomedaloja.vnda.dev)

Para realizar as mudanças em uma loja, primeiramente você deve fazer as alterações desejadas em um ambiente de desenvolvimento.

Como exemplo vamos alterar o plano de fundo de uma loja, para isso:

1. Acesse o terminal da sua máquina no path da loja (a pasta do projeto é a pasta de arquivos que está na sua máquina e possui o mesmo nome da loja);
2. Dê o comando: npm run sync:default ou npm run sync:win32 (para windows);
3. Dê o comando: npm run dev:default ou npm run dev:win32 (para windows);
4. Acesse o arquivo assets > sass > base > _base.scss;
5. No arquivo _base.scss:
   1. Altere dentro do bloco body a propriedade background:
      {body: background: red}
   2. Salve o arquivo.
6. Confira as alterações acessando o endereço nomeDaLoja.vnda.dev no navegador.
7. Dê o comando: npm run sync novamente para se certificar que todos os arquivos serão enviados;

Deploy das alterações

Depois de aplicar suas modificações no ambiente de desenvolvimento é hora de fazer deploy para a loja. Esse passo deve ser executado apenas após o cliente aprovar as alterações e desejarem enviar para o ambiente de produção.

Para subir as alterações:

1. Acesse o terminal;
2. Acesse a pasta do projeto (pasta de arquivos na sua máquina, que possui o nome da loja);
3. Abra essa pasta em um editor de código;
4. No terminal, dê o comando: npm run deploy;
5. Acesse o Admin do ambiente de produção;
6. Clique no ícone configurações no canto inferior esquerdo;
7. Clique em Extras;
8. Clique em Atualizar Versão do Cache;
9. Acesse a URL da loja (www.nomeDaLoja.com.br) e verifique as alterações realizadas. A propagação das alterações pode demorar cerca de 1 minuto após clicar no botão Atualizar Versão do Cache;

Note que para o processo de deploy utilizamos comandos específicos para o envio das alterações à AWS. Saiba mais quais comandos estão disponíveis e como utilizá-los no artigo Comandos.

📘

Recomendamos uma leitura prévia no artigo Organização dos arquivos, para melhor compreensão da estrutura organizacional dos arquivos do projeto.