Atributos personalizados nos Top Links utilizando XML

Oi pessoal,

A dica que darei a vocês é como colocar atributos personalizados para um link que pertence ao bloco Top Links.

Por que isto parece uma tarefa difícil?

Porque os links são inseridos através do layout.xml, então o HTML é renderizado pela aplicação do Magento, parecendo ficar difícil inserir outros atributos das tags <li> e <a>, como por exemplo: class ou id.

Digamos que você tem um menu de acesso rápido com os seguintes links:

Entrar
Cadastre-se
Minha Conta
Meu Carrinho

E no design da loja que você está montando o link “Cadastre-se” tem um estilo completamente diferente dos outros links.

Iria ser fácil aplicar um estilo se este link fosse o primeiro ou o último da lista, pois além dos pseudo-seletores do CSS (:first-child e :last-child) o Magento põe, por padrão, uma classe first e last nesse tipo de lista.

Mas o layout foi desenhado com o link lá no meio e o cliente quer que seja assim.

Então vamos lá:

No customer.xml você tem a seguinte instrução:

<customer_logged_out>
 <reference name="top.links">
 <action method="addLink" translate="label title" module="customer">
 <label>Log In</label>
 <url helper="customer/getLoginUrl"/>
 <title>Log In</title>
 <prepare/>
 <urlParams/>
 <position>1</position>
 </action>

 <action method="addLink" module="customer">
 <label>Cadastre-se</label>
 <url helper="customer/getRegisterUrl"/>
 <title>Cadastre-se</title>
 <prepare/>
 <urlParams/>
 <position>2</position>
 </action>
 </reference>
</customer_logged_out>

Com a tag <liparams> você pode por o atributo que precisar na sua tag.

Como no exemplo, colocando uma class:

<action method="addLink" module="customer">
 <label>Cadastre-se</label>
 <url helper="customer/getRegisterUrl"/>
 <title>Cadastre-se</title>
 <prepare/>
 <urlParams/>
 <position>2</position>
 <liParams>class="cadastro"</liParams>
</action>

Para colocar um atributo na tag <a> que está dentro da <li> você pode usar a tag xml: <aparams>

<action method="addLink" module="customer">
 <label>Cadastre-se</label>
 <url helper="customer/getRegisterUrl"/>
 <title>Cadastre-se</title>
 <prepare/>
 <urlParams/>
 <position>2</position>
 <liParams>class="cadastro"</liParams>
 <aParams>rel="subsection"</aParams>
</action>
2017-01-24T20:26:20+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x