Bem vindo ao brockdev.com, não seja tímido compartilhe suas duvidas e conhecimento. :D

Efeito acordeon Filtos magento, expandir e recolher .click

Jonatan Machado Moderador Global, Administrador
editado October 2013 em JAVASCRIPT
Ola pessoal dessa vez vou mostrar como fazer os filtros lateral do magento fiquem com efeito acordeon tipo dessa imagem



Aqui vai ser feito em jquery que eu acho mais fácil, mais podendo ser feito com javascript também.
Primeira mente verifique se seu protejo ja tem alguma versão do jquery caso nao tenha voce pode adicionar uma verçao baixando daqui http://jquery.com/download/ e adicionando o arquivo jquery na pasta js/ do seu projeto.
Incluir a chamada da jQuery no arquivo layout/page.xml no block head:
<action method=\"addItem\"><type>skin_js</type><name>js/jquery.js</name></action>


Depois inclua o script em
Sistema>Configuraçao>Visual>Cabeçalho HTML>Outros Scripts
<script type=\"text/javascript\">
/* <![CDATA[ */
jQuery(document).ready(function(){
jQuery('dl#narrow-by-list> dt span').click(function(e) {
jQuery(this).parent() .next().slideToggle('fast');
jQuery(this) .toggleClass('bg1');
return false;
});
});
/* ]]> */
</script>


Depois voce apenas altere este arquivo view.phtml
/www/app/design/frontend/default/SEU-TEMA/template/catalog/layer/view.phtml
esta parte :
<dt><?php echo $this->__($_filter->getName()) ?></dt>

por esse:
<dt><span><?php echo $_filter->getName() ?></span></dt>


Altere o css e pronto. :D
Abraço.
Arsenal Web Design.com
Desenvolvimento de Lojas Virtuais
Magento | Zend Framework | HTML5 | CSS3 | Blogs
image
E-mail: contato@brockdev.com

Comentários

Entre ou Registre-se para fazer um comentário.