Manipulando o TopLinks

Você está lendo:

Manipulando o TopLinks

Vou começar explicando o que são Top Links para não haver nenhuma confusão.

Primeiro, não confunda Top com TOP10. Top Links não significa que são os melhores links do site.

Segundo. No Magento existe TopMenu e TopLinks, ambos ficam no alto da página. Mas TopMenu exibe o menu de categorias do site, enquanto TopLinks mostra os links de comunicação com o cliente (Minha Conta, Carrinho, Meus Favoritos, Entrar, etc.)

Vejamos então como são construídos esses links, e como podemos incluir/excluir opções.

As Páginas

A maioria dos desenvolvedores inicia procurando pelos links dentro das páginas phtml, pois um link é uma tag html.

Mas não no Magento. Como o template é construido e gerenciado por XML, os links do sistema que pertencem ao TopLinks também são criados em xml (por padrão).

Até a versão 1.4.0.0 do Magento, a página responsável por carregar a lista de links (toplinks) era:

 Text |  copy code |? 
1
app -> design -> frontend -> base -> default -> template -> page -> html -> top.links.phtml

A partir da versão 1.4.0.1 essa página foi substituída por:

 Text |  copy code |? 
1
app -> design -> frontend -> base -> default -> template -> page -> template -> links.phtml

Então se você deseja alterar o formato de apresentação dos links, é a página links.phtml que você deve alterar. Lembrando que a parte gráfica (cores, tamanhos, fontes) você edita no CSS (styles.css).

Onde estão os links – XML

A estrutura de templates do Magento funciona com blocos de estrutura e blocos de conteúdo. Recomendo que você leia o post Estrutura de templates para entender um pouco melhor.

No arquivo page.xml, o sistema cria o esqueleto da página, sua estrutura base para receber o conteúdo de forma dinâmica. Então dentro deste arquivo encontramos o bloco:

 XML |  copy code |? 
1
<block type="page/template_links" name="top.links" as="topLinks"></block>

E dessa forma todos os outros xml’s podem fazer referência a este bloco para adicionar conteúdo (links).

Os arquivos checkout.xml, wishlist.xml, e customer.xml criam blocos com informações de links, e tudo que precisam fazer é indicar onde esses links serão exibidos – neste caso na referência “top.links“.

Exemplo do checkout.xml inserindo os links: CarrinhoFechar Pedido

 XML |  copy code |? 
1
<reference name="top.links">
2
    <block type="checkout/links" name="checkout_cart_link">
3
        <action method="addCartLink"></action>
4
        <action method="addCheckoutLink"></action>
5
    </block>
6
</reference>

Exemplo do wishlist.xml inserindo o link: Meus Favoritos

 XML |  copy code |? 
1
<reference name="top.links">
2
    <block type="wishlist/links" name="wishlist_link"></block>
3
    <action method="addLinkBlock"><blockName>wishlist_link</blockName></action>
4
</reference>

Exemplo do customer.xml inserindo os links: Minha ContaEntrar/Sair

 XML |  copy code |? 
01
<default>
02
    <!-- Mage_Customer -->
03
    <reference name="top.links">
04
        <action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"></url><title>My Account</title><prepare></prepare><urlParams></urlParams><position>10</position></action>
05
    </reference>
06
</default>
07
<customer_logged_in>
08
    <reference name="top.links">
09
        <action method="addLink" translate="label title" module="customer"><label>Log Out</label><url helper="customer/getLogoutUrl"/><title>Log Out</title><prepare/><urlParams/><position>100</position></action>
10
    </reference>
11
</customer_logged_in>
12
<customer_logged_out>
13
    <reference name="top.links">
14
        <action method="addLink" translate="label title" module="customer"><label>Log In</label><url helper="customer/getLoginUrl"/><title>Log In</title><prepare/><urlParams/><position>100</position></action>
15
    </reference>
16
</customer_logged_out>

Perceba as diferenças na criação de cada link. Alguns deles dependem de pré-condições para serem exibidos na tela, outros usam métodos (method) próprios para poder exibir informações extras junto ao link (como quantidade de itens no carrinho por exemplo).

Criando opções de links

Vamos começar analisando a estrutura de tags para criação de um link via xml:

 XML |  copy code |? 
01
<action method="addLink" translate="label title">
02
<label/>
03
<url/>
04
<title/>
05
<prepare/>
06
<urlParams/>
07
<position/>
08
<liParams/>
09
<aParams/>
10
<beforeText/>
11
<afterText/>

Estas são as tags que você possui a disposição para criar seus links via xml. Então agora vamos aos exemplos:

Criando link Home – altere o bloco top.links do arquivo page.xml para:

 XML |  copy code |? 
1
<block type="page/template_links" name="top.links" as="topLinks">
2
    <action method="addLink" translate="label title"><label>Home</label><url></url><title>Home</title><prepare>true</prepare><urlParams></urlParams><position>0</position></action>
3
</block>

Criando link Fale Conosco – abra o arquivo contacts.xml e insira dentro da tag default o código:

 XML |  copy code |? 
1
<reference name="top.links">
2
    <action method="addLink" translate="label title"><label>Contact Us</label><url>contacts</url><title>Contact Us</title><prepare>true</prepare><urlParams></urlParams><position>900</position></action>
3
</reference>

Para encerrar um exemplo de como remover um determinado link em uma atualização de leiaute por xml:

 XML |  copy code |? 
1
<remove name="wishlist_link"></remove>

ou então:

 XML |  copy code |? 
1
<action method="removeLinkByUrl"><url helper="customer/getLoginUrl"></url></action>

Agora uma boa notícia! O footer_links (links do rodapé) funciona praticamente da mesma forma. Bons estudos!

Na dúvida, use o Fórum da Escola Magento.

Sucesso!

banner do forum seja certificao magento frontend