Última atualização: 03/06/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.
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“)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.
| 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*/ <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:
| Bloco de código |
|---|
<style> /* Estilização aviso número da casa IXC */ .numres-tooltip-text { text-align: center; padding: 5px; border: 2px solid red; width: 200px250px; 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!
| Bloco de código |
|---|
// 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 toolTipIconstyle> |
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.
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.
| Bloco de código |
|---|
// Restringe input de número de casa para aceitar apenas números e seq. diferente de 0. // v.4.0.0 - 03/06/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"; |
...
|
...
} |
...
) |
...
|
...
}
|
...
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.
...
// 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:
