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.
| Table of Contents |
|---|
...
Parametrização
Nome | Descrição | Observação |
|---|---|---|
Alugar | Utilizado para indicar que a pesquisa deve considerar imóveis disponíveis para locação. | 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. |
Comprar | Utilizado para indicar que a pesquisa deve considerar imóveis disponíveis para venda. | |
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:
|
Filtro base | Através deste parâmetro é possível definir um conjunto de filtros iniciais para busca de imóveis utilizando nome dos campos do objeto imóvel. | Exemplo, caso seja solicitado que a pesquisa retorne apenas imóveis com valor máximo de aluguel até 1.500,00 o seguinte filtro base pode ser aplicado como parâmetro: snap_brok__Valor_desejado_aluguel__c<=1500. |
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. | 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. |
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. | |
Zoom inicial | Permite configurar o nível do zoom que será aplicado no mapa, exemplo 14 (quanto maior o número definido maior o nível do zoom). | |
URL do Site | Possibilita definir a URL do site. | |
URL da página para mapa | Possibilita definir a URL da página do mapa. | https://snapproperty-developer-edition.na132.force.com/apex/GoogleMapIframe |
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. |
...
Classes que possibilitam a customização do card do simulador de crédito, conforme destacado na imagem abaixo.
...
Classes | DescriçãoImplementação |
|---|---|
.flip-card-credpago-pesquisa | Flipcard simulador credpago pagina de pesquisa. |
:root .flip-card-credpago-pesquisa {min-height: 500px !important;}.frente | Parte da frente onde esta o formulário |
.flip-card-credpago-pesquisa .frente .formCredito | div formulario |
.flip-card-credpago-pesquisa .frente Parte da frente onde esta o formulário.formCredito .logo-credpago | logo da credpago |
flip-card-credpago-pesquisa .frente .formCredito .subtitulo | subtitulo formulario |
.flip-card-credpago-pesquisa .verso | onde mostra o resultado da simulacao |
.flip-card-credpago-pesquisa .verso .resultadoAprovado | simulação aprovada |
.flip-card-credpago-pesquisa .verso .resultadoReprovado | simulação reprovada |
.flip-card-credpago-pesquisa .frente .formCreditodiv formulario.verso .resposta | resposta da simulação |
Exemplo de implementação CSS
/Card simulador credpago da página de pesquisa/
:root .flip-card-credpago-pesquisa{min-height: 500px !important;}
:root .card__wrapper.flip-card-credpago-pesquisa h2 { color: lightgrey; }
:root .flip-card-credpago-pesquisa .frente .formCredito .slds-radio_button__label, .flip-card-credpago-pesquisa .frente .formCredito .slds-radio--button__label{
background-color: inherit;
border-color: #ff5d7c !important;
color: white;
}
:root .flip-card-credpago-pesquisa .frente .formCredito
...
logo da credpago
.slds-radio_button [type="radio"]:checked + .slds-radio_button__label{
background: #ff5d7c !important;
box-shadow: #ffffff5e 0 0 6px 1px
}
.flip-card-credpago-pesquisa .p-button-card-action{
background: #0d006c !important;
border-color: #0d006c !important;
font-size: .8rem;
text-transform: uppercase;
}
:root .flip-card-credpago-pesquisa .flip-card-front {
background: #007ad2;
}
.flip-card-credpago-pesquisa .frente
...
.titulo, .flip-card-credpago-pesquisa .frente .subtitulo
...
{
color: white;
}
/Cenário aprovado/
:root .flip-card-credpago-pesquisa .card__side.flip-card-back.verso .resultadoAprovado, .flip-card-credpago-pesquisa .verso .resultadoAprovado, .flip-card-credpago-pesquisa .flip-card-back .resultadoAprovado, .flip-card-credpago-pesquisa .card__side .resultadoAprovado {
background-color: #ff5d7c !important;
color: white;
text-align: center;
}
.flip-card-credpago-pesquisa .verso .resultadoAprovado .p-button-card-action {
padding: 5px 20px !important;
}
.flip-card-credpago-pesquisa .verso
...
onde mostra o resultado da simulacao
.resultadoAprovado .titulo, .flip-card-credpago-pesquisa .verso .resultadoAprovado .resposta{
color: #0d006c;
}
.flip-card-credpago-pesquisa .verso .resultadoAprovado .titulo span, .flip-card-credpago-pesquisa .verso .resultadoAprovado
...
.resposta span {
text-transform: uppercase;
font-weight: bold;
}
/Cenario reprovado/
:root .flip-card-credpago-pesquisa .verso .resultadoReprovado, .flip-card-credpago-pesquisa .card__side.flip-card-back.verso .resultadoReprovado, .flip-card-credpago-pesquisa .flip-card-back .resultadoReprovado, .flip-card-credpago-pesquisa .card__side .resultadoReprovado, .flip-card-credpago-pesquisa .flip-card-back {
background-color: #0d006c !important;
color: white;
text-align: center;
}
.flip-card-credpago-pesquisa .verso .resultadoReprovado
...
.p-button-card-action{
background: #ff5d7c !important;
}
.flip-card-credpago-pesquisa .verso
...
.resultadoReprovado .titulo{
color: #ff5d7c;
}
Configuração de CSS - Banner do simulador de crédito
Classes que possibilitam a customização do banner do simulador de crédito, conforme destacado na imagem abaixo.
...
Classe | DescriçãoImplementação |
|---|---|
.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 |
Exemplo de implementação CSS
/* Banner simulador credpago */
@media only screen and (max-width: 767px){
:root .banner-simulador-credpago {display: none !important;}
}
:root .banner-simulador-credpago {
background-color:#0d006c;
background-image: url('/sfsites/c/resource/icones_banner/simulador/fundo_banner-simulador-credpago.png');
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
background-origin: border-box;
}
@media only screen and (max-width: 767px){
:root .banner-simulador-credpago .coluna-textos{
margin-top: 50px !important;
text-align: center !important;
align-items: center;
}
}
:root .banner-simulador-credpago .texto-principal, :root .banner-simulador-credpago .texto-secundario{
color: white !important;
}
:root .banner-simulador-credpago .flip-simulador-credpago {
border-radius: 40px;
max-width: 500px;
margin: auto;
}
:root .banner-simulador-credpago .form-simulador-credpago {
background-color: #ff5d7c;
border-radius: inherit;
padding: 1rem 3rem !important;
max-width: inherit;
margin: auto;
}
:root .banner-simulador-credpago .form-simulador-credpago .titulo {color: white;}
:root .banner-simulador-credpago .form-simulador-credpago input::placeholder {
color: #ff5d7c !important;
font-size: smaller !important;
text-transform: uppercase;
font-weight: bold;
}
:root .banner-simulador-credpago .form-simulador-credpago input{
border-radius: 40px;
border-color: transparent;
padding: 3px 15px;
}
:root .banner-simulador-credpago .form-simulador-credpago .slds-radio_button__label, .banner-simulador-credpago .form-simulador-credpago .slds-radio--button__label{
background-color: inherit;
border: 1.5px solid #0d006c !important;
color: white;
}
:root .banner-simulador-credpago .form-simulador-credpago .slds-radio_button [type="radio"]:checked + .slds-radio_button__label{
background: #0d006c !important;
box-shadow: #ffffff5e 0 0 6px 1px
}
:root .banner-simulador-credpago .form-simulador-credpago .p-button-card-action{
font-size: smaller !important;
}
/* Aprovado */
:root .banner-simulador-credpago .flip-simulador-credpago .flip-card-front, .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoAprovado {
background-color: #ff5d7c;
color: white;
text-align: center;
}
:root .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoAprovado .p-button-card-action {
padding: 5px 20px !important;
}
:root .banner-simulador-credpago .flip-simulador-credpago .verso .titulo, .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoAprovado .resposta{
color: #0d006c;
}
:root .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoAprovado .titulo span, .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoAprovado .resposta span {
text-transform: uppercase;
font-weight: bold;
}
/Cenario reprovado/
:root .banner-simulador-credpago .flip-simulador-credpago .flip-card-back ,.banner-simulador-credpago .flip-simulador-credpago .verso .resultadoReprovado {
background-color: #0d006c;
color: white;
text-align: center;
}
:root .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoReprovado .p-button-card-action{
background: #ff5d7c !important;
}
:root .banner-simulador-credpago .flip-simulador-credpago .verso .resultadoReprovado .titulo{
color: #ff5d7c;
}