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:
Sistema > Configuração > Geral > Web [Páginas Padrão]
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:
app > design > frontend > base > default > layout > page.xml
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:
home
Home
contactus
Contact Us
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:
app > design > frontend > base > default > template > page > html > breadcrumbs.phtml
É 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:
skin > frontend > default > default > css > styles.css
Você pode editar os elementos:
/* BreadCrumbs */
.breadcrumbs { font-size:11px; line-height:1.25; margin:0 0 13px; }
.breadcrumbs li { display:inline; }
.breadcrumbs li strong { font-weight:bold; }
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!