Dica: Acrescentrar filtro de categorias na busca rápida

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