Assim que temos o Magento instalado e funcionando, com produtos e categorias cadastradas, queremos personalizar o leiaute da loja. Fazer uma mudança aqui, um ajuste ali.
E uma das primeiras dúvidas é: – Como colocar o menu de categorias na lateral da página (esquerda / direita) ?
Vejamos como aplicar essa alteração de maneira rápida e fácil usando o template default (padrão) do Magento. Também preparei um post mostrando outra forma de fazer esse menu lateral, digamos um modo avançado, pra ser aplicado em qualquer template (clique aqui para ler).
Mudando de posição
O que faremos na verdade é mudar a posição do menu, mover da referência “header” para a referência “left” ou “right“.
Para isso você deve abrir o arquivo page.xml que fica em:
a partir da versão 1.4.x
app/design/frontend/base/default/layout/page.xml
antes da versão 1.4.x
app/design/frontend/default/default/layout/page.xml
Encontre o block com name=”header“ e retire a linha “topMenu“:
Esse bloco é responsável por carregar as informações e preprar o menu para ser exibido na página. Agora tudo que precisamos fazer é adicionar esse bloco a referência lateral que desejamos “left” ou “right” (esquerda / direita) que fica neste mesmo arquivo page.xml:
Basicamente isso é tudo que você precisa fazer para retirar o menu de categorias da horizontal e apresentar na vertical. Faça o teste!
Ajustes de leiaute
Como você deve ter notado, agora o menu é carregado na lateral esquerda do seu template. Porém, ele continua sendo montado na posição horizontal. Mas isso é fácil de resolver… puro CSS styles.
Basta que você abra o arquivo styles.css que fica em:
skin/frontend/default/default/css/styles.css
Antes da versão 1.4.x o nome do arquivo era boxes.css
Procure pela referência “.nav-container” que agrupa os estilos do menu, e altere tamanho do class #nav de 918px para 195px:
#nav { width:195px; }
E informe um tamanho para a class #nav li de 150px:
#nav li { width:150px; }
Atualize sua página e veja o resultado. Talvez seja necessário atualizar o cache do sistema e do seu navegador.
Limitações
Sim. Este modo é rápido, porém limitado. Ele não permite que você use o menu horizontal e vertical ao mesmo tempo, pois você está movendo ele de posição. E também não permite customizar o menu… ah não ser o design dele pelo css.
Por isso eu preparei um novo post, mostrando em modo avançado como exibir o menu de categorias na lateral do site.
Dúvidas usem o fórum.escolamagento.com
Sucesso!