Adicionar Categorias ao Formulário de Busca

magento-categorias-formulario-busca-01

Neste tutorial irei explicar como adicionar um filtro por categoria na busca que se encontra no topo da loja.

O tutorial foi realizado no tema padrão do Magento e para funcionar em temas personalizados, os arquivos equivalentes devem ser alterados.

O primeiro passo é abrir o arquivo /app/design/frontend/base/default/template/catalogsearch/form.mini.phtml e procurar por:

<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">

Logo antes desta linha, adicione:

<?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";
}
<!--DVFMTSC-->?>

No mesmo arquivo procure por:

<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 esta linha adicione o seguinte código:

<select name="cat" id="cat">
<option value="">All Categories</option>
<?php echo $categoryOptions ?>
</select>

Vamos agora alterar o CSS, começaremos pelo arquivo /skin/frontend/default/default/css/style.css, procure por:

.header .form-search { position:absolute; top:0; right:29px; width:315px; height:30px; background:url(../images/bkg_form-search.gif) 0 0 no-repeat; padding:1px 0 0 16px; }

Altere para (somente o width foi alterado para 430px):

.header .form-search { position:absolute; top:0; right:29px; width:430px; height:30px; background:url(../images/bkg_form-search.gif) 0 0 no-repeat; padding:1px 0 0 16px; }

No mesmo arquivo procure por:

.header .form-search button.button { float:left; }

Altere para:

.header .form-search button.button { float:right; margin-right:20px; }

Logo após a última linha adicionada, vamos adicionar isto:

.header .form-search select { float:left;}

Agora só precisamos alterar a imagem bkg_form-search.gif para o tamanho correto.

Vocês podem utilizar a imagem abaixo já alterada para enviar para a pasta:

skin/frontend/default/default/images

magento-imagem-categorias-01

Após finalizar todos os passos, ficará assim:

magento-imagem-categorias-02

Espero que tenham gostado do tutorial e qualquer dúvida postar em:  www.forum.magentobr.com

2017-01-24T20:25:11+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x