Olá pessoal!
Hoje irei postar uma dica sobre como inserir um menu dropdown com as categorias ao lado do campo de busca rápida. A seleção desse menu será usada como filtro para os resultados da busca do cliente. Nessa dica (e como em todas as outras postagens no blog) irei usar como referência o tema default. Caso você utilize um tema diferente, acredito que o primeiro passo será igual para todos os temas, quanto ao segundo, sugiro utilizar o firebug para identificar as classes corretas para alterar o css.
1º Passo - Inserir o filtro de categorias ao lado do campo de busca rápida.
Abra o arquivo form.mini.phtml (app-> design-> frontend-> default-> SeuTema-> template-> catalogsearch) e procure a seguinte linha:
<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
Antes dela, insira o seguinte código:
<?php
$category = Mage::getModel('catalog/category');
if(is_object(Mage::registry('current_category'))){
$currentCategoryPath=Mage::registry('current_category')->getPathIds();
}else{
$currentCategoryPath = array();
}
$category->load(Mage::app()->getStore()->getRootCategoryId());
$childrenString = $category->getChildren();
$children = explode(',',$childrenString);
$categoryOptions='';
foreach($children as $c){
if($this->getRequest()->getParam('cat')==""){
$selected = (in_array($c, $currentCategoryPath))?'SELECTED':'';
}else{
$selected = ($this->getRequest()->getParam('cat')==$c)?'SELECTED':'';
}
$categoryOptions.= '<option value="' . $c . '" ' . $selected . '>' . $category->load($c)->getName() . '</option>' . "\n";
}
?>
Ainda no form.mini.phtml, procure o seguinte trecho:
<input id="search" type="text" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" class="input-text" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" />
Logo após ele, insira o seguinte código:
<select name="cat" id="cat">
<option value="">Todas as Categorias</option>
<?php echo $categoryOptions ?>
</select>
2º - "Arrumar" o layout no tema default.
Após inserir o dropdown com as categorias, pode-se notar que o layout do formulário de busca fica desconfigurado. Para consertar isso e deixar igual a imagem do ínicio dessa postagem, você terá que fazer o seguinte:
- Aumentar a largura da imagem do plano de fundo:
No tema default, a imagem responsável pelo background é a bkg_form-search.gif (skin-> frontend-> default-> default-> images), o que eu fiz foi aumentar a largura dela para 500px, deixando-a assim:
Fiz isso para que ela fique posicionada corretamente abaixo do campo de busca, do dropdown das categorias e do botão procurar. Caso você use o tema default e queira fazer isso, basta copiar a imagem acima para o diretório em questão, substituindo a antiga.
- Alterar o css:
Todos os passos a seguir são realizados no arquivo styles.css (skin-> frontend-> default-> default-> css).
Procure a classe:
.header .form-search {
E altere a largura para 490px (width:490px;).
Procure a classe:
.header .form-search button.button {
E altere o float para right (float:right;) e acrescente a propriedade margin-right:20px;
Acrescente a classe:
select#cat { float:left;}
Seguindo todos os passos corretamente, o mini formulário de busca da sua loja deverá ficar parecido com o da imagem (se você utiliza o tema default, é claro!).
Então é isso, qualquer dúvida, sugestão, correção, deixe um comentário!
=)
Fonte: add category list on search form in magento
Show xD esta cada vez melhor seu blog
ResponderExcluirObrigada Jonatan! ^.^
ExcluirPor que você não cria um blog também? Tenho certeza que você tem muita coisa para compartilhar!
=)
Muito bom!! Mas no meu caso so apareceu a primeira categoria...
ResponderExcluirPode-me ajudar?
Olá Reinaldo!
ExcluirAs categorias que aparecem nesse filtro devem:
- ser subcategorias da categoria principal (se você não renomeou essa categoria, deve ser a Default Category);
- estar ativas.
Verifique na sua loja se a estrutura de categorias está dessa forma. Qualquer dúvida, passe o link da sua loja para que eu possa verificar!
Espero que te ajude!
=)
Pois a minha estrutura nao estava organizada desta forma... tinha um monte de categorias-mae e por isso é k nao aparecia... no entanto o meu formulario nao funciona... aqui esta o link http://www.maisfranchising.pt/index.php/home. no meio esta o formulario mas so funciona por enquanto por palavras-chave... sera possivel editalo para funcionar com os dois seguintes dropdowns?? Obrigado pela atençao
ResponderExcluirReinaldo, pelo que pude notar, a url está errada. Ao pesquisar, aparece assim:
Excluirhttp://www.maisfranchising.pt/index.php/catalogsearch/result/?q=TermoBuscado&catagory=4&price=37
E deveria aparecer assim:
http://www.maisfranchising.pt/index.php/catalogsearch/result/?q=TermoPesquisado&cat=4&price=37
Ou seja, ao invés de ele usar o cat=4, usa o catagory=4.
Não sei exatamente o que está ocasionando esse erro, então verifique se o código do seu form.mini.phtml está igual ao postado nessa dica.
Se você quiser, te envio o meu form.mini.phtml para testar, basta me passar seu e-mail.
Como que eu faço para filtar outra categoria sem ser a default?
ResponderExcluirOlá!
ExcluirEle não filtra a categoria default, e sim acrescenta ao filtro as subcategorias da categoria root (categoria principal, no caso a default). Ao entrar em uma categoria, se você utilizou o código acima, poderá notar que o filtro mudará para a categoria atual (corrente).
Se você quiser "pegar" as sucategorias de uma outra categoria, basta substituir esse código:
$category->load(Mage::app()->getStore()->getRootCategoryId());
Por esse:
$category->load(11);
Aonde 11 é o id da categoria.
O meu email e reinaldo.brito8@gmail.com.
ResponderExcluirAgradecia algumas luzes para poder terminar.
Muito obrigado
Olá Reinaldo!
ExcluirEntrarei em contato ainda hoje!
=)