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 é 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 =)
Primeiros Passos Magento 