terça-feira, 4 de junho de 2013

Tutorial: Customizar o menu do topo usando o Css Menu Maker


Olá pessoal!
Hoje irei ensinar como customizar o menu que fica no topo da loja usando Css Menu Maker. Antes de começar, quero fazer algumas observações:

* Primeiramente, existem diversos menus no site (como pode ser visto aqui), mas, para utilizar no topo da loja, é necessário que ele seja horizontal e contenha submenus;
* Alguns menus não são free;
* Os menus que não possuem submenus só poderão ser utilizados por lojas que não possuem subcategorias;
* Com o código que eu irei passar, apenas as categorias principais e suas subcategorias irão aparecer no menu.

Agora chega de enrolação e vamos para o passo-a-passo:


Passo - Escolha um dos menus no site: http://cssmenumaker.com/css-drop-down-menu e faça o download dele clicando em Download Source.
Os menus exibidos na imagem do ínicio dessa postagem são os do modelo opera e possuem diversas cores, como pode ser visto no próprio site.

Passo - Após fazer o download, extraia os arquivos e renomeie o styles.css (cssmenu-> menu_assets) para menu.css.

Obs: Você poderá renomear o arquivo da maneira que quiser.

Passo - Mova o menu.css para o diretório css do seu tema no Magento: skin-> frontend-> default-> Seu Tema-> css

Passo - Abra o seu page.xml (app-> design-> frontend-> default-> Seu Tema-> layout) e procure a seguinte linha:

                <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>

Logo após ela, insira o seguinte código:

                <action method="addCss"><stylesheet>css/menu.css</stylesheet></action>

Passo - Abra o arquivo responsável pela construção do menu do topo na sua loja. Em alguns temas, esse arquivo é o topmenu.phtml (app-> design-> frontend-> default-> SeuTema-> template-> page-> html), em outros é o top.phtml (app-> design-> frontend-> default-> SeuTema-> template-> catalog-> navigation). Para ter certeza sobre qual arquivo alterar, utilize o debug: Qual arquivo alterar – Debug em Frontend

Após abrir o arquivo, substitua todo o seu conteúdo pelo seguinte código:

<div id='cssmenu'>
<?php $_helper = Mage::helper('catalog/category') ?>
<?php $_categories = $_helper->getStoreCategories() ?>
<?php $currentCategory = Mage::registry('current_category') ?>
<?php if (count($_categories) > 0): ?>
<ul>
        <?php foreach($_categories as $_category): ?>
            <li class='has-sub'>
                <a href="<?php echo $_helper->getCategoryUrl($_category) ?>">
                    <?php echo $_category->getName() ?>
                </a>
                <?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
                <?php $_subcategories = $_category->getChildrenCategories() ?>
                <?php if (count($_subcategories) > 0): ?>
                    <ul>
                        <?php foreach($_subcategories as $_subcategory): ?>
                            <li>
                                <a href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>">
                                    <?php echo $_subcategory->getName() ?>
                                </a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>
</div>


Passo - Após seguir todos os passos anteriores corretamente, o menu já deverá aparecer na sua loja. Só que, provavelmente, haverá um problema com alinhamento que poderá ser resolvido acrescentando no arquivo menu.css as propriedades:

width:950px; margin:0 auto;

Na classe:

#cssmenu {

7º Passo - Caso o menu escolhido possua imagens (cssmenu-> menu_assets-> images), mova-as para a pasta images do seu tema (skin-> frontend-> default-> SeuTema-> images) e no arquivo responsável pelo css (no caso do tutorial, o menu.css) acrescente ../ (dois pontos e barra) antes do caminho da imagem. Por exemplo, aonde estiver:

background: url(images/highlight-bg.png) repeat;

Você deixará assim:

background: url(../images/highlight-bg.png) repeat;




Então é isso, qualquer dúvida, correção ou sugestão, deixe um comentário!

=)

5 comentários:

  1. Consegui fazer, com um template, que considero um pouco mais complicado, porem estou com dificuldades, preciso separar o menu de categorias de produtos do menu horizontal, cara será que ninguém consegue explicar de forma correta como se faz, já procurei em vários tutorias eu não sei como tem pessoas que investe tempo desenvolvendo uma vídeo aula ou tutorial que não dá em nada, que NÃO é o seu caso Ref. Magento, eu consegui aplicar o tutorial o menu ficou show de bola mais como disse eu preciso de um menu vertical lateral totalmente independente do horizontal, eu até consegui aplicando o Tutorial: Acrescentar links no menu do topo, porém e para inserir as subcategorias?De forma que apareça somente as sub categorias no menu horizontal com efeito css do menu indo para suas respectivas páginas?
    Tá complicado achar material para estudo comprei o livro do André achando que pelo menos conseguiria desenvolver o mínimo para o começo de um layout que é o menu, nem isso é explicado no livro tá mais para quem administra do que desenvolvedor, Ajuda aê Abraços!

    ResponderExcluir
    Respostas
    1. Olá Claudio!
      Entre em contato comigo pelo e-mail:

      ale.srodrigues@live.com

      Excluir
  2. Olá Claudio!
    Cara, estou tendo problema com a submenu do topmenu do meu site, ela ( A submenu) só carrega na pagina de produtos, na home page isso não acontece...Eh pedreira!
    Vendo o seu tutorial fiquei muito animado, pois estava crente que resolveria meu problema, e de fato, cheguei perto, porem, o resultado não foi o esperado, o tutorial é excelente, mas acredito que algo saiu errado, por isso, achei que deveria compartilhar esse ocorrido com vc...
    Bom, eu escolhir um menu horizontal com uma submenu, seguir todos os passos, porem, o resultado foi esse...O conteudo do menu aparece agora na vertical e inclui o conteudo da submenu alinhado abaixa respectivamente, também ocorre que o estilo css não foi aplicado, todo o conteudo tanto do menu quanto da submenu aperece em letra comum...
    Esse é meu site:http://www.tccomercio.com.br
    Gostaria que desse uma olhada e comentasse o que ocorre nesse caso...
    Fico grato desde já.
    Att
    Claudio R Gomes
    claudiosuassuna@gmail.com

    ResponderExcluir
  3. Tá só coloquei o css, e a estrutura (html) coloco onde???

    ResponderExcluir
    Respostas
    1. Olá!
      Você não usará o html do menu, pois assim terá que criar os links manualmente.
      Se você seguir o tutorial, verá que no passo 5 tem um código que "chama" automaticamente as categorias no magento e foi adaptado para a utilização desse menu.

      Excluir