...

Como uma imobiliária filtrou 200 imóveis sem AJAX nem JetSmartFilters

Baqueiro Desarrollo Web
Baqueiro Desarrollo Web
Compartilhar Post
Imobiliária com 200 imóveis precisava de filtros funcionais em Elementor sem pagar JetSmartFilters nem complicar com AJAX. Esta é solução que implementamos e como funcionou.
TL;DR
– Cliente: imobiliária local com 200 imóveis em WordPress.
– Problema: precisava de filtros de busca sem AJAX (cache agressivo no hosting).
– Solução: [B] Baqueiro Loop Filter + [B] Applied Filters.
– Resultado: filtros funcionais, URLs compartilháveis, paginação que funciona.

O contexto

Uma imobiliária de porte médio nos procurou com um problema específico. Tinha um catálogo de imóveis em WordPress, usando custom post type “imoveis” com campos ACF para localização, tipo, preço, quartos, e metros quadrados.

O design estava feito em Elementor Pro usando Loop Grid para mostrar listagem de imóveis. Funcionava bem para navegação, mas os clientes queriam algo mais direto: buscar por critérios específicos, como “apartamentos em São Paulo de 2 quartos”.

O problema inicial

A primeira opção óbvia era JetSmartFilters. Avaliamos, mas surgiram dois problemas:

1. Hosting tinha cache agressivo. Era hosting compartilhado com Varnish a nível de servidor. O AJAX do JetSmartFilters entrava em conflito com esse cache – respostas eram cacheadas incorretamente e filtros retornavam resultados inconsistentes.

2. Orçamento era limitado. JetSmartFilters custa 39 reais/ano, mas o cliente já tinha várias assinaturas e queria minimizar custos recorrentes.

Poderíamos ter configurado exceções de cache para AJAX. Mas isso exigia acesso ao servidor — algo que o cliente simplesmente não tinha (hospedagem gerenciada básica).

A solução alternativa

Propusemos uma abordagem diferente: filtros que funcionam por recarga de página completa, escrevendo parâmetros na URL.

Vantagens desta abordagem:

– Compatível com qualquer sistema de cache (cada combinação de filtros gera uma URL diferente, que é cacheada corretamente).
– URLs compartilháveis (o cliente pode enviar link já filtrado: “veja os apartamentos em São Paulo”).
– Paginação nativa, sem depender de JavaScript.
– Menor complexidade técnica.

Desvantagem: cada filtro recarrega a página inteira. Para um catálogo de 200 imóveis em uma hosting decente, isso significa 1-2 segundos de espera. Neste caso, era um trade-off totalmente aceitável.

Implementação técnica

A implementação foi direta. Dividimos em quatro passos:

Passo 1: Configurar Loop Grid

O Loop Grid já existia. Só precisávamos adicionar Query ID para que o plugin de filtro o reconhecesse.

Em Elementor, selecionamos widget Loop Grid -> Query -> Query ID: “my_loop”.

Passo 2: Adicionar filtros de texto

Instalamos [B] Baqueiro Loop Filter e adicionamos três widgets de filtro acima do grid:

Filtro 1: Localização
– Meta Key: localizacao
– Placeholder: “Cidade ou região…”

Filtro 2: Tipo de imóvel
– Meta Key: tipo_imovel
– Placeholder: “Apartamento, casa, comercial…”

Filtro 3: Quartos
– Meta Key: quartos
– Placeholder: “Nº quartos…”

Cada filtro busca correspondência parcial (LIKE) no campo correspondente.

Passo 3: Mostrar filtros ativos

Para que o usuário visse quais filtros tinha aplicados, instalamos [B] Elementor Applied Filters.

Configuramos mapeamento de etiquetas:

– localizacao -> “Cidade”
– tipo_imovel -> “Tipo”
– quartos -> “Quartos”

Adicionamos o widget entre filtros e grid. Agora quando o usuário aplica filtros, vê tags como [Cidade: São Paulo ×] [Tipo: Apartamento ×] e pode remover um critério sem perder os outros.

Passo 4: Ajustar design

Os filtros foram colocados em linha horizontal acima do grid:

[Campo localização] [Campo tipo] [Campo quartos]

Abaixo, tags de filtros ativos:

[Cidade: São Paulo ×] [Tipo: Apartamento ×]

E abaixo, o Loop Grid com imóveis filtrados.

Em mobile, campos se empilham verticalmente.

Resultado

O sistema ficou funcionando com as seguintes características:

Busca funcional. O usuário digita “São Paulo” em localização, “Apartamento” em tipo, “2” em quartos. A página recarrega mostrando apenas os imóveis que correspondem aos três critérios.

URLs compartilháveis. O URL fica como: /imoveis/?my_filters[localizacao]=sao-paulo&my_filters[tipo_imovel]=apartamento&my_filters[quartos]=2

O cliente pode copiar essa URL e enviar por WhatsApp para um comprador interessado — já com exatamente o que ele procura.

Paginação funcional. Se há 15 resultados e o grid mostra 6 por página, a paginação funciona corretamente mantendo os filtros.

Compatível com cache. Cada combinação de filtros gera URL diferente. O cache do Varnish as cacheia individualmente sem conflitos.

Tags de filtros ativos. O usuário sempre verá o que tem filtrado e poderá eliminar critérios individualmente.

O que esta solução não cobre

Para ser transparente, há coisas que o JetSmartFilters faz e esta solução não cobre:

Filtros de faixa. Não há slider de preço mín/máx. O usuário precisa digitar os valores. Para esta imobiliária isto não era crítico – preferiam trabalhar com faixas pré-definidas em botões estáticos.

Checkboxes múltiplos. Não é possível selecionar “Apartamento” e “Cobertura” ao mesmo tempo. É um filtro de texto, não um sistema de seleção múltipla. Para o caso deles, isso era aceitável.

Contagem de resultados por opção. Não mostra “Apartamentos (45)” ao lado de cada opção. É uma busca por texto livre, não faceted search.

Se o cliente precisasse destas funções, o JetSmartFilters seria a opção correta. Mas para o caso deles —busca básica em três campos — a solução leve era suficiente.

Dados pós-lançamento

Dois meses após lançamento:

Uso de filtros: 67% das sessões na página de imóveis utilizam pelo menos um filtro.

Páginas por sessão: Aumentou de 2.3 para 3.8 — os usuários navegam mais porque encontram o que procuram.

URLs compartilhadas: O cliente relata que envia links filtrados constantemente para compradores. “Mando o link com exatamente o que procuram”.

Problemas de cache: Zero. A solução baseada em URL funciona perfeitamente com Varnish.

Custo total

– [B] Baqueiro Loop Filter: 29 reais/ano
– [B] Elementor Applied Filters: 29 reais/ano
– Implementação: 2 horas de trabalho

Comparado ao JetSmartFilters (39 reais/ano) +o tempo para configuração exceções de cache (que poderia nem resolver o problema), esta solução foi mais simples, mais econômica e mais robusta para este caso.

Quando replicar esta solução

Esta abordagem funciona bem quando:

– Tem hosting com cache agressivo que complica o uso de AJAX.
– Precisa de filtros de texto básicos, não um sistema de faceted search complexo.
– URLs compartilháveis fazem a diferença (imobiliárias, catálogos B2B).
– O catálogo é de porte moderado onde a recarga de página ainda é aceitável.
– O orçamento para plugins é limitado.

Não é solução para:

– E-commerce com filtros de preço, cor ou tamanho (WooCommerce exige algo mais avançado).
– Catálogos de milhares de itens onde cada recarga é lenta e impacta a performance.
– Casos onde UX de AJAX (sem recarga) é crítica.

Cada projeto tem os seus requisitos. Este caso demonstra algo que vemos com frequência: nem sempre a solução mais completa é a melhor. Às vezes, a solução mais simples é a que funciona.

Se você está lidando com limitações técnicas — seja de hosting, orçamento ou integrações — e não tem claro qual é a melhor abordagem, faz sentido olhar isso com mais critério antes de decidir.

Neste artigo

Gostou deste Post? Compartilhe:

Posts relacionados: