quinta-feira, 6 de setembro de 2012

Tutorial: Acrescentar links no menu do topo


Uma dúvida muito comum entre os novos usuários do Magento, e que eu tenho visto bastante no fórum, é como acrescentar links no menu de categorias (topmenu).
Nesse tutorial vou ensinar o passo-a-passo de como fazer isso, utilizando o tema default do magento.


Primeiramente você deve abrir o arquivo .phtml responsável pelo seu menu do topo.
Se você utiliza uma versão anterior a 1.7 terá que editar o arquivo top.phtml:
app->design->frontend->default->SeuTema->template->catalog->navigation

Agora, se você utiliza a versão 1.7 em diante, terá que editar o arquivo topmenu.phtml
app->design->frontend->default->SeuTema->template->page->html

Caso você não encontre esse arquivo no seu tema, copie o do tema base para o seu tema antes de alterar (criando as respectivas pastas).

Em ambos os casos, o arquivo terá a estrutura parecida(ou igual) a essa:

<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
    <ul id="nav">
        <?php echo $_menu ?>
    </ul>
</div>
<?php endif ?>


 E os links a serem acrescentados terão estrutura similar a essa:

     <li><a href="<?php echo $this->getUrl('Nome na URL')?>"><?php echo $this->__('Nome a ser exibido no Menu') ?></a></li>

Observações: Aonde está escrito 'Nome a ser exibido no Menu' você pode modificar (alterar o texto) da maneira que quiser, não interferindo na url!

Colocando em prática!

Vamos supor que você queira colocar um link Home, antes das categorias. Para isso, basta adicionar a seguinte linha:

<li><a href="<?php echo $this->getUrl('') ?>"><?php echo $this->__('HOME'); ?></a></li>

Antes de

<?php echo $_menu ?>

Que é responsável pela exibição das categorias!
O código ficará assim:

<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
    <ul id="nav">
     <li><a href="<?php echo $this->getUrl('') ?>"><?php echo $this->__('HOME'); ?></a></li>
        <?php echo $_menu ?>
    </ul>
</div>
<?php endif ?>


E se, além do home, você quiser acrescentar os links Contatos (Fale Conosco), Empresa (Sobre Nós) e Carrinho?
Seu código ficará assim:

<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
    <ul id="nav">
     <li><a href="<?php echo $this->getUrl('') ?>"><?php echo $this->__('HOME'); ?></a></li>
     <li><a href="<?php echo $this->getUrl('contacts')?>"><?php echo $this->__('FALE CONOSCO') ?></a></li>
     <li><a href="<?php echo $this->getUrl('about-magento-demo-store')?>"><?php echo $this->__('EMPRESA') ?></a></li>
     <li><a href="<?php echo $this->getUrl('checkout/cart')?>"><?php echo $this->__('CARRINHO') ?></a></li>
        <?php echo $_menu ?>
    </ul>
</div>
<?php endif ?>


Para acrescentar links externos, basta utilizar a seguinte estrutura:

     <li><a href="http://url-do-site"><?php echo $this->__('Nome a ser exibido no Menu') ?></a></li>

E para deixar apenas os links, sem categorias, basta comentar a seguinte linha:

        <?php echo $_menu ?>

Deixando-a assim:

       <!-- <?php echo $_menu ?>-->

Basicamente é isto, qualquer dúvida, correção ou sugestão deixe um comentário!
:)

15 comentários:

  1. e como eu faço para editar o $_menu.
    qual é o arquivo php que gera este item??
    exemplo, eu quero pegar a imagem que colocar na categoria e fazer aparecer na frente do menu...

    ResponderExcluir
    Respostas
    1. Olá!
      Acho que o arquivo seria o: app->code->core->Mage->Page->Block->Html->Topmenu.php

      Excluir
  2. Sensacional... me ajudou bastante!

    Obrigado!

    ResponderExcluir
  3. No caso da versão 1.7+ editar aqui APP>DESIGN>FRONTEND>BASE>DEFAULT>TEMPLATE>PAGE>HTML> E EDITAR O TOPMENU.PHTML

    ResponderExcluir
    Respostas
    1. Olá Sandro!
      Não é aconselhado editar os arquivos do tema base, por isso faça uma cópia do topmenu.phtml para o diretório do seu tema.
      :)

      Excluir
  4. Obrigado pelo post, além de conseguir aplicar o tutorial deixo aqui uma informação importante que descobri, é bom lembrar que para determinados temas como o que estou utilizando hellowired ao iserir o aquivo topmenu.phtml dentro da pasta app->design->frontend->default-> hellowired-> template-> page->html, não funcionou para este tema ele procura o arquivo top.phtml que esta no caminho mencionado acima app->design->frontend->default->SeuTema->template->catalog->navigation
    após abri-lo é só copiar e colar as
    li que irar compor o menu conforme mencionado acima funcionou
    perferitamente, a versão que utilizo acima 1.7.0.2 espero tb ter contribuido, só mais uma pequena e chata dúvida no meu menu ao invés de exibir Home ta exibindo Principal como mudo para home?
    Abraços a todos da comunidade magento.
    Claudio

    ResponderExcluir
    Respostas
    1. Olá Claudio!
      Fico feliz que o tutorial tenha te ajudado! =)
      Quanto a sua informação, realmente alguns temas utilizam o top.phtml para construir o menu principal, mesmo nas versões superiores a 1.7. Para quem tem dúvida sobre qual arquivo alterar, sugiro ativar o debug (mais informações, consulte o blog do Mario SAM).
      Sobre o termo "Principal", isso acontece porque deve haver uma tradução para o termo Home dentro do seu pacote de tradução. Sugiro utilizar a tradução inline para alterar esse termo. Se você quiser alterar diretamente no arquivo de tradução, esse termo se encontra no seguinte arquivo:
      app-> locale-> pt_BR-> Mage_Catalog.csv

      Excluir
  5. Olá, Referência Magento, Valeu pela dica, quanto alteração do termo principal, localizei o arquivo app-> locale-> pt_BR-> Mage_Catalog.csv, e realmente na linha 230, estava o termo Home,"Principal", e no lugar de Principal alterei para Home, limpei o cache do magento, mais não acontecu nada não muda o nome Principal, o mesmo acontece para os titulos das sider bar no front end, ('mudo nome') no arquivo .phtml, e não muda no front tem alguma dica? obs: estou com debug habilitado, indo direto na fonte, abraços.

    ResponderExcluir
  6. Olá Claudio!
    Eu utilizo a tradução inline:
    http://onespace.com.br/magento/traducao-inline-aprenda-a-utilizar-essa-otima-ferramenta-do-magento/
    É fácil e rápida de fazer, só que os termos traduzidos ficam salvos no banco de dados.

    ResponderExcluir
  7. Opa, Ei, apliquei o excelente tutorial, mais uma vez obrigado como é bom contar com ajuda de experts em magento,obrigado pela postagem! Abraços a todos!
    Claudio

    ResponderExcluir
  8. Amigos, por favor uma ajuda...estou utilizando o tema default em minha loja virtual..eu quero mudar o "header" e inserir algo customizado, seja uma cor sólida ou algo que queira, usei o firebug e consegui localizar a origem e o tamanho da "foto a ser alterada", o caminho é este;

    /skin/frontend/default/default/css/../images/bkg_header.jpg

    2000 x 150

    aí eu entrei no FTP, retirei esse "bkg_header.jpg", criei uma cor sólida no mesmo formato e mesmo nome "bkg_header.jpg" e joguei na mesma pasta...e nada mudou, o topo do meu site não deveria ter mudado?

    Existem outras alterações que devem ser efetuadas? Por favor me auxiliam com essa minha dúvida?

    Abs

    Daniel

    ResponderExcluir
    Respostas
    1. Olá Daniel!
      Poste sua dúvida no Fórum da Comunidade Magento:

      http://www.comunidademagento.com.br/forum/

      Diversas pessoas irão te ajudar!
      =)

      Excluir