Qual arquivo alterar – Debug em Frontend

Escrito por Mario SAM

A pergunta que atormenta todos que estão começando no Magento: Qual arquivo alterar? Como encontro o arquivo? 

Uma tarefa que deveria ser simples se transforma numa batalha tomando horas de trabalho.

Não se você conhece o Debug do Magento. Uma funcionalidade nativa do sistema que exibe na tela do seu navegador, o diretório e o nome dos arquivos responsáveis pela página.

Debug do Magento On

Como você pode ver na imagem acima, com modo debug ligado, sua página é carregada no navegador com informações extras.

Logo abaixo do rodapé da página, surgem informações do Profiler, como memória alocada, tempo e peso da página. São dados importantes pra quem está trabalhando na otimização do site, já que este tem um peso importante no rankeamento orgânico de sistemas de buscas como google, bing e yahoo.

Como usar o debug

No backend da sua loja, acesse o menu:

Sistema -> Configuração -> Avançado [Desenvolvedor]

Se a guia Debug apresentar somente a opção Profiler, então no alto do menu a esquerda, selecione a visão de loja que possui o template aplicado. A página deve ser carregada automaticamente com todas as opções do debug visíveis.

Ligando o Debug do Magento

Basta marcar “sim” nas opções que deseja habilitar, salvar, e atualizar seu frontend.

Entendendo o debug

O debug permite que você visualize duas informações, telas e blocos:

Diretório dos arquivos

Caminho das Telas: Do lado esquerdo, com background em vermelho temos o diretório com nome do template, do tema, e do arquivo responsável pelas informações que estão dentro do quadro pontilhado.

Então basta que você abra um editor de páginas (phtml) e no seu diretório de instalação do Magento, dentro da pasta “app/design” você vai encontrar o caminho para os arquivos listados na tela.

No seu diretório de instalação do Magento você também encontra a pasta “skin” que possui o mesmo caminho descrito acima para os arquivos de frontend (javascript, css, imagens).

*Dica de programador: Faça um backup dos arquivos que você planeja danificar, digo, alterar.

Nome dos blocos do template

Nome dos Blocos: Do lado direito também com background em vermelho, porém fonte azul, temos o nome dos blocos. Cada página possui seu bloco, isso se deve a arquitetura de templates do Magento, no qual não irei explicar neste post.

O que você precisa saber no momento, é que os blocos são gerenciados por xml, e são eles que controlam as páginas.

Por exemplo, você encontra uma página (phtml) que pretende alterar, mas quando abre a página não encontra os dados que estão na tela. Isso porque o responsável por carregar estes dados (na maioria dinâmicos) são os blocos.

Finalizando

Se você pretende trabalhar com Magento, principalmente na criação e customização de templates e temas, esse é o primeiro passo, parabéns! Você encontrou o caminho certo.

Agora você precisa estudar estes arquivos, conhecer e entender os padrões usados pelo Magento. Tableless e XML serão úteis nos seus estudos.

Se você conhece outras pessoas que estão estudando Magento, não se esqueça de indicar este post, com certeza vai ajudar outras pessoas.

Sucesso!

O Autor

Mario SAM

Desenvolvedor Magento com certificação M1 Developer e M1 FrontEnd Developer. Graduado em Web Design e Programação, pós-graduado em Gestão de Projetos e TI. Não sou matemático mas estou aqui para somar.