Skip to content

Instantly share code, notes, and snippets.

@walterjaworski
Created August 2, 2021 18:21
Show Gist options
  • Save walterjaworski/59ce27e29021f26c522f6341c12e4ff7 to your computer and use it in GitHub Desktop.
Save walterjaworski/59ce27e29021f26c522f6341c12e4ff7 to your computer and use it in GitHub Desktop.
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