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:

magento-imagem-filtro-01

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!).

2017-01-24T20:26:20+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x