MaxImóbi - Tema Imóbiliario WorkControl Versão Descontinuada
Importante:
A primeira versão do projeto MaxImobi foi descontinuada! Por favor, utilize a nova versão!
Parabéns por adquirir o tema imobiliário MaxImóbi!
MaxImóbi é um tema desenvolvido para o CMS WorkControl, voltado para o segmento imobiliário, focado em usabilidade, performance e com estratégias de alto poder de conversão.
Dedicamos toda nossa atenção para oferecer a melhor experiência e performance de uso, tornando seu projeto incrível e poderoso. Sempre focando nos padrões mais recentes de desenvolvimento de projetos web.
Se você realmente gosta do nosso trabalho, deixei sua avaliação em nosso perfil no Google Business, isso realmente nos motiva a oferecer projetos cada vez melhores. ★ ★ ★ ★ ★
Para que esse projeto continue recebendo atualizações de aprimoramento e correções, é importante que os custos dele sejam cobertos pela comercialização do mesmo.
Esperamos que respeite nosso trabalho, garantindo que somente pessoas que o adquiriram em nossa plataforma se beneficiem do uso dele.
Premissas de Desenvolvimento
Como forma de orientação durante o desenvolvimento, utilizamos as seguintes premissas de desenvolvimento:
Aproveitar os recursos pré existentes do WorkControl;
Não criar novas Apps;
Não modificar as Apps existentes, modificando apenas os widgets quando necessário;
Substituir reset de estilo e de javascript padrão do WorkControl pelo Bootstrap 4.x;
Oferecer uma experiência aprimorada para o usuário, focando em performance e conversão.
Paleta de Cores
A paleta de cores utilizada no tema é a paleta do Bootstrap 4.x. Fizemos dessa forma para facilitar a customização de acordo com a sua necessidade.
Com o objetivo de aproveitar os recursos de auto inclusão de arquivos já existente do WorkControl, utilizamos as pastas padronizadas wc_js e wc_css, para a inclusão de todos os arquivos de estilo e de javascript do tema.
Como alguns desses arquivos possuem dependências de ordem de carregamento, numeramos esses arquivos para que carreguem na ordem correta.
Recursos Renovados
Como já dito anteriormente, esse tema foi desenvolvido utilizando o Bootstrap 4.x e também utilizamos outros plugins baseados da biblioteca jQuery.
Isso nos permitiu customizar e melhorar alguns widgets pré existentes do WorkControl
Assim, além de melhorar a experiencia do usuário nesse tema, você poderá reutilizar esses widgets em outros projetos, podendo dispensar os bots originais do WorkControl
Importante:
Os widgets que foram customizados, estão com o prefixo “max_”, assim será possível distinguir mais facilmente os recursos utilizados no tema.
Sistema de Comentários
Mantendo a mesma essência, o sistema de comentários foi reestilizado utilizando o Bootstrap 4.x
Com isso a integração da App Comments em qualquer tema será muito mais harmoniosa, melhorando a experiencia do usuário em seus projetos.
A interação com o sistema de avaliação e com os "likes" foram modificados para melhorar a interface.
Widget Account
Devido a estrutura original do WorkControl, optamos por manter o padrão visual do Widget Account.
Apenas adotamos os recursos do Bootstrap 4 e também adicionamos um novo formulário de contato diretamente no painel do usuário
Widget Share
O widget de compartilhamento passou por atualizações, removemos o sistema de compartilhamento via Google Plus (já que o mesmo foi descontinuado) e adicionamos um botão de impressão acionado por Javascript.
Para complementar o recurso de impressão, as páginas single de artigos e imóveis foram customizadas para que a impressão não exiba outros elementos do site, entregando um conteúdo totalmente limpo, facilitando a apresentação do conteúdo e/ou compartilhamento por PDF.
Blog
No blog mantemos a estrutura visual semelhante a padrão do WorkControl, porém cuidamos para que não houvesse erros de direcionamento na navegação do site pela URL. .
Página de Pesquisa
A pagina de pesquisa do tema MaxImobi está mais expansiva, ela agora permite buscar artigos por categoria, por autor, pelo título, pelo subtítulo e pelo conteúdo do artigo, ajudando os usuários do blog encontrar mais facilmente o conteúdo desejado.
Single Post
A principal diferença da página single post do blog do tema MaxImobi, está no Schema do post, que aprimoramos a utilização de dados estruturados para aumentar as chances de um bom posicionamento nos motores de busca.
Página de Contato
Apenas dois aspectos foram modificados do formulário originalmente criado para o WorkControl.
O primeiro é que ele foi feito em AJAX para melhorar a usabilidade. O segundo aspecto é que é possível enviar para múltiplos destinatários, bastando acessar o arquivo Config\Client.inc.php ou o campo relacionado no páinel de configuração e informar os destinatários na constante SITE_ADDR_EMAIL separados por ponto e vírgula (;) conforme a seguir:
define('SITE_ADDR_EMAIL', 'contato@worcontrol.com.br; email2@seudominio.com.br; email3@seudominio.com.br'); //E-mail de contato
Novos Recursos
Esse tema tem dois grandes diferenciais que fazem com que ele seja memorável, sendo o sistema de filtro de imóveis e o sistema de comparação de imóveis.
Para complementar esses dois recursos favorecendo o aumento de conversão, a página single de exibição de imóveis ganhou um sistema de exibição de imóveis relativos, mais inteligente.
Iremos falar mais sobre esses recursos a seguir!
Filtro de Busca Básico
Esse projeto possui basicamente dois filtros de busca, sendo, um filtro de busca básico e um filtro de busca completo. Ambos trabalham de maneira interativa, sempre exibindo somente opções válidas para o visitante do site, através de atualização dos campos em tempo real. Toda a interação com os filtros do site, é guardada em sessão, o que garante melhor qualidade e desempenho na interação com o usuário.
Esse é um filtro para um primeiro contato com o site. Ele age de maneira interativa, mudando os valores de cada campo automaticamente, de acordo com a interação do usuário.
A interação pode ser iniciada a partir de qualquer um dos campos, sem restrição, entretanto, para resetar um campo especifico, basta selecionar a opção “Todos” presente em cada campo.
Após selecionar as opções desejadas, ao clicar em buscar, o visitante do site será direcionado para a pagina de busca avançada, onde poderá refinar as suas buscas de acordo com as suas preferências.
Na aba seguinte, é possível realizar a busca por meio do código de referência do imóvel. Esse recurso já existia originalmente no Tema do WorkControl e mantivemos aqui.
Filtro de Busca Avançado
O filtro de busca avançado tem como premissa fazer com que o usuário demore o menos tempo possível para encontrar o imóvel que deseja, sem perder tempo com buscas inválidas ou com resultados diferentes do esperado.
Para isso, o filtro foi desenvolvido para interagir com o usuário de forma a atualizar as opções de busca, de acordo com as opções existentes no banco de dados.
Se durante a interação do usuário não houver mais variações de opções, ao invés de mostrar apenas uma opção de um determinado parâmetro, ele simplesmente oculta o parâmetro em questão, por exemplo, se durante a interação com o filtro de busca avançado, todas as opções resultarem em imóveis com dois quartos, mesmo que tenha vários imóveis, o campo “Quartos” ficará oculto, pois, nesse fluxo de interação, não faz sentido deixar o campo visível para o usuário.
Se durante as interações posteriores, surgirem imóveis com mais variações de quantidades de quartos, então o campo em questão, torna a ser exibido.
Tal comportamento ocorre em praticamente todos os parâmetros do filtro de busca, com exceção do campo “Status do Imóvel”, pois, por padrão esse campo não é obrigatório no painel do WorkControl.
Parâmetro Bairro:
Por padrão, esse parâmetro é oculto, ele somente será exibido após a escolha do parâmetro cidade e se, após a escolha da cidade houver mais de um bairro a ser exibido.
Limpeza do Filtro:
O botão Limpar filtro, limpa a sessão e recarrega a página, garantindo a integridade das buscas posteriores.
Importante!
O filtro avançando é exibido na pagina chamada “Filtro” e na pagina “Imóveis”, porém toda a interação com o filtro avançado ocorrerá apenas na página “Filtro”.
Logo, caso não esteja nessa página e o filtro esteja sendo exibido, após a primeira interação, o usuário será automaticamente redirecionado para a página filtro. Esse processo ocorrerá naturalmente, sem impactar na experiência do usuário.
Comparação de Imóveis
O tema possui um sistema de comparação de imóveis, onde permite que o usuário escolha até 4 (quatro) imóveis para ser comparados.
Para selecionar os imóveis a serem comparados, basta clicar no ícone de “coração”, no canto superior direto dos imóveis, com isso, o imóvel escolhido será adicionado em tempo real a lista de imóveis para comparação.
Esse sistema de comparação também é armazenado por sessão. Sendo possível limpar essa seleção, removendo os imóveis individualmente ou na página de comparação, na opção de “Limpar Seleção” no final da página.
Caso o usuário venha a tentar selecionar mais de quatro imóveis para comparação, será apresentada uma modal de alerta com a opção de ir para a página de comparação ou de fechar e continuar com a navegação.
A página de comparação irá exibir quase todas as características do imóvel, com exceção do campo de “Descrição”, pois nesse campo pode conter descrições demasiadamente extensas, com o risco de prejudicar a experiencia do usuário.
Comparação de Imóveis
A página de comparação irá exibir quase todas as características do imóvel, com exceção do campo de “Descrição”, pois nesse campo pode conter descrições demasiadamente extensas, com o risco de prejudicar a experiencia do usuário.
Imóveis Single
A página single de imóveis possui alguns aspectos estratégicos para facilitar a conversão para gerar um contato entre os clientes e corretores. Os recursos são:
Formulário de contato por imóvel, direcionado para o corretor responsável;
Contato direto com o corretor;
Sistema de compartilhamento e impressão personalizada;
Seção de imóveis em destaque (sidebar);
Seção de imóveis relacionados (Indicados para você);
Galeria de imagem responsiva com lightbox.
A seguir, iremos apresentar alguns desses recursos:
Formulário de Contato
O formulário de contato permite enviar um e-mail diretamente para o corretor responsável pelo imóvel e também para o e-mail cadastrado na constante SITE_ADDR_EMAIL, assim, nenhum contato será perdido.
O corretor e o administrador do site irão receber o e-mail com os contatos fornecidos pelos usuários e o link para o imóvel em questão.
Um aspecto importante desse projeto é que todos os formulários de contato, permitem que seja enviado e-mail para múltiplos destinatários. Para isso, atribua múltiplos e-mails na constante SITE_ADDR_EMAIL, separado por ponto e virgula (;).
Contato com o Corretor
Essa seção basicamente é a box de corretor no qual foi atribuída como responsável pelo imóvel, dentro do painel do WorkControl.
Assim, os usuários poderão contatar diretamente o corretor, pelos meios de contato cadastrados no painel do WorkControl.
Seção “Indicados para você”
É comum em sites como esse, que na página single de imóveis, haja uma seção com imóveis relacionados ao imóvel principal exibido na página. Aqui nesse tema também adotamos esse recurso, mas para aumentar a taxa de conversão, resolvemos melhorar a forma como o tema escolhe os imóveis a serem apresentados.
Assim, como os demais recursos do tema, esse também responde com a interação do usuário de uma maneira diferenciada, apresentando os imóveis de forma randômica.
Em um primeiro momento, se usuário acessa o site e clica em um imóvel para ver maiores detalhes do mesmo, sem interagir com qualquer dos filtros de busca do site, essa seção irá se comportar de maneira padrão, como na maioria dos sites, buscando mostrar imóveis que são similares ao imóvel principal da página, considerando os seguintes campos:
Tipo de transação;
Finalidade do Imóvel;
Tipo do imóvel;
Cidade.
Entretanto, caso haja interação com qualquer filtro de busca do site, a seleção de imóveis a serem exibidos passa a ser dinâmica, considerando a opção do filtro informada pelo usuário. Quando mais especifica for a interação do usuário em suas buscas, mas especifico será a seleção de imóveis apresentadas nessa seção.
Por exemplo, se o usuário escolhe apenas a opção de tipo de transação igual a “comprar”, nessa seção, irá exibir todos os imóveis disponíveis com esse tipo de transação, e, não irá considerar qualquer outra opção do imóvel. Entretanto, se o usuário escolher a opção de comprar apartamento com dois quartos, dois banheiros, uma vaga na garagem, em Florianópolis e no Bairro Campeche, então, essa seção irá considerar todas as opções fornecidas pelo usuário para apresentar outros imóveis que atendam a esses requisitos especificamente.
Se não houver imóveis compatíveis com a interação com o usuário, a seção tentará exibir imóveis com o filtro padrão. Se, ainda assim, não houver resultados a serem exibidos, então a seção inteira não será exibida.
Sessão Corretores
Essa seção trabalha com um carrossel que exibe todos os corretores validos do site.
Somente serão exibidos os usuários cadastrados no site com acesso superior ou igual a 6 e que possuam imóveis cadastrados em seu nome, e que, esses imóveis estejam com o status igual a “disponível”.
Obs.: Essa seção somente será exibida se houver mais de um corretor válido cadastrado no site.
Instalação do Tema MaxImobi
Devido as nossas premissas de desenvolvimento, o processo de implementação do tema é muito simples e nada diferente do que já estamos acostumados com o WorkControl. Apenas criamos um arquivo sql adicional para que você possa criar as páginas necessárias para o bom funcionamento do tema, de uma forma mais prática e simples.
Porém, para ter certeza de que tudo ocorrerá bem no processo de implementação do tema, preparamos esse passo a passo, para lhe orientar nesse processo. Também criamos um vídeo tutorial que você pode ver abaixo:
Para a instalação estamos considerando o cenário padrão de uma instalação do WorkControl, sem que ainda tenha feito qualquer modificação.
Nos arquivos que lhe enviamos, existe uma pasta chamada “MaxImobi_pack”, nela contém o tema e todos os widgets que foram criados ou customizados para esse projeto. Basta copiar a pasta “_cdn” e “themes”, sob uma instalação padrão do WorkControl, depois faça as customizações a seguir:
Mude a constante IMAGE_W para 1280 e a constante IMAGE_H para 628.
define('IMAGE_W', 1280); //Tamanho da imagem (WIDTH)
define('IMAGE_H', 628); //Tamanho da imagem (HEIGHT)
No arquivo index.php principal da instalação do WorkControl (na raiz), faça as modificações a seguir:
Comente ou exclua as linhas abaixo:
Pronto! As customizações iniciais do tema, já estão prontas.
Criação de Páginas
Algumas páginas são necessárias para o funcionamento adequado do tema, mas, antes de cria-la manualmente, gostaríamos de informa-lo que preparamos uma base de dados completa, que inclui as páginas necessárias, assim, você pode apresentar o projeto para os seus clientes, mais rapidamente.
Então, caso vá utilizar essa base de dados de exemplo, pule os passos a seguir e vá para o tópico Base de Exemplo.
Será necessário criar as seguintes páginas:
Compare;
Contato;
Blog.
Você pode criar as páginas manualmente ou fazer a importação do arquivo de inicialização do tema.
Para isso acesse a pasta “MaxImobi_start” e faça a importação do arquivo “maximobi_start.sql” para a sua base de dados.
Após concluir a importação do arquivo sql, copie e cole o conteúdo da pasta de “uploads” para a pasta do seu projeto.
O seu projeto, já está pronto e funcional!
Base de Exemplo
Nos primórdios do WorkControl nosso caríssimo mestre Robson V. Leite, nos forneceu uma base de dados para alimentar nossos projetos e assim poder fazer uma apresentação mais sólida para nossos clientes.
Nessa base eu adicionei mais imóveis e mais corretores, para assim ter uma base ainda mais consistente para esse tema, porém eu filtrei as informações, para alimentar apenas as tabelas relacionadas aos imóveis, usuários e conteúdos do blog.
Então para utilizar esse recurso, acesse a pasta chamada “MaxImobi_simple” e siga os passos abaixo:
Faça a importação do arquivo “MaxImobi_simple.sql” para a base de dados do seu projeto;
Copie todo o conteúdo da pasta “uploads” para a pasta upload do seu projeto.
Compromisso com a Qualidade
Como pode ver, existem muitas novidades nesse tema. Todas elas foram exaustivamente testadas, afim de garantir a qualidade funcional, sempre tendo como foco as premissas básicas de desenvolvimento, mencionadas no início desse documento.
Mas, como todo ser dotado de inteligência, somos suscetíveis a cometer erros. Caso encontre algum erro funcional ou até mesmo alguma característica estética que não estava contemplada pela proposta desse tema, entre em contato conosco para que possamos fazer as correções o mais rápido possível.