Created
August 2, 2021 18:21
-
-
Save walterjaworski/59ce27e29021f26c522f6341c12e4ff7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var pai = Array.from(document.getElementsByClassName("list-products")); | |
console.log(pai); | |
console.log(pai[1].getAttribute("data-product-name")); | |
if(pai[1].getAttribute("data-product-name") === "fun-hd") { | |
// Adição de nova div (Back do card) para inserir os botões | |
var HTMLBack = '<div id="box-clean-back"class="box-clean"> <div class="title-box text-center" style="margin: 70px 0 15px 0 !important;"><span class="bodySecondary bold"> Estamos quase lá, escolha como prefere continuar </span> </div> <button id="assinarOnline" class="btn buttonPrimary btn-block turn-card button-buy-front buy-now margin" type="button" style="margin: 0 0 30px 0;">Assine Online</button> <br> <button class="btn buttonPrimary btn-block turn-card button-buy-front buy-now" type="button" id="receberLigacao" style="margin: 0 0 30px 0;">Receber uma Ligação</button> <br> <button class="btn buttonPrimary btn-block turn-card button-buy-front buy-now" type="button" id="ligarSky" style="margin: 0 0 30px 0;">Ligar para SKY</button> <br> <a href="https://wa.me/551130031140?text=Link%3A%0Ahttps%3A%2F%2Fassine.sky.com.br%0A%0AVi+isso+no+Assine+SKY" class="btn buttonPrimary btn-block turn-card button-buy-front buy-now margin" type="button" style="margin: 0 0 95px 0;">Comprar pelo Chat</a> <button id="flip-back" class="btn buttonPrimary btn-block turn-card button-buy-front buy-now">Voltar</button></div>'; | |
var ref = document.querySelector(".d-flex") | |
var div = document.createElement('div'); | |
div.innerHTML = HTMLBack; | |
ref.parentElement.insertBefore(div.firstChild, ref); | |
//---------------------x----------------------------- | |
// Criação de nova div para conter todo conteudo front e back | |
var HTMLAll = '<div id="all"> </div>'; | |
var refAll = document.querySelector(".box-clean") | |
var divAll = document.createElement('div'); | |
divAll.innerHTML = HTMLAll; | |
refAll.parentElement.insertBefore(divAll.firstChild, refAll); | |
//---------------------x----------------------------- | |
// Realoca a div box-clean para dentro da div all (para se adequar a estrutura do flip card) | |
var fragment = document.createDocumentFragment(); | |
fragment.appendChild(document.querySelector(".box-clean")); | |
document.querySelector("#all").appendChild(fragment); | |
//---------------------x----------------------------- | |
// Realoca a div box-clean-back para fora da div box-clean (para se adequar a estrutura do flip card) | |
var fragmentBoxCleanBack = document.createDocumentFragment(); | |
fragmentBoxCleanBack.appendChild(document.querySelector("#box-clean-back")); | |
document.querySelector("#all").appendChild(fragmentBoxCleanBack); | |
//---------------------x----------------------------- | |
//Adiciona/altera a cor de elementos criados | |
var elementJustAll = document.querySelector("#all") | |
elementJustAll.style.cssText = 'width: 100%; transform-style: preserve-3d; transition: transform 1s'; | |
var elementAllBoxClean = document.querySelector("#all .box-clean") | |
//elementAllBoxClean.style.cssText = 'background: red'; | |
var elementAllBoxCleanBack = document.querySelector("#all #box-clean-back") | |
elementAllBoxCleanBack.style.cssText = 'transform: rotateY( 180deg); height: 645px; margin-top: -645px;'; | |
//---------------------x----------------------------- | |
// Altera o valor pardão do botão "eu quero" para receber a funcionalidade de flipcard | |
var divAnchor = document.querySelector(".btn-wrap") | |
var divBtn = document.createElement("div"); | |
divBtn.classList.add("btn-wrap", "col-xs-12", "d-flex", "p-0") | |
divBtn.innerHTML = "<button id='flip' class='btn buttonPrimary btn-block turn-card button-buy-front buy-now'>Flip Card</button>"; | |
divAnchor.parentNode.replaceChild(divBtn, divAnchor); | |
//---------------------x----------------------------- | |
// Dispara a função de click para o efeito flip card em Front | |
document.querySelector("#flip").onclick = function() { | |
document.querySelector("#all").classList.toggle("flipped"); | |
// Evento de BI | |
dataLayer.push({ 'event': 'clickEvent', 'eventCategory': 'page:home', 'eventAction': 'flip-card:click', 'eventLabel': 'flip-card:click' }); | |
}; | |
// Dispara a função de click para o efeito flip card em Back | |
document.querySelector("#flip-back").onclick = function() { | |
document.querySelector("#all").classList.toggle("flipped"); | |
// Evento de BI | |
dataLayer.push({ 'event': 'clickEvent', 'eventCategory': 'page:home', 'eventAction': 'flip-card:back:click', 'eventLabel': 'flip-card:back:click' }); | |
}; | |
//---------------------x----------------------------- | |
// Dispara a função de click para exibir o número para ligar para SKY | |
document.querySelector("#ligarSky").onclick = function() { | |
var elementLigarSky = document.querySelector("#ligarSky"); | |
elementLigarSky.innerHTML = '4004-2884'; | |
// Evento de BI | |
dataLayer.push({ 'event': 'clickEvent', 'eventCategory': 'page:home', 'eventAction': 'ligar-sky:click', 'eventLabel': 'ligar-sky:click' }); | |
} | |
//---------------------x----------------------------- | |
// Dispara a função de click para exibir o modal com o form PGL para receber ligação | |
document.querySelector("#receberLigacao").onclick = function() { | |
var elementModalWhats = document.querySelector("#modal-receive-call-whisbi"); | |
elementModalWhats.classList.add("in"); | |
elementModalWhats.style.cssText = 'display: block; background: rgba(0, 0, 0, 0.6);'; | |
// Evento de BI | |
dataLayer.push({ 'event': 'clickEvent', 'eventCategory': 'page:home', 'eventAction': 'modal-receber-ligacao:abrir:click', 'eventLabel': 'modal-receber-ligacao:abrir:click' }); | |
} | |
// Dispara a função de click para remover o modal com o form PGL ao clicar no X | |
var targetDivBest = document.getElementById("modal-receive-call-whisbi").getElementsByClassName("modal-header")[0]; | |
targetDivBest.onclick = function() { | |
var elementModalWhats = document.querySelector("#modal-receive-call-whisbi"); | |
elementModalWhats.classList.add("in"); | |
elementModalWhats.style.cssText = 'display: none;'; | |
// Evento de BI | |
dataLayer.push({ 'event': 'clickEvent', 'eventCategory': 'page:home', 'eventAction': 'modal-receber-ligacao:fechar:click', 'eventLabel': 'modal-receber-ligacao:fechar:click' }); | |
} | |
//---------------------x----------------------------- | |
} | |
if(pai[0].getAttribute("data-product-name") === "easy-hd") { | |
console.log("entrou em easy"); | |
} | |
if(pai[2].getAttribute("data-product-name") === "mega-hd") { | |
console.log("entrou em mega"); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment