O site integrado possuí diversas possibilidades de parametrizações que podem ser configuradas de acordo com a necessidade do cliente. Neste artigo serão apresentados os componentes que compõem cada uma das página do site linkados as páginas e seus respectivos componentes a fim de detalhar o nível de customização .
| Table of Contents |
|---|
Página de pesquisa de imóveis
Página que possibilta ao usuário realizar a pesquisa de imóveis com base nos filtros disponíveis.
Componente: Pesquisar Imóveis No Site
O componente pesquisar imóveis no site é utilizado para definir os parâmetros que serão aplicados na página de busca de imóveis.
...
Alugar: Utilizado para indicar que a pesquisa deve considerar imóveis disponíveis para locação.
Comprar: Utilizado para indicar que a pesquisa deve considerar imóveis disponíveis para venda.
Observação: Caso as duas opções sejam sinalizadas, será apresentado na interface de pesquisa de imóveis as opções Alugar e Comprar, possibilitando aos clientes pesquisar tanto imóveis para locação quanto para venda. Quando apenas uma das opções for selecionada o botão será oculto e a pesquisa irá utilizar apenas a opção selecionada.
...
Negócio padrão: Possibilita definir qual é o negócio padrão que deverá ser utilizado na pesquisa de imóveis após a inicialização da página. As seguintes opções estão disponíveis:
Alugar
Comprar
...
que
...
pode ser
...
Latitude inicial: Utilizado para definir a latitude inicial que será aplicada na centralização do mapa caso o usuário não aceite compartilhar a sua localização.
...
Longitude inicial: Utilizado para definir a longitude inicial que será aplicada na centralização do mapa caso o usuário não aceite compartilhar a sua localização.
...
aplicado
...
Observação: A latitude, a longitude e o zoom inicial só serão aplicados na primeira vez que o usuário acessar o site até o momento em que ele ativar o recurso de geolocalização ou realizar alguma pesquisa por localidade. Caso a pesquisa por localidade seja realizada, ao recarregar a página, o mapa será centralizado na última localidade pesquisada com base nas informações armazenadas no local storage do navegador.
URL do Site: Possibilita definir a URL do site.
URL da página para mapa: Possibilita definir a URL da página do mapa:
URL dos termos de uso do serviço: Possibilita definir a URL da política de privacidade do site, ao clicar, será aberta uma nova guia para exibição da página. A URL definida neste parâmetro será utilizada nos formulários de simulação de crédito da página de pesquisa de imóveis para as versões desktop e mobile.
Componente: Banner Políticas De Cookies E Privacidade
Através deste componente é possível definir as URL que serão apresentadas na modal de política de privacidade que é exibida ao acessar a página pela primeira vez até o momento em que o usuário clicar em na opção Prosseguir:
...
UrlPoliticas: URL para página de políticas de privacidade.
...
.
...
...
...
Através desse componente é possível definir a cor da barra de pesquisa na versão mobile através do código hexadecimal.
...
ToolbarColor: Permite alterar a cor da barra de pesquisa da versão mobile através de um código hexadecimal. Exemplo, ao informar o código #836FFF a cor da barra de pesquisa será atualizada conforme imagem abaixo.
Importante: Atualmente essa alteração só é compátivel com o sistema operacional Android utilizando o navegador Google Chrome ou Safari v15.
Componente: Atendimento WhatsApp
Através deste componente é possível definir informações utilizadas pela integração com o WhatsApp.
...
NumeroAtendimento: Utilizado para informar o número do whatsapp que o usuário será redirecionado. Ex. +5551987654321.
UrlImagem: Permite definir a URL do ícone que será exibido.
Obs. Necessário que a imagem esteja publicada em um domínio público.
Posição vertical (0-100): Utilizado para definir a posição vertical do ícone.
Obs. Sugestão de nunca deixar no máximo 100 pois pode sobrepor alguma informação do rodapé.
Posição horizontal (0-100): Utilizado para definir a posição horizontal do ícone.
...
...
...
A página de detalhes do imóvel é utilizada para exibir todas as informações relacionadas ao imóvel. Nesta página também são apresentados imóveis semelhantes com base no imóvel selecionado.
Componente: Exibir Imóvel Site
Componente utilizado para definir a ULR da política de privacidade.
...
URL dos termos de uso do serviço: Possibilita definir a URL da política de privacidade do site, ao clicar, será aberta uma nova guia para exibição da página. A URL definida neste parâmetro será utilizada nos formulários de simulação de crédito e agendamento de visita para as versões desktop e mobile.
Record Id: Parâmetro é preenchido automaticamente. Default {!recordId}.
Componente: Listar Imoveis Semelhantes
Componente utilizado para definir as parametrizações que serão utilizadas na pesquisa e na exibição de imóveis semelhantes.
...
Record Id: Parâmetro é preenchido automaticamente. Default {!recordId}.
Variação de valor da locação: Permite informar um valor percentual que será utilizado para calcular a variação máxima (para cima) no valor total da locação com base no valor de locação do imóvel de contexto. Por exemplo, caso o cliente só queira listar imóveis semelhantes que possuam uma variação no valor da locação de 10% deve-se informar neste parâmetro o valor 0.1, sendo assim, caso um imóvel de contexto tenha valor de locação de 2.000,00, serão apresentados imóveis semelhantes com valor máximo de até 2.200,00.
Variação da área privativa do imóvel: Permite informar um valor percentual que será utilizado para calcular a variação máxima (para baixo) da área privativa com base na área privativa do imóvel de contexto. Por exemplo, caso o cliente só queira listar imóveis semelhantes que possuam uma variação de área privativa máxima de 30% deve-se informar neste parâmetro o valor 0.3, sendo assim, caso um imóvel de contexto tenha área privativa de 100m², serão apresentados imóveis semelhantes com área privativa minima de até 70m².
Limite de imóveis a serem exibidos: Permite definir a quantidade de card de imóveis semelhantes que serão exibidos na tela.
Raio de busca em KM: Permite definir a distância em KM para pesquisa de imóveis semelhantes com base no ponto de localização do imóvel de contexto. Caso o cliente queira apresentar imóveis semelhantes que estejam a uma distância máxima de 3 quilômetros do imóvel de contexto, deve-se informar neste parâmetro o valor 3.
Titulo: Permite definir o título que será apresentado na galeria de imóveis semelhantes.
Importante: Os filtros acima são complementares, ou seja, caso um imóvel atenda a uma das condições mas não esteja aderente as outras, ele não será apresentado como imóvel semelhantes. Além disso, para exibição dos imóveis semelhantes é considerado o tipo de imóvel (ex. Apartamento), no entanto, esse parâmetro não é configurado pois a pesquisa utilizada com base o mesmo tipo de imóvel do contexto.
Classes
Card do simulador de crédito página de pesquisa de imóveis
.flip-card-credpago-pesquisa // flipcard simulador credpago pagina de pesquisa
Possibita definir tamanho do card
Possibita definir o tamanho da fonte
Possibita definir largura do card
Possibita definir arredondamento dar bordas
Possibita definir sobreamento do card
.flip-card-credpago-pesquisa .frente // parte da frente onde esta o formulário
Possibita definir a cor de preenchimento do card
.flip-card-credpago-pesquisa .frente .formCredito // div formulario
Possibita definir o a largura dos campos do formulário
.flip-card-credpago-pesquisa .frente .formCredito .logo-credpago // logo da credpago
Possibita definir o tamanho da imagem
.flip-card-credpago-pesquisa .frente .formCredito .subtitulo // subtitulo formulario
Possibita definir o tamanho da fonte
Possibita definir a cor do texto
.flip-card-credpago-pesquisa .verso // onde mostra o resultado da simulacao
.flip-card-credpago-pesquisa .verso .resultadoAprovado // simulação aprovada
Possibilita definir a cor de background
Possibilita definir a cor do texto
Possibilita definir o alinhamento dos textos
.flip-card-credpago-pesquisa .verso .resultadoReprovado // simulação reprovada
Possibilita definir a cor de background
Possibilita definir a cor do texto
Possibilita definir o alinhamento dos textos
.flip-card-credpago-pesquisa .verso .resposta // resposta da simulação
Possibilita alterar a cor e o tamanho da fonte
Banner do simulador de crédito página de pesquisa de imóveis
.banner-simulador-credpago // classe principal
.banner-simulador-credpago .coluna-textos // coluna da esquerda com os textos
.banner-simulador-credpago .coluna-textos .texto-principal // texto destaque
.banner-simulador-credpago .coluna-textos .texto-secundario // textos menores
.banner-simulador-credpago .coluna-simulador // coluna da direita com simulador
.banner-simulador-credpago .coluna-simulador .flip-simulador-credpago // card flip com simulador
.banner-simulador-credpago .coluna-simulador .frente // parte da frente do card com formulário
.banner-simulador-credpago .coluna-simulador .frente .form-simulador-credpago // formulario
.banner-simulador-credpago .coluna-simulador .frente .form-simulador-credpago .titulo // titulo acima do formulario
.banner-simulador-credpago .coluna-simulador .frente .form-simulador-credpago .p-button-card-action // botao de simular credito
.banner-simulador-credpago .coluna-simulador .verso // parte de trás com resultado simulação
.banner-simulador-credpago .coluna-simulador .verso .resultadoAprovado // caso simulação seja aprovada
.banner-simulador-credpago .coluna-simulador .verso .resultadoAprovado .imagem-resposta //
.banner-simulador-credpago .coluna-simulador .verso .resultadoAprovado .imagem-resposta .titulo // texto acima da imagem
.banner-simulador-credpago .coluna-simulador .verso .resultadoAprovado .resposta // texto de resposta aprovada
.banner-simulador-credpago .coluna-simulador .verso .resultadoAprovado .p-button-card-action // botao de ver imoveis
.banner-simulador-credpago .coluna-simulador .verso .resultadoReprovado // caso simulacao seja reprovada
.banner-simulador-credpago .coluna-simulador .verso .resultadoReprovado .imagem-resposta //
.banner-simulador-credpago .coluna-simulador .verso .resultadoReprovado .imagem-resposta .titulo // texto acima da imagem
.banner-simulador-credpago .coluna-simulador .verso .resultadoReprovado .resposta // texto de resposta reprovado
Ícone do WhatsApp
.whatsapp-button-action // botão que serve de container para imagem
.whatsapp-button-action img.whatsapp-button-image // imagem do botão
Detalhe do imóvel (mobile)
.exibir-imovel-site // container do componente
.exibir-imovel-site .modal-agendar-simular // modal com simulador ou agendar visita
.exibir-imovel-site .modal-simulador-credpago // modal mobile com formulario credpago
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito // lado formulario
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .titulo//
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .subtitulo//
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .form-simular-credito-inputs//inputs
.exibir-imovel-site .modal-simulador-credpago .p-button-card-action
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado // lado resposta aprovado
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .imagem-resposta // div com imagem e titulo
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .imagem-resposta .titulo//
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .imagem-resposta img //
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .resposta//
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado // lado resposta reprovado
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .imagem-resposta //
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .imagem-resposta .titulo//
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .resposta//
.exibir-imovel-site .modal-agendar-visita // modal mobile com formulario agendar visita
.box-valores-mobile // caixa de custos referentes ao imóvel no mobile
.box-valores-mobile lightning-formatted-number// valores
.box-valores-mobile span // descrição do valor
Detalhe do imóvel - Flipcard do imóvel (desktop)
.flip-card-acoes-imovel // flipcard de simulação e agendamento de visita
.flip-card-acoes-imovel .frente // representa parte da frente do card onde é apresentado os valores e acoes de compartilhamento, favoritar etc
.flip-card-acoes-imovel .frente .custos-imovel // representa a parte dos custos do imovel
.flip-card-acoes-imovel .frente .custos-imovel .preco-total-imovel // texto preço total da locação
.flip-card-acoes-imovel .frente .custos-imovel .preco-total-imovel .valor-total-formatado // valor formatado
.flip-card-acoes-imovel .frente .botoes-acao // representa tanto botao de visita quanto simular credito caso haja
.flip-card-acoes-imovel .frente .favoritar-compartilhar // representa os botões de compartilhar e favoritar
.flip-card-acoes-imovel .verso // representa parte de trás do card tanto formulario de visita quanto simulacao de credito
.flip-card-acoes-imovel .titulo // titulo dos dois formularios
Detalhe do imóvel - Simulador de crédito (desktop)
.flip-card-credpago-imovel // flipcard simulador credpago pagina de imovel
.flip-card-credpago-imovel .frente // parte da frente do card onde estao os inputs e onde é mostrado o resultado da simulação
.flip-card-credpago-imovel .frente .formCredito // formulario
.flip-card-credpago-imovel .frente .resultadoAprovado // verso resultado aprovado
.flip-card-credpago-imovel .frente .resultadoReprovado // verso resultado reprovado
.flip-card-credpago-imovel .frente .titulo // titulo sobre formulario e resultado
.flip-card-credpago-imovel .frente .resposta // resposta da simulação
Página de login
loginCliente (aura)
.app-login // pagina de login
.app-login .login-cadastro // pagina de login com formularios de login e cadastro
.app-login .login-cadastro .box-form-login //formulario de login
.app-login .login-cadastro .box-form-login .titulo // titulo formulario de login
.app-login .login-cadastro .box-form-cadastro //formulario de cadastro
.app-login .login-cadastro .box-form-cadastro .titulo // titulo formulario de cadastro
.app-login .verificacao-cadastro // pagina de login com box de vericação do email
.app-login .verificacao-cadastro .box-verificacao-cadastro // box de verificacao
.app-login .verificacao-cadastro .box-verificacao-cadastro .titulo // titulo box de verificacao
...
identificarUsuarioAnonimo
.form-agendar-visita
Geral
...
