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.
Antes de continuarmos com esse tutorial, certifique-se que você sabe localizar elementos usando o “Inspecionar“ de seu navegador, e capturar o seletor CSS dos elementos dessa forma.
Este código vai precisar que algumas alterações sejam feitas nos assines. No caso vamos fazer um exemplo com o /assine e com o /assine-revendedor. Abra o assine e insira a div de html pertinente (no caso, no /assine inseriremos a div com o texto “Assine 1“, e no /assine-revendedor, a div com “Assine Rev 1“).
<div class="ixcs-d-none"> <p class="ixcs-triggertext">Assine 1</p> </div> <div class="ixcs-d-none"> <p class="ixcs-triggertext">Assine Rev 1</p> </div>
Depois vamos estilizar o 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;
}
.ixcs-d-none {
display: none;
}
/*Fim*/
E então faça a inserção do código em Javascript.
O código em si precisará de algumas alterações, que você precisa fazer de acordo com o provedor. Não insira direto da forma que está aqui!
// v.3.0.0 - 15/02/2024
const tooltipTxtContent = "Se necessário, insira números e letras no campo \"Complemento\" mais à frente.";
var ictrlGetNumCasa = 1
var numCasa;
var toolTipIcon;
var numCasaWrp;
var numCasaLabel;
var ixcTrgTxt;
function trimNumCasa () {
if (numCasa) {
numCasa.addEventListener("keyup", function(e) {
if (/\D/g.test(this.value)) {
this.value = this.value.replace(/\D/g, '');
}
})
}
return
}
function createToolTip () {
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.append(toolTip);
}
function getTriggerText () {
ixcTrgTxt = document.querySelector(".ixcs-triggertext").innerText;
}
function getNumCasa () {
// numCasa, pelo seletor ser um ID, dificilmente precisará ser alterado
numCasa = document.querySelector("#bfc_numberOfAddress");
if (numCasa != undefined && ictrlGetNumCasa == 1) {
runRestriction()
ictrlGetNumCasa -= 1
} else if (numCasa != undefined && ictrlGetNumCasa == 0) {
console.log("numCasa already defined")
} else {
console.log("numCasa is undefined")
}
}
function runRestriction () {
getTriggerText ();
defineRestriction ();
}
function defineRestriction () {
if (ixcTrgTxt == "Assine 1") {
createRestriction1()
}
else if (ixcTrgTxt == "Assine Rev 1") {
createRestriction2 ()
}
else {
console.log("Trigger text not found")
}
}
//Cria restrição para /assine 1
function createRestriction1 () {
numCasa.placeholder = "1234";
numCasaLabel = document.querySelector("div.col-12:nth-child(2) > div:nth-child(1) > label:nth-child(1)")
numCasaLabel.innerHTML = 'Nº da Residência (apenas números) <i class="fas fa-info-circle tooltip-info-circle"></i>'
numCasaWrp = document.querySelector("div.col-12:nth-child(2) > div:nth-child(1)");
createToolTip ();
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";
}
})
trimNumCasa ();
}
//Cria restrição para /assine-revendedor 1
function createRestriction2 () {
numCasa.placeholder = "1234";
numCasaLabel = document.querySelector("div.col-12:nth-child(2) > div:nth-child(1) > label:nth-child(1)")
numCasaLabel.innerHTML = 'Nº da Residência (apenas números) <i class="fas fa-info-circle tooltip-info-circle"></i>'
numCasaWrp = document.querySelector("div.col-12:nth-child(2) > div:nth-child(1)");
createToolTip ();
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";
}
})
trimNumCasa ();
}
setInterval(getNumCasa, 2000)
Note que nas linhas 54 a 64, a função está chamando uma função criadora de restrição para cada tipo de texto. Isso significa que o código vai criar uma restrição de acordo com o assine. Isso permite que o código possa ser reaproveitado entre assines.
TUTORIAL INCOMPLETO, DEPOIS CONTINUO - GSacata
As alterações que você precisará fazer:
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.
0 Comentários