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…).
Sendo assim, fizemos um trecho de código para restringir essa inserção de informação. O código se encontra abaixo. Os trechos de código (snippets) devem ser inseridos com os comentários para ficar mais fácil de achar e dar manutenção ou personalizar.
1 - Estilização em CSS. Insira em “Sistema - Config - Core Website“, na seção “Custom Style“
/*Estilização aviso de restrição*/
.numres-tooltip-text {
text-align: center;
padding: 5px;
border: 2px solid red;
width: 200px;
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;
}
/*Fim*/
2 - Código em Javascript
// v.2.2.0 - 28/07/2023
// Cria restrição de número da residência para aceitar apenas números.
let iCtrlTriggerRestricao = 1
var numCasa;
var toolTipIcon;
var numCasaWrp;
function numCasaRestricao () {
if (numCasa) {
numCasa.addEventListener("keyup", function(e) {
if (/\D/g.test(this.value)) {
this.value = this.value.replace(/\D/g, '');
}
})
}
return
}
function triggerRestricao () {
numCasa = document.querySelector("#bfc_numberOfAddress");
numCasa.placeholder = "1234";
if (numCasa && iCtrlTriggerRestricao == 1) {
let numCasaLabel = document.querySelector("body > wda-root > theme-providerfy > wda-providerfy-content-viewer.body > plugin-provider-checkout > div > section > div > div > plugin-provider-checkout-before-checkout > div > div > div > div:nth-child(3) > div > form > div:nth-child(3) > div:nth-child(1) > div.col-12.remove-hover-from-cep.col-md-6 > div > label")
numCasaLabel.innerHTML = 'Nº da Residência (apenas números) <i class="fas fa-info-circle tooltip-info-circle"></i>'
let toolTip = document.createElement("p")
let toolTipTxtNode = document.createTextNode("Se necessário, insira números e letras no campo \"Complemento\" mais à frente.");
toolTip.classList.add("numres-tooltip-text");
toolTip.appendChild(toolTipTxtNode);
toolTipIcon = document.querySelector(".tooltip-info-circle");
numCasaWrp = document.querySelector("body > wda-root > theme-providerfy > wda-providerfy-content-viewer.body > plugin-provider-checkout > div > section > div > div > plugin-provider-checkout-before-checkout > div > div > div > div:nth-child(3) > div > form > div:nth-child(3) > div:nth-child(1) > div.col-12.remove-hover-from-cep.col-md-6 > div");
numCasaWrp.append(toolTip);
let toolTip2 = document.querySelector(".numres-tooltip-text");
toolTipIcon.addEventListener("click", () => {
if (toolTip2.style.display == "none") {
toolTip2.style.display = "block";
} else {
toolTip2.style.display = "none";
}
})
numCasa.addEventListener("click", () => {
if (toolTip2.style.display == "none") {
toolTip2.style.display = "block";
} else {
toolTip2.style.display = "none";
}
})
numCasaRestricao ();
iCtrlTriggerRestricao -= 1;
} else {
return
}
}
setInterval(triggerRestricao, 5000);
// Fim
Nota: nas linhas 26 e 35 foi feita a seleção do seletor, elemento por elemento. Dependendo de como estiver o checkout do cliente (ex.: campos a mais, pre_check_customer…), isso altera a ordem e quantidade de campos, então pode ser necessária a correção desses trechos. Estou enviando abaixo o endereço de cada elemento e a qual variável ele deve ser atrelado. Use o modo “Inspecionar“ do seu navegador, selecione o elemento e clique em “Copy selector“, “Copiar seletor CSS“ ou equivalente.
TESTE: para testar se está tudo certo, insira os trechos, depois limpe o cache em “Ações manuais - Limpar cache“ e abra uma janela anônima. Após 5 segundos, é para aparecer as modificações no campo.
Adicionar Comentário