Criar um ambiente de desenvolvimento de versão mobile

Aparência da Loja

VTEX Team

VTEX Team

Última atualização

Iniciamos esse artigo reforçando que a tendência e as boas práticas indicam a utilização de uma única versão (responsiva) para desktop e mobile. A criação de uma versão mobile apartada era uma prática adotada quando os recursos de CSS dificultavam a adaptação de uma versão desktop para mobile. Hoje em dia, com os recursos que o CSS oferece, a criação de uma versão responsiva tornou-se padrão. Leia mais sobre esse assunto clicando aqui.

Esse artigo tem objetivo de ilustrar como preparar um ambiente de desenvolvimento para versão mobile sem impactar a versão de produção.

Existem algumas maneiras de desenvolver uma versão mobile sem impactar a versão desktop e sem que esse desenvolvimento esteja público em navegações de mobile. Nesse artigo, abordaremos a principal.

Preparando ambiente

Para desenvolver uma versão mobile com um novo WebSite, você deve seguir os seguintes passos:

  1. Configurar uma nova loja (temporária) no License Manager. Esse passo deve ser realizado pelo responsável pela loja (ambiente).
  2. Criar (ou clonar o principal) um novo WebSite no Gerenciador de Portal:
  3. Criar estrutura de pastas do WebSite Mobile: Nesse passo será necessário criar as pastas padrões do sistema que serão utilizadas na versão mobile (busca, departamento, categoria, marca, produto etc)

Desenvolver versão mobile

Para visualizar a versão mobile, acesse o site pelo ambiente vtexcommercestable.com.br através de algum host configurado no License Manager. Não se esqueça dos seguintes parâmetros: ?uam=true&mobile={versao_mobile)

Nesse exemplo acessaríamos assim: http://lojadosuportemobile.vtexcommercestable.com.br?uam=true&mobile=4

Publicando versão mobile

Quando o desenvolvimento estiver concluído, para publicar a versão mobile, siga os passos abaixo:

  1. Definir versão mobile do WebSite Principal: No WebSite Principal, configure o campo WebSite-Mobile, apontando para o WebSite Mobile.
  2. Definir WebSite-Pai da versão Mobile: No WebSite Mobile, configure o campo WebSite-Pai, apontando para o WebSite Principal.
  3. Excluir Ligação (WebSite Binding) da versão Mobile: No WebSite Mobile, exclua a Ligação (Binding) criada. Versões mobile não precisam de ligação pois eles herdam essa configuração do WebSite Pai.
  4. Exclua a loja Mobile (Temporária) criada no License Manager: Essa loja foi criada apenas para servir como ambiente para o desenvolvimento do mobile. Como a versão mobile herdará os hosts do WebSite Principal, essa loja não será mais utilizada e, por isso, indica-se sua exclusão.