Tutorial válido apenas para lojas CMS Portal Legado.

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 no artigo Responsivo × Versão Mobile.

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.

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

1. Configurar uma nova loja (temporária) no módulo Configurações da conta Esse passo deve ser realizado pelo responsável pela loja (ambiente). No Admin, acesse Configurações da conta > Conta. Selecione a conta deseja e clique Configurar outra loja.
2. Criar (ou clonar o principal) um novo WebSite no CMS Layout:

Storefront > Layout > Pasta CMS > Sites and Channels > New Website

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.)

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

Exemplo: http://(nomedaloja).myvtex.com?uam=true&mobile=4

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 Configurações da conta: 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.