Iniciar um projeto

Instruções para começar um projeto de loja Vnda

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:

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.


Did this page help you?