Comparação de Páginas

Ú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 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“

...

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: 200px;
   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;
    }

    /*Fim*/

2 - Código em Javascript

// v.2.2.0 - 28/07/2023
// Cria restrição de número da residência.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";

...

...

...

...

...

})

...

...

...

...

...

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.

...

 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:

Image Added

Image Added