Como adicionar breadcrumbs, ou migalhas, no painel de cliente

magento-imagem-painel-clientes

Breadcrumbs, ou migalhas de pão, são links que mostram o caminho navegado até uma página, a presença desses links melhoram bastante a navegação pois o usuário sabe rapidamente onde está, e tem a disposição links para páginas visitadas anteriormente.

No magento temos breadcrumbs na maioria das páginas naturalmente (quem dará a última palavra sobre a presença dos breadcrumbs é o tema instalado).

Nesse tutorial, vou ensinar como inserir breadcrumbs no painel do cliente.

O breadcrumb será adicionado através do sistema de layout do magento, então o primeiro passo é adicionar um arquivo chamado local.xml em seu tema, caso o mesmo ainda não exista.

1- Crie um arquivo chamado local.xml em:

app/design/frontend/sua_interface/seu_tema/layout/local.xml

e coloque nele o seguinte conteúdo, mas apenas se o mesmo não existir anteriormente, em outras palavras, abaixo vai um modelo inicial caso você ainda não utilize essa ferramenta prática do magento:

<?xml version="1.0"?>
<layout version="0.1.0">

</layout>

2- Agora podemos adicionar as migalhas, vamos fazer isso em três etapas diferentes:

a) Migalhas padrão para todas as páginas do painel

As migalhas com Home e Minha conta estarão presentes em todas as páginas do painel, para isso adicionamos o seguinte trecho ao arquivo local.xml criado acima:

<?xml version="1.0"?>
<layout version="0.1.0">

<!--
adiciona as migalhas padrão que estão presentes em todas
as páginas. Home / Minha Conta
-->
<customer_account translate="label">
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Home</crumbName><crumbInfo><label>Home</label><title>Home</title><link>/home</link></crumbInfo></action>
<action method="addCrumb"><crumbName>Minha Conta</crumbName><crumbInfo><label>Minha Conta</label><title>Minha Conta</title><link>/customer/account/</link></crumbInfo></action>
</reference>
</customer_account>

</layout>

Apague o cache de sua loja e veja que as migalhas padrão já estão em todas as páginas do painel.

b) Adicione “Home / Minha Conta / Painel” no painel inical da conta do cliente:

Ainda no arquivo local.xml, logo após a linha:

</customer_account>

adicione

<!--Adicionar a migalha do painel-->
<customer_account_index translate="label">
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Painel</crumbName><crumbInfo><label>Painel</label><title>Painel</title></crumbInfo></action>
</reference>
</customer_account_index>

repare que esse crumb não tem a opção

<link></link>

pois a mesma serve para, como o nome deixa claro, atribuir um link para a migalha, o que não é necessário, pois estamos adicionando a migalha da página atual.

c) Agora adicionamos as migalhas para as outras páginas do painel
<!--Migalha informacoes da conta-->
<customer_account_edit translate="label">
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Informações da Conta</crumbName><crumbInfo><label>Informações da Conta</label><title>Informações da Conta</title></crumbInfo></action>
</reference>
</customer_account_edit>

<!-- Endereços -->
<customer_address_index translate="label">
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Endereços</crumbName><crumbInfo><label>Endereços</label><title>Endereços</title></crumbInfo></action>
</reference>
</customer_address_index>

<customer_address_form translate="label">
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Endereços</crumbName><crumbInfo><label>Endereços</label><title>Endereços</title><link>/customer/address/</link></crumbInfo></action>
<action method="addCrumb"><crumbName>Adicionar ou Alterar endereços</crumbName><crumbInfo><label>Adicionar ou Alterar endereços</label><title>Adicionar ou Alterar endereços</title></crumbInfo></action>
</reference>
</customer_address_form>

<!-- Meus Pedidos -->
<sales_order_history translate="label">
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Meus Pedidos</crumbName><crumbInfo><label>Meus Pedidos</label><title>Meus Pedidos</title></crumbInfo></action>
</reference>
</sales_order_history>

<sales_order_view translate="label">
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Meus Pedidos</crumbName><crumbInfo><label>Meus Pedidos</label><title>Meus Pedidos</title><link>/sales/order/history/</link></crumbInfo></action>
<action method="addCrumb"><crumbName>Ver</crumbName><crumbInfo><label>Ver</label><title>Order View</title></crumbInfo></action>
</reference>
</sales_order_view>

<!-- Acordo de cobrança -->
<sales_billing_agreement_index>
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Acordo de Cobrança</crumbName><crumbInfo><label>Acordo de Cobrança</label><title>Acordo de Cobrança</title></crumbInfo></action>
</reference>
</sales_billing_agreement_index>

<sales_recurring_profile_index>
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Perfis Recorrentes</crumbName><crumbInfo><label>Perfis Recorrentes</label><title>Perfis Recorrentes</title></crumbInfo></action>
</reference>
</sales_recurring_profile_index>

<!-- Comentários de produtos -->
<review_customer_index translate="label">
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Meus Comentários</crumbName><crumbInfo><label>Meus Comentários</label><title>Meus Comentários</title></crumbInfo></action>
</reference>
</review_customer_index>

<!-- Marcações -->
<tag_customer_index translate="label">
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Minhas Marcações</crumbName><crumbInfo><label>Minhas Marcações</label><title>Minhas Marcações</title></crumbInfo></action>
</reference>
</tag_customer_index>

<wishlist_index_index translate="label">
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Minha Lista de Desejos</crumbName><crumbInfo><label>Minha Lista de Desejos</label><title>Minha Lista de Desejos</title></crumbInfo></action>
</reference>
</wishlist_index_index>

<downloadable_customer_products translate="label">
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Produtos para Download</crumbName><crumbInfo><label>Produtos para Download</label><title>Produtos para Download</title></crumbInfo></action>
</reference>
</downloadable_customer_products>

<newsletter_manage_index translate="label">
<reference name="breadcrumbs">
<action method="addCrumb"><crumbName>Gerenciamento de Newsletter</crumbName><crumbInfo><label>Gerenciamento de Newsletter</label><title>Gerenciamento de Newsletter</title></crumbInfo></action>
</reference>
</newsletter_manage_index>

</layout>

Segue o download do arquivo completo, não substitua o arquivo local.xml do seu tema se o mesmo já existir e contiver alterações!

Dowload 

2017-01-24T20:25:10+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x