MaxImóbi - Tema Imóbiliario WorkControl Versão Descontinuada

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.
★ ★ ★ ★ ★


Projeto: MaxImóbi 1
Versão: 1.1
Desenvolvido em: 02/05/2020
Última Atualização: 10/11/2020
Por: Evertec Digital

Documentação criada em: 09/05/2020
Documentação atualizada em: 04/01/2021
Suporte: suporte@evertecdigital.com.br
MaxImóbi - Tema Imóbiliario WorkControl

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.

Consulte a paleta de cores do Bootstrap 4.x aqui

Paleta de Cores Bootstrap 4.x

Estrutura de Arquivos de Estilo e JavaScript

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.

Estrutura de Arquivos

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

Sistema de Comentários

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

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

Blog

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

Blog
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.

Blog: Página de Pesquisa
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.

Blog: Single Post

Página de Contato

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!

Novos Recursos

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.

Filtro de Busca Básico

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.

Filtro de Busca Básico por Código

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.

Filtro de Busca Avançado
Filtro de Busca Avançado - Bairros
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
Limpeza do Filtro:

O botão Limpar filtro, limpa a sessão e recarrega a página, garantindo a integridade das buscas posteriores.

Comparação de Imóveis

Compare Sidebar

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.

Compare Sidebar Limite

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.

Compare Sidebar Limite

Imóveis Single

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:

A seguir, iremos apresentar alguns desses recursos:

Formulario de COntato para imóveis
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.

Corretor Responsável
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.

Imóveis Indicados

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:

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”.

Novos Corretores

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:

No arquivo _app/config/Config.inc.php

Mude a constante ADMIN_MODE para 3:

    define('ADMIN_MODE', 3); //1 = website / 2 = e-commerce / 3 = Imobi / 4 = EAD                                    
                            

Desative as seguintes constantes (valor = 0): APP_EAD, APP_PRODUCTS, APP_ORDERS:

    define('APP_EAD', 0); //Plataforma EAD
                            
    define('APP_PRODUCTS', 0); //Produtos
    define('APP_ORDERS', 0); //Pedidos
                            

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:

  1. Faça a importação do arquivo “MaxImobi_simple.sql” para a base de dados do seu projeto;
  2. Copie todo o conteúdo da pasta “uploads” para a pasta upload do seu projeto.

Compromisso com a
Qualidade

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.

 

Nosso e-mail de suporte é suporte@evertecdigital.com.br

"Os pequenos atos que se executam são melhores que todos aqueles grandes que se planejam."

George Marshall