Mario SAM

Menu Lateral – Modo Avançado

—

por

Mario SAM
em ,

Uma das primeiras customizações a serem feitas em um leiaute brasileiro é colocar o menu na vertical. Como o Magento é um sistema americano, eles seguem um padrão horizontal, enquanto no Brasil fazemos uma amálgama destes modelos.

Para trocar a posição do menu de horizontal para vertical de forma rápida e fácil, siga as dicas deste post: Menu Lateral – Modo Rápido.

Porém o modo rápido tem suas limitações. O que faremos aqui é criar um menu de categorias independente do menu superior.

Criando o bloco

Para carregarmos o menu de forma modularizada, dentro dos padrões do Magento, precisamos criar um bloco que seja referência do nosso menu vertical.

Isso pode ser feito em diversos pontos do sistema, mas neste exemplo irei criar o bloco dentro do page.xml para facilitar o entendimento. De preferência faça isso no seu template/tema personalizado, aqui irei usar o base/default do Magento mesmo.

app/design/frontend/base/default/layout/page.xml

Dentro do bloco name=”left“ eu vou criar meu bloco customizado, para ser exibido sempre que a coluna da esquerda estiver habilitada no meu template.

Basta adicionar essa linha de bloco dentro do block left (ou right). Se você não entendeu o que esta tag esta fazendo, leia o post Entendendo o block do XML – Estrutura de templates.

Criando a apresentação

Agora vem a parte mais difícil, criar o arquivo phtml que vai apresentar o conteúdo, ou seja, montar o menu de categorias dentro do template.

Na verdade, o Magento já possui algo nesse sentido. Quando você cria categorias com opção de filtros, o sistema mostra no frontend um menu lateral durante a navegação de categorias. O arquivo responsável por montar o menu se chama left.phtml.

app/design/frontend/base/default/template/catalog/navigation/left.phtml

Então o arquivo que você vai criar agora, vai ter exatamente o mesmo código que o arquivo acima. Só iremos tirar a linha que identifica a categoria selecionada.

app/design/frontend/base/default/template/catalog/category/menu.phtml

Você não precisa deixar o arquivo exatamente igual a este, aqui você tem a liberdade de editar o menu da maneira como achar melhor. Estou apresentando dessa maneira para manter este exemplo simples. Seu arquivo menu.phtml fica assim:

getCurrentChildCategories() ?>
count(); ?>

__('Browse By') ?>
__('Category') ?>

    getIsActive()): ?>

  1. <a href="getCategoryUrl($_category) ?>"isCategoryActive($_category)): ?> class="current">htmlEscape($_category->getName()) ?> (getProductCount() ?>)

decorateDataList('narrow-by-list2')

Pronto! Já pode fazer o teste e conferir o resultado.

O pulo do gato

Como eu falei antes, o arquivo de menu lateral já existe no Magento, tudo que eu precisei fazer foi copiar seu conteúdo e retirar a linha:

Essa linha identifica a categoria selecionada pelo usuário. Mas como queremos apresentar o menu em qualquer tela de navegação, não precisamos verificar nada de início.

Outro código que vale a pena comentar:

getCurrentChildCategories() ?>

Aqui recebemos as categorias já carregadas pelo sistema. E você pode estar perguntando: Mas como? Que bruxaria foi essa? Como essa variável $this->getCurrentChildCategories() foi carregada e eu não vi!?

Elementar meu caro Watson. Quando você especificou que o tipo do bloco seria “catalog/navigation“, você carregou a classe de categorias, como eu já expliquei no post Entendendo o block do XML – Estrutura de templates.

Dica: Caso você queira um menu lateral formado a partir de uma subcategoria, basta mudar essa chamada, informando o ID da categoria desejada.

Bom, o resto é praticamente Css e Html. Agora é a vez dos artistas continuarem trabalhando no menu para aplicarem aqueles efeitos monstruosos.

Sucesso!