Componente: Exibir Imovel Site
- Rafael Jacobe (Deactivated)
- Estevão Fernandes (Deactivated)
Componente utilizado para exibir as informações de do imóvel e acessar funcionalidades para agendamento de visita , contato, compartilhamento e favoritar.
Parametrização
Nome | Descrição | Observação |
|---|---|---|
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} |
Está área não possuí nenhuma parametrização possível. As cores dos botões de Fotos e Mapa é baseada nas cores primárias configurada da comunidade.
Configuração de CSS - Detalhe do imóvel (mobile)
Classes | Descrição |
|---|---|
.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 .subtitulo | subtitulo simulador |
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .form-simular-credito-inputs | inputs |
.exibir-imovel-site .modal-simulador-credpago .p-button-card-action | CTA simulador |
.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 | titulo resposta simulação aprovado |
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .imagem-resposta img | imagem resposta simulação aprovado |
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .resposta | texto aprovado resposta simulação |
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado | lado resposta reprovado |
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .imagem-resposta img | imagem resposta simulação reprovado |
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .imagem-resposta .titulo | titulo resposta simulação reprovado |
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .resposta | texto reprovado resposta simulação |
.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 |
Exemplo de implementação CSS
/Simulador mobile/
:root .exibir-imovel-site .modal-agendar-simular input {
border: none !important;
}
.exibir-imovel-site .modal-agendar-simular {
background: #007ad2 !important;
color: white;
}
:root .exibir-imovel-site .modal-agendar-simular .titulo {
font-size: x-large !important;
color: white !important;
}
:root .exibir-imovel-site .modal-agendar-simular .resposta {
font-size: large !important;
}
/Frente/
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito{
background: inherit;
}
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .titulo, .exibir-imovel-site .modal-simulador-credpago .form-simular-credito .subtitulo {color: white !important;}
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .subtitulo{
font-size: medium !important;
}
/* Aprovado */
:root .exibir-imovel-site .modal-agendar-simular.aprovado{
background: #ff5d7c !important;
}
:root .exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado{
background: #ff5d7c !important;
text-align: center;
}
:root .exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .p-button-card-action {
padding: 4px 20px;
font-size: medium;
}
:root .exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .titulo, .exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .resposta { color: #0d006c !important; }
/Reprovado/
:root .exibir-imovel-site .modal-agendar-simular.reprovado{
background: #0d006c !important;
}
:root .exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado{
background: #0d006c !important;
text-align: center;
}
:root .exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .p-button-card-action {
font-size: medium;
background: #ff5d7c !important;
border-color: #ff5d7c !important;
}
:root .exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .titulo, .exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .resposta {
color: #ff5d7c !important;
}
/*Exibir imovel site (mobile) */
:root .box-valores-mobile{
background: #ff5d7c !important;
}
:root .box-valores-mobile span {color: white !important}
:root .box-valores-mobile lightning-formatted-number { /Custos do imóvel/
color: #0d006c;
}
:root .box-valores-mobile .valor-total span{
color:darkgray
}
Configuração de CSS - Vitrine Imóveis semelhantes (desktop)
Cor do botão de rolagem
Cor do título
Tamanho da fonte do título
Configuração de CSS - Flipcard do imóvel (desktop)
Cor do fundo
Cor da fonte (Aluguel, Condomínio, IPTU)
Botão principal [Agendar Visita e Simular Crédito]
Cor do fundo
Cor do texto
Botões secundários [Perguntar, Compartilhar e Favoritar ]
Cor de fundo
Cor da fonte
Cor de destaque do ícone favoritar
Agendar visita
Cor de fundo
Cor de fundo do formulário
Cor do texto do formulário
Cor de fundo do dia e horário
Cor do texto do dia e horário
Cor de fundo do botão Agendar visita
Cor do texto do botão Agendar visita
Cor do texto do termo de serviço
Simular Crédito
Cor de fundo
Cor de fundo do formulário
Cor do texto do formulário
Cor de fundo do botão Simular crédito
Cor do texto do botão Simular crédito
Cor do texto do termo de serviço
Perguntar
Cor de fundo
Cor de fundo do formulário
Cor do texto do formulário
Cor de fundo do botão Perguntar
Cor do texto do botão Perguntar
Cor do texto do termo de serviço
Compartilhar
Cor do fundo
Cor do texto título
Cor do texto link
Classes | Descrição |
|---|---|
.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 |
Exemplo de implementação CSS
/Card de ações pagina de detalhes/
:root .flip-card-acoes-imovel .verso .slds-has-error .slds-form-element__help{/Cor mensagem de erro input/
color: white;
}
.flip-card-acoes-imovel .frente, .card__side.card__face--front {
background: #ff5d7c !important;
color: white;
}
.flip-card-acoes-imovel button[data-id="botaoFavoritar"]>svg>path{ /Coração de favoritar/
fill: #ff5d7c;
}
.flip-card-acoes-imovel button[data-id="botaoFavoritar"]:hover>svg>path{
fill: #0d006c;
}
.flip-card-acoes-imovel button[data-id="botaoDesfavoritar"]:hover>svg>path { /Coração de desfavoritar/
fill: #ff5d7c;
}
.flip-card-acoes-imovel .p-button-card-action {
background: #0d006c;
border-color: #0d006c !important;
text-transform: uppercase;
}
.flip-card-acoes-imovel .frente .agendar-simular .p-button-card-action {
padding: 5px;
}
.flip-card-acoes-imovel .frente .custos-imovel .preco-total-imovel {
color: darkgray;
}
.flip-card-acoes-imovel .frente .custos-imovel .preco-total-imovel .valor-total-formatado {
color: #0d006c !important;
}
.flip-card-acoes-imovel .frente .favoritar-compartilhar{
color:#0d006c;
background: inherit;
border-color: #0d006c;
}
.flip-card-acoes-imovel .card__side.card__face--back.verso, .flip-card-acoes-imovel .card__side.card__face--back.verso .form-visita{
background: #007ad2 !important;
}
:root .flip-card-acoes-imovel .verso .slds-button_icon{color: white;} /Botao de voltar no card de ações/
:root .flip-card-acoes-imovel .verso, .flip-card-acoes-imovel .verso .form-visita .slds-input.slds-combobox__input, input[name="datepicker"]{ /Input do datepicker/
background: #06ddf9 !important;
border-color:#06ddf9 !important;
}
Configuração de CSS - Simulador de crédito (desktop)
Classes | Descrição |
|---|---|
.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 |
Exemplo de implementação CSS
/Simulador reprovado/
.flip-card-credpago-imovel .frente .resultadoReprovado {
background-color: #0d006c;
color: white;
text-align: center;
}
.flip-card-credpago-imovel .frente .resultadoReprovado .p-button-card-action{
background: #ff5d7c !important;
}
.flip-card-credpago-imovel .frente .resultadoReprovado .titulo{
color: #ff5d7c;
}
.flip-card-credpago-imovel .frente .resultadoAprovado .titulo span, .flip-card-credpago-pesquisa .frente .resultadoAprovado .resposta span {
text-transform: uppercase;
font-weight: bold;
}
/Cenário aprovado/
.flip-card-credpago-imovel .frente .resultadoAprovado .p-button-card-action{
background: #0d006c !important;
}
.flip-card-credpago-imovel .frente .resultadoAprovado .titulo{
color: #0d006c !important;
}
Configuração de CSS - Exibir imóveis site
Classes | Descrição |
|---|---|
.exibir-imovel-site .slds-listbox | Limitar dropdrown incluindo de horário e visita |
Exemplo de implementação CSS
/* Exibir imóveis site */
:root .exibir-imovel-site .slds-listbox {
max-height: 120px;
border: none;
border-radius: 10px;
}