Aviso de número da casa (integ. IXC)
- Gabriel Sacata Aranda
Última atualização: 18/07/2024
Em algumas regiões do Brasil, é comum você ter endereços de casas com números e letras (ex.: Rua Taltaltal, número 12A). Porém tivemos casos de clientes tendo problemas ao subir o cadastro com o número da casa digitado dessa forma (como quebrando a geração de contratos, subida de arquivos de documentos…). Notamos também que este problema ocorre quando a pessoa insere “0“ ou sequência de “0“ como número da casa.
Fazendo alguns testes com uma versão mais antiga deste snippet (anterior a 05/2024), notamos que o corte que ele fazia em dígitos diferentes de 0 a 9 não tinha efeito, visto que o quê a pessoa digitasse já ia para o carrinho, estando ou não em um formato aceitável pelo IXC.
Sendo assim, fizemos um trecho de código para abrir um alerta sobre o formato correto, com um tooltip e um aviso adicional no rótulo do campo “número da casa“. Abaixo explicarei os trechos mais importantes do código, e explicarei quais partes são editáveis.
Gatilho HTML
Este primeiro trecho é o gatilho para o código começar a rodar. Da forma que está escrito, começará a rodar a partir do momento em que o elemento (no caso, uma imagem invisível) carregar na página.
Este gatilho deve ser colado na página do WDA do cliente (ex.: no assine, fora do <plugin-provider-checkout></plugin-provider-checkout>).
Para este gatilho funcionar, pegue o link de uma imagem qualquer na mídia do provedor (uma imagem leve de se carregar, por garantia), e insira entre as aspas em src="". Se quiser, pode apagar o comentário <!-- Não apagar. Script em "core" -->; ele serve mais como um aviso para outra pessoa que for mexer no site e estranhar o trecho.
<div class="d-none">
<img src="" width="0" height="0" onload="searchForNumCasaWrp()">
<!-- Não apagar. Script em "core" -->
</div>
Estilização CSS
Na mesma página que o gatilho acima foi colado, cole este trecho de código abaixo:
<style>
/* Estilização aviso número da casa IXC */
.numres-tooltip-text {
text-align: center;
padding: 5px;
border: 2px solid red;
width: 250px;
font-size: 12px;
display: none;
font-weight: 500;
color: red;
background-color: rgb(255, 216, 216);
margin-left: auto;
margin-right: auto;
margin-top: 2rem;
}
.ixcs-d-none {
display: none;
}
</style>Esta parte é mais tranquila de mexer; se você tem conhecimentos básicos de CSS, pode adaptá-la conforme o cliente pedir. Só garanta que os display: none; ficarão desta forma, e teste as alterações em uma página de testes.
Javascript
O código abaixo é o que faz o aviso aparecer. Este código deve ser colado no Core Website do provedor, em “Custom script“.
Resumindo o funcionamento: o código carrega junto com a página, e fica esperando um certo elemento aparecer (no caso, de id #bfc_numberOfAddress) durante o tempo definido por tempoSleepEmSegundos. Quando aparece, ele cria todos os elementos necessários, para de rodar a função que gera tudo isso, e só mostra os avisos se a pessoa clicar no campo de número da casa, ou no tooltip (i) no rótulo.
Por buscar o elemento pelo ID, nenhuma adaptação precisa ser feita entre páginas (como /assine e /assine-revendedor).
Os trechos editáveis (com cuidado):
tempoSleepEmSegundos: tempo que o código tentará achar o elemento #bfc_numberOfAddress, em segundos. Insira quanto você achar melhor, pois assim que o elemento for encontrado, a função já parará de buscá-lo, não consumindo recursos.
numCasaLabelContent: texto que substituirá o rótulo do número da casa. Só garanta que o tooltip aparecerá com todas as suas classes.
tooltipTxtContent: texto que aparecerá no quadro de aviso, mencionando as restrições.
// Restringe input de número de casa para aceitar apenas números e seq. diferente de 0.
// v.4.0.0 - 18/07/2024
//START
var tempoSleepEmSegundos = 120;
var numCasa = null;
var numCasaWrp;
var numCasaLabel;
var toolTipIcon;
var numCasaLabelContent = 'Nº da Residência (apenas números) <i class="fas fa-info-circle tooltip-info-circle"></i>';
var tooltipTxtContent = "Insira apenas números, ou \"SN\" para \"Sem Número\". Se necessário, insira letras no campo \"Complemento\" mais à frente. Número de casa com apenas \"0\" ou sequência de \"0\" é inválida.";
function sleepSearchForNumCasaWrp(ms) {
return new Promise((resolve) => {setTimeout(resolve, ms)} )
}
async function searchForNumCasaWrp() {
for (i = tempoSleepEmSegundos; i > 0; i--) {
if (numCasa == null) {
console.log("looking for numCasa");
fillsNumCasaInfo ();
} else {
break;
}
await sleepSearchForNumCasaWrp(1000);
}
}
function createToolTip () {
let toolTip = document.createElement("p")
let toolTipTxtNode = document.createTextNode(tooltipTxtContent);
toolTip.classList.add("numres-tooltip-text");
toolTip.appendChild(toolTipTxtNode);
toolTipIcon = document.querySelector(".tooltip-info-circle");
numCasaWrp.append(toolTip);
}
function fillsNumCasaInfo () {
try {
numCasa = document.querySelector("#bfc_numberOfAddress");
numCasaWrp = document.querySelector("#bfc_numberOfAddress").parentNode;
numCasaLabel = document.querySelector("#bfc_numberOfAddress").previousSibling;
numCasaLabel.innerHTML = (numCasaLabelContent);
console.log("NumCasa filled");
createWarning ();
} catch (error) {
console.log("numCasa ainda não preenchido", error)
}
}
function createWarning () {
numCasa.placeholder = "1234"; // É aplicado só após o numCasa estar preenchido
createToolTip ();
let toolTipWrp = document.querySelector(".numres-tooltip-text");
toolTipIcon.addEventListener("click", () => {
(toolTipWrp.style.display == "none") ? toolTipWrp.style.display = "block" : toolTipWrp.style.display = "none";
})
numCasa.addEventListener("click", () => {
(toolTipWrp.style.display == "none") ? toolTipWrp.style.display = "block" : toolTipWrp.style.display = "none";
})
}
// END
Ao final da inserção de tudo, se nada foi alterado, as páginas com o gatilho devem ficar com o campo da forma abaixo:
