Comparação de Páginas

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“).1 - Estilização em

Bloco de código
<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“

Bloco de código

/*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*/

2 - Código em JavascriptE 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!

Bloco de código

// v.23.20.0 - 2815/07/2023
// Cria restrição de número da residência para aceitar apenas números.

let iCtrlTriggerRestricao 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 numCasaRestricaotrimNumCasa () {
      if (numCasa) {
            numCasa.addEventListener("keyup", function(e) {
                       if (/\D/g.test(this.value)) {
               
                this.value = this.value.replace(/\D/g, '');
            }
        })
    }
   
            }
        })
    }
    return
}

function triggerRestricaocreateToolTip () {
    
    numCasa
    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("#bfc_numberOfAddress.ixcs-triggertext").innerText;
    numCasa.placeholder = "1234";
    
   
}

function getNumCasa () {
    // numCasa, pelo seletor ser um ID, dificilmente precisará ser alterado
    numCasa = document.querySelector("#bfc_numberOfAddress");
    
    if (numCasa != undefined && iCtrlTriggerRestricaoictrlGetNumCasa == 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")
       
        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>'
        
        let toolTip

    numCasaWrp = document.querySelector("div.col-12:nth-child(2) > div:nth-child(1)");

    createToolTip ();

    let toolTip2 = document.createElementquerySelector("p.numres-tooltip-text");
           
  let toolTipTxtNode = documenttoolTipIcon.createTextNodeaddEventListener("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"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(31) > divlabel:nth-child(1)")
>    div.col-12.remove-hover-from-cep.col-md-6 > div");
        numCasaWrp.append(toolTip);
        
        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";
              }
        })
 
               numCasaRestricao ();
        iCtrlTriggerRestricao -= 1;
    } else {
        return
    }
}

setInterval(triggerRestricao, 5000);
// FimtrimNumCasa ();
}

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.

...

Versões comparadas

Versão antiga 2

Nova versão 3

Chave