Modulo de imagem no menu

Essa semana comecei a realizar meu primeiro modulo. Ainda é um modulo que mexe mais com a parte de template, mas aprendi várias coisas. Ele foi baseado em um modulo já existente de menu.

A ideia era criar um menu parecido com o das lojas americanas, com imagens.


As imagens seriam buscadas na imagem da categoria salvas no admin do magento. Elas deveriam ser de tamanho 80×40, onde a primeira (40×40) seria a imagem do menu, e a segunda seria a imagem que aparecia no mouseOver.
Além disso, teria um limite de subcategorias que aparecem, e um botão “ver +”. Clicando nesse botão o usuário iria pra uma listagem das subcategorias.
Esses eram os requisitos solicitados no modulo.

Foi bem simples de fazer, incluí a quantidade de limite de subcategoria para ser setado no admin do magento. O tamanho da div que abre no mouseOver também foi setado pelo admin do magento, pois no modulo inicial ele ocupava todo o espaço, e essa não era mais a ideia.

Na primeira versão eu me baseei muito no modulo existente, achando que ele era a programação ideal, tive que mudar isso na segunda versão.

O css e o js dele eram setados por código php, e eu passei para xml.
Separei o css somente para o menu, sem afetar os outros elementos da página.
Arrumei alguma coisa no JS, para pegar o tamanho da div do mouseOver no admin.

Acho importante contar um pouco sobre o CSS pelo xml.
Todo modulo tem um .xml na pasta layout do seu tema, no meu caso “default/default”. Para setar o css por esse arquivo, basta você criar um reference ao head (onde fica o css e js) e criar a action de adicionar ambos.

Ex.:
<block type="imagemenu/toggle">
<reference name="head">
<action method="addCss"><stylesheet>css/imagemmenu.css</stylesheet></action>
<action method="addItem"><type>skin_js</type><name>js/imagemenu.js</name><params/><if/></action>
</reference>
</block>

Colocar isso em um aquivo php não é o correto, pois você poderá ter problemas caso o seu modulo esteja em um tema do cliente, que não seja default/default
No caso do modulo que eu peguei de base, a chamada do css e do JS estava em “app/code/local/nomeGrupo/nomeModulo/Block/Toggle.php. esse é o jeito errado.

$layout = $this->getLayout();
$head = $layout->getBlock('head');
$head->addItem('skin_js', 'js/md/imagemenu/imagemenu.js');
$head->addItem('skin_css', 'css/md/custommenu/custommenu.css');

Uma coisa importante também, é como chamar um campo que foi criado no admin.
Esse foi o campo que eu criei no admin do magento:

<subcategory_max translate="label comment">
<label>Sub category in menu</label>
<comment><![CDATA[O maximo de sub categorias &eacute; referente a cada categoria do item anterior]]></comment>
<frontend_type>text</frontend_type>
<sort_order>300</sort_order>
<show_in_default>3</show_in_default>
<show_in_website>3</show_in_website>
<show_in_store>3</show_in_store>
</subcategory_max>

Para chamar ele, é usado o nome da primeira tag. Ficou assim:

$max_subcategory = (int)Mage::getStoreConfig('image_menu/general/subcategory_max');

Outra coisa interessante também, é como eu chamei a imagem da categoria. O id já era passado para o método que eu estava mexendo. Com esse id eu consigo buscar os dados da categoria.

$categoriaImg = Mage::getModel('catalog/category')->load($id);
$img = $categoriaImg->getImageUrl();

Acho que é isso..
O modulo foi implementado para um cliente especifico. Caso alguém tenha interesse em implementar esse modulo  em sua loja virtual, entre em contato comigo =)

Anúncios

16 responses to this post.

  1. Mariana,

    aproveitando que você fez algo parecido, ou perto disto, estou montando um código para mostrar as imagens de uma categoria específica, mas aparece apenas a imagem da primeira categoria, as outras não. O nome e a url das categorias aparecem normal, mas a imagem apenas da primeira. Não não me dando conta de onde estou errando. Já que fez algo parecido, pode dar uma olhada aí?

    load($id);
    $subcats = $cat->getChildren();

    foreach ( explode(‘,’,$subcats) as $subCatid ) {
    $_category = Mage::getModel(‘catalog/category’)->load( $subCatid );
    if ( $_category->getIsActive() ) {

    $caturl = $_category->getURL();
    $catname = $_category->getName();
    $catimg = $_category->getImageUrl();
    echo ““;
    }
    }
    ?>

    Responder

    • Acho que o código não saiu certo, tentando de novo:
      load($id);
      $subcats = $cat->getChildren();

      foreach ( explode(‘,’,$subcats) as $subCatid ) {
      $_category = Mage::getModel(‘catalog/category’)->load( $subCatid );
      if ( $_category->getIsActive() ) {

      $caturl = $_category->getURL();
      $catname = $_category->getName();
      $catimg = $_category->getImageUrl();
      echo ““;
      }
      }
      ?>

      Responder

    • Posted by Mariana Dutra on 18 de julho de 2012 at 6:07 pm

      Já recebi seu email, falando que você conseguiu resolver.. desculpe não ter te respondido antes, mas ontem ficou mto complicado pra mim 😀 Apareça sempe!

      Responder

  2. Posted by Mayara Oliveira on 8 de março de 2013 at 12:39 am

    Olá Mariana eu gostaria muito de saber se vc criou o modulo e se vc vende esse modulo enfim tenho interesse em fazer isso em uma loja de um cliente e já rodei a net inteira e não encontrei nada que falasse exatamente oq eu buscava e encontrei aqui no seu blog! Aguardo um retorno e parabéns pelos posts são excelentes!

    Responder

  3. Eu gostaria de implementar e incrementar esse teu modulo, qual e teu email?

    Responder

  4. Posted by Diego Jose Goulart on 15 de maio de 2013 at 8:50 pm

    Oi Mariana, sei que esse post é bem antigo mas estou tentando fazer exatamente a o mesmo tipo de menu.

    No entanto, acredito que sou bem menos experiente que você pois ainda não consegui “pensar” e entender como se cria esse tipo de módulo no Magento.

    Estou estudando bastante, mas as documentações que encontrei não tem sido muito “claras” pra mim.
    Sou como vc era no início, tenho certa dificuldade pra aprender sozinho (risos).

    Será que você poderia me ajudar de alguma forma? Me mostrando onde vc aprendeu a criar esse módulo , ou algo assim.

    Desde já fico grato pela sua atenção.

    Responder

  5. Posted by Alan Faria on 14 de junho de 2013 at 5:07 pm

    Olá alguem conhece algum módulo que deixe um produto promocional todos os dias como a ultima opção da americanas.com.br

    Responder

  6. Olá, comprei um thema no themeforest do magento e gostaria de adicionar esse menu com os icones estilo esse do americanas. Poderia me ajudar ? obrigado!

    Responder

  7. Mariana. Achei muito legal. Mande seu contato para gustavo@sporthall.com.br

    Responder

  8. Olá mariana, estou precisando implementar esse modulo no site em que estou trabalhando, gostaria de algumas dicas.

    Responder

  9. boa tarde mariana, tenho interesse no seu modulo.

    Responder

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

%d blogueiros gostam disto: