Como identificar o template de uma página?

Aparência da Loja

Thomas Low-Beer

Thomas Low-Beer

Última atualização

Essa dúvida é muito comum entre os lojistas VTEX. Como o CMS é um módulo antigo (que está sendo todo refeito) ele foi desenhado em uma época que o conteúdo não era fácil de ser manipulado. A nova plataforma dará mais liberdade e será intuitiva mas enquanto isso vamos desenhar aqui o passo-a-passo para você identificar o template de uma página específica.

Antes é preciso explicar rapidamente a estrutura do Portal, que fica no seguinte endereço: {AccountName}.vtexcommercestable.com.br/admin/a

A principal função do Portal é permitir o gerenciamento do layout da sua loja. Nele que serão criados os Diretórios e Templates que darão vida ao seu e-commerce.

Tradicionalmente no mundo da tecnologia organizamos páginas e arquivos dentro de pastas, assim como no seu computador.

A VTEX usa o mesmo princípio. O diretório (pasta) é onde deve ser guardada toda informação pertinente aquela seção específica do seu site.

Podemos criar inúmeros templates mas devemos especificar no diretório qual template será exibido. Usando a página de Produto como exemplo:

Captura

Portal > Web-Sites > Mundinho > Produto > Clicar no link que estiver com a setinha vermelha de “ok”

No caso acima, vemos que o Template “Product” é o template ativo da página de produto. Para editar esse arquivo é necessário localiza-lo na lista de Templates:

Portal > Templates de Página > Product

Para dar flexibilidade é possível ainda incluir subtemplates e inúmeros outros recursos dentro de um template, como os controles nativos, ou mesmo um customizado por você. O “Header” e “Footer”, por exemplo, são subtemplates default que estão identificados dentro do Template da Homepage. Assim ficando mais fácil editar cada arquivo e também podendo utilizar o mesmo código em múltiplos templates.

Agora um exemplo real. Quero identificar qual página é essa que estou navegando:

O próprio domínio muitas vezes já me ajuda a identificar, mas algumas lojas podem customizar isso o que pode dificultar esse trabalho. No caso estou na dúvida se é uma pagina de Departamento ou Categoria, talvez possa inclusive ser uma customização de prateleira.

O melhor caminho é conferindo no Código Fonte da página (ctrl + U). Lojas VTEX vão possuir um indicativo de qual diretório pertence a página.

Agora que sabemos que é uma página de categoria, precisamos identificar qual template está ativo para Categoria. Para isso basta repetir o processo aplicado no exemplo anterior.