Breadcrumbs – A Migalha de Navegação

Escrito por Mario SAM

Acredito que a história de Joãozinho e Maria seja de domínio público, então eu não preciso explicar que eles deixaram migalhas de pão pelo caminho, para encontrar o caminho de volta, certo!?

Na internet usamos essa metáfora para deixar um rastro de navegação para o usuário que visitas as páginas de nosso site. Esse procedimento em inglês recebe o nome de breadcrumbs.

Aqui no brasil, já trabalhei em diversas empresas, e cada uma dava um nome diferente: Rastro, Links de Navegação, Migalha de Pão, Pegadas do Usuário, etc. Eu resolvi que na minha tradução seria apenas “Migalha“, simples assim.

Configuração de backend

Algumas pessoas gostam de manter as páginas bem simples, e nesse cenário, exibir a migalha perde o sentido. Então você pode habilitar/desabilitar essa função em:

Alterando o campo Exibir Migalha em Páginas Estáticas CMS para Não.

Como essa configuração afeta o template, este deve estar dentro dos padrões para que funcione.

Estrutura do template

Em cada tema, você deve ter supostamente um arquivo page.xml que monta a estrutura da sua página, exemplo:

Dentro deste arquivo você encontra o bloco:

Responsável por posicionar e exibir o conteúdo da migalha na página. Dessa forma você poderia inserir conteúdo neste bloco através de outros XML’s usando:

Ou então, remover a migalha de determinada página usando:

Isso pode ser inserido tanto em um XML como em uma atualização de páginas CMS.

A parte visual

Até agora falamos sobre o conteúdo da migalha, mas e o visual, como é montado!?

Depois que todas as variáveis estão prontas para serem impressas na página, o arquivo breadcrumbs.phtml é invocado para formatar o conteúdo, veja em:

É um arquivo relativamente simples, que percorre um array e monta os links. Mas você pode trocar, por exemplo, o separador dos links:

Para algo mais incrementado, como:

Salve e veja o resultado.

Breadcrumbs com estilo

Ao abrir o arquivo phtml, você pode observar que todo conteúdo fica dentro de uma tag com class name breadcrumbs, o que significa que se você abrir o arquivo styles.css:

Você pode editar os elementos:

Dessa forma você pode alterar cores, tamanhos, fontes, alinhamentos, etc. Espero que faça bom uso dessas informações.

Qualquer dúvida usem o Fórum da Escola Magento.

Sucesso!

O Autor

Mario SAM

Gostou do conteúdo? Me adicione no LinkedIn, avalie minhas competências, deixe uma recomendação profissional, e me indique para boas oportunidades de emprego. Seria incrível ter a oportunidade de poder trabalhar em uma grande empresa.