Magento 1.9 botão view all no menu e como modificar

Olá, já reparou que o magento 1.9 tem um btão extra no menu? Usando o pacote de idiomas e português ele não é traduzido e ainda falta um espaço. Um amigo me questionou como tirar este botão e como esta pode ser a dúvida de muito mais gente eu resolvi escrever este artigo para responder e dar ainda mais dicas de personalização.

Para executar este tutorial é aconselhável que já tenha visto como criar um tema responsivo no Magento 1.9 principalmente como trabalhar com arquivos de layout e como personalizar a tradução dentro do tema. Então vamos lá

Não exclua o botão view all ou esconda-o totalmente

O botão view all é um recurso muito importante para tablets e smartphones, isso porque quando o menu muda para se adaptar a esses dispositivos o menu principal deixa de ser um link, se você excluir o botão view all simplesmente o usuário em um aparelho não poderá acessar as categorias principais e isso é muito ruim

Esconda o botão view all apenas onde ele não é necessário

Ao invés de excluir vamos ocultar somente quando ele não for necessário com CSS, mas antes vamos acrescentar uma classe no view all para que fique mais fácil de se controlar.

Copie o arquivo renderer.phtml pra dentro do seu projeto ele fica localizado em

app/design/frontend/rwd/default/template/page/html/topmenu/renderer.phtml

Entre a linha 62 e 71 você vai encontrar este trecho:

   if (!empty($_hasChildren)) {
       $html .= '<ul class="level'. $childLevel .'">';
       $html .=     '<li class="level'. $nextChildLevel .'">';
       $html .=         '<a class="level'. $nextChildLevel .'" href="'. $child->getUrl() .'">';
       $html .=             $this->__('View All ') . $this->escapeHtml($this->__($child->getName()));
       $html .=         '</a>';
       $html .=     '</li>';
       $html .=     $this->render($child, $childrenWrapClass);
       $html .= '</ul>';
   }

Altere a linha $html .=     ‘<li class=”level’. $nextChildLevel .'”>’; para $html .=     ‘<li class=”level’. $nextChildLevel .’ view-all“>’;

Então fica assim:

   if (!empty($_hasChildren)) {
     $html .= '<ul class="level'. $childLevel .'">';
       $html .=     '<li class="level'. $nextChildLevel .' view-all">';
       $html .=         '<a class="level'. $nextChildLevel .'" href="'. $child->getUrl() .'">';
       $html .=             $this->__('View All ') . $this->escapeHtml($this->__($child->getName()));
       $html .=         '</a>';
       $html .=     '</li>';
       $html .=     $this->render($child, $childrenWrapClass);
       $html .= '</ul>';
   }

 

Alteração css

Abra o style.css do seu Projeto e vamos acrescentar a seguinte regra:

@media only screen and (min-width: 771px) {
.view-all {
   display: none;
}
}

Assim o botão não aparece em resoluções maiores.

Melhorando a tradução

Esta é a parte mais simples, caso você já tenha criado o seu arquivo translate.csv dentro do seu projeto, basta abrir e copiar a seguinte linha no final do arquivo:

“View All “,”Tudo de “

Aqui funcionou corretamente, mas se por algum motivo a tradução não funcionar, experimente atualizar o cache, se não resolver edite diretamente no pacote de tradução do Magento que fica no arquivo:

App/locale/pt_BR/Mage_Page.csv

Mas atenção só altere no pacote de tradução como ultimo recurso.

Observação: eu traduzi view all para tudo de porque achei mais conveniente, você pode traduzir da forma que achar melhor para seu layout

Gostou? Qualquer dúvida deixe um comentário aqui em baixo

Um abraço e até a próxima.