Breadcrumbs – A Migalha de Navegação

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.

magento-bread-01

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:

<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"></block>

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:

<reference name="breadcrumbs">
 <action method="addCrumb">
 <crumbName>home</crumbName>
 <crumbInfo><label>Home</label><title>Home</title></crumbInfo>
 </action>
 <action method="addCrumb">
 <crumbName>contactus</crumbName>
 <crumbInfo><label>Contact Us</label><title>Contact Us</title></crumbInfo>
 </action>
</reference>

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

<remove name="breadcrumbs" />

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:

<span>/ </span>

Para algo mais incrementado, como:

<span>&#187;&nbsp;</span>

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.

Sucesso!

2017-01-24T20:24:05+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x