From 3d9e69b2a487d5d73b34ec6914358a2c39203680 Mon Sep 17 00:00:00 2001 From: Adilson Fernando Date: Sat, 17 Dec 2022 02:06:08 -0300 Subject: [PATCH] feat: barra do final da pagina --- checkout/src/arquivos/js/components/Footer.js | 25 +- checkout/src/arquivos/js/components/Header.js | 262 +----------------- .../src/arquivos/sass/checkout/_checkout.scss | 3 +- .../src/arquivos/sass/partials/_footer.scss | 16 +- .../template-checkout/checkout-footer.html | 1 + 5 files changed, 45 insertions(+), 262 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index dffbab9..c2c5ba3 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -39,8 +39,9 @@ export default class Footer { slidesToScroll: 1, }); } - footerFlex(){ + footerFlex() { this.divFooter.innerHTML = ` +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -48,31 +49,41 @@ export default class Footer {
  • - Aqui: creditcard icons + + mastercard + visa + american + elo + hipercard + paypal + boleto +
  • - Aqui: vtex pci icon + + logoCertificado +
- ` + `; } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 27ec2f2..a59aa2a 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -11,258 +11,16 @@ export default class Header { this.meioDaTela(); this.meioDaTela2(); this.meioDaTela3(); - // this.barraDeProgresso(); - // await this.evolucaoBarra(); } -// ----------------------> A PARTE DO CODIGO COMENTADA É A PARTE DA BARRA DE PROGRESSSO, INFELIZMENTE ACONTECEU UNS PROBLEMAS COMIGO, E ME FALTOU UM POUCO DE MOTIVAÇÃO PARA CONTINUAR, E TAMBÉM NÃO ACHO CERTO PEGAR O CODIGO DA PROFESSORA E SIMPLESMENTE COPIAR, QUERIA PODER SABER MAIS PARA CONSEGUIR FAZER ESSA BARRA DE PROGRESSO, ENFIM, PEÇO DESCULPAS <----------------------------- - async selectors() { - // this.header = await waitElement(".headerCheckout"); - // this.progressBar = await waitElement("#progressBar"); this.divAnteriorLinha = await waitElement(".container"); this.textoMeioTela = await waitElement(".empty-cart-title"); this.textoMeioTela2 = await waitElement(".empty-cart-message"); this.textoMeioTela3 = await waitElement("#cart-choose-products"); this.textoMeioTela4 = await waitElement("#cart-title"); } - - // barraDeProgresso() { - // if (this.progressBar && window.innerWidth > 1024) { - // this.progressBar.innerHTML = ` - // - // `; - // } - // if (this.progressBar && window.innerWidth <= 1024) { - // this.progressBar.innerHTML = ""; - // } - // } - -// async evolucaoBarra() { -// if (this.progressBar && window.innerHTML > 1024) { -// const listUrl = document.querySelectorAll("#progressBar ul li"); -// listUrl.forEach((li) => { -// if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { -// if (li.children[0].children[0].children["bolinha1"]) { -// li.children[0].children[0].children["bolinha1"].classList.add( -// "preencherBolinha" -// ); -// } -// if (li.children[0].children[0].children["bolinha2"]) { -// if ( -// li.children[0].children[0].children["bolinha2"].classList.contains( -// "preencherBolinha" -// ) -// ) { -// li.children[0].children[0].children["bolinha2"].classList.remove( -// "preencherBolinha" -// ); -// } -// } -// if (li.children[0].children[0].children["bolinha3"]) { -// if ( -// li.children[0].children[0].children["bolinha3"].classList.contains( -// "preencherBolinha" -// ) -// ) { -// li.children[0].children[0].children["bolinha3"].classList.remove( -// "preencherBolinha" -// ); -// } -// } -// } else if ( -// window.location.href === "https://m3academy.myvtex.com/checkout/#/email" || -// window.location.href == "https://m3academy.myvtex.com/checkout/#/profile" || -// window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" -// ) { -// if (li.children[0].children[0].children["bolinha1"]) { -// if ( -// li.children[0].children[0].children[ -// "preencherBolinha" -// ].classList.contains("preencherBolinha") -// ) { -// li.children[0].children[0].children[ -// "preencherBolinha" -// ].classList.remove("preencherBolinha"); -// } -// } -// if (li.children[0].children[0].children["bolinha2"]) { -// li.children[0].children[0].children["bolinha2"].classList.add( -// "preencherBolinha" -// ); -// } -// if (li.children[0].children[0].children["bolinha3"]) { -// if ( -// li.children[0].children[0].children[ -// "preencherBolinha" -// ].classList.contains("preencherBolinha") -// ) { -// li.children[0].children[0].children[ -// "preencherBolinha" -// ].classList.remove("preencherBolinha"); -// } -// } -// } else if ( -// window.location.href == "https://m3academy.myvtex.com/checkout/#/payment" -// ) { -// if (li.children[0].children[0].children["bolinha1"]) { -// if ( -// li.children[0].children[0].children["bolinha1"].classList.contains( -// "preencherBolinha" -// ) -// ) { -// li.children[0].children[0].children["bolinha1"].classList.remove( -// "preencherBolinha" -// ); -// } -// } -// if (li.children[0].children[0].children["bolinha2"]) { -// li.children[0].children[0].children["bolinha2"].classList.add( -// "preencherBolinha" -// ); -// } -// if (li.children[0].children[0].children["bolinha3"]) { -// if ( -// li.children[0].children[0].children["bolinha3"].classList.contains( -// "preencherBolinha" -// ) -// ) { -// li.children[0].children[0].children["bolinha3"].classList.remove( -// "preencherBolinha" -// ); -// } -// } -// } -// window.addEventListener("hashChange", () => { -// if (window.locarion.hast == "#/cart") { -// if (li.children[0].children[0].children["bolinha1"]) { -// if ( -// li.children[0].children[0].children["bolinha1"].classList.contains( -// "preencherBolinha" -// ) -// ) { -// li.children[0].children[0].children["bolinha1"].classList.add( -// "preencherBolinha" -// ); -// } -// } -// if (li.children[0].children[0].children["bolinha2"]) { -// if ( -// li.children[0].children[0].children["bolinha2"].classList.contains( -// "preencherBolinha" -// ) -// ) { -// li.children[0].children[0].children["bolinha2"].classList.remove( -// "preencherBolinha" -// ); -// } -// } -// if (li.children[0].children[0].children["bolinha3"]) { -// if ( -// li.children[0].children[0].children["bolinha3"].classList.contains( -// "preencherBolinha" -// ) -// ) { -// li.children[0].children[0].children["bolinha3"].classList.remove( -// "preencherBolinha" -// ); -// } -// } -// } else if ( -// window.location.hash === "#/email" || -// window.location.hash == "#/profile" || -// window.location.hash == "#/shipping" -// ) { -// if (li.children[0].children[0].children["bolinha1"]) { -// if ( -// li.children[0].children[0].children["bolinha1"].classList.contains( -// "preencherBolinha" -// ) -// ) { -// li.children[0].children[0].children["bolinha1"].classList.remove( -// "preencherBolinha" -// ); -// } -// } -// if (li.children[0].children[0].children["bolinha2"]) { -// li.children[0].children[0].children["bolinha2"].classList.add( -// "preencherBolinha" -// ); -// } -// if (li.children[0].children[0].children["bolinha3"]) { -// if ( -// li.children[0].children[0].children["bolinha3"].classList.contains( -// "preencherBolinha" -// ) -// ) { -// li.children[0].children[0].children["bolinha3"].classList.remove( -// "preencherBolinha" -// ); -// } -// } -// } else if (window.location.hash == "#/payment") { -// if (li.children[0].children[0].children["bolinha1"]) { -// if ( -// li.children[0].children[0].children["bolinha1"].classList.contains( -// "preencherBolinha" -// ) -// ) { -// li.children[0].children[0].children["bolinha1"].classList.remove( -// "preencherBolinha" -// ); -// } -// } -// if (li.children[0].children[0].children["bolinha2"]) { -// if ( -// li.children[0].children[0].children["bolinha2"].classList.contains( -// "preencherBolinha" -// ) -// ) { -// li.children[0].children[0].children["bolinha2"].classList.remove( -// "preencherBolinha" -// ); -// } -// } -// if (li.children[0].children[0].children["bolinha3"]) { -// li.children[0].children[0].children["bolinha3"].classList.add( -// "preencherBolinha" -// ); -// } -// } -// }); -// }); -// } -// } - linhaHeader(){ + linhaHeader() { this.divAnteriorLinha.innerHTML = `
- ` + `; } - meioDaTela(){ - this.textoMeioTela.innerHTML = `SEU CARRINHO ESTÁ VAZIO` - this.textoMeioTela4.innerHTML = `` + meioDaTela() { + this.textoMeioTela.innerHTML = `SEU CARRINHO ESTÁ VAZIO`; + this.textoMeioTela4.innerHTML = ``; } - meioDaTela2(){ - this.textoMeioTela2.innerHTML = `` + meioDaTela2() { + this.textoMeioTela2.innerHTML = ``; } - meioDaTela3(){ - this.textoMeioTela3.innerHTML = `CONTINUAR COMPRANDO` + meioDaTela3() { + this.textoMeioTela3.innerHTML = `CONTINUAR COMPRANDO`; } - } - diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index f0ca00f..757981d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,7 +9,8 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; + // width: 94.9734%; + width: 100%; margin: auto auto 0 auto; } footer .footerCheckout__prateleira, diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 959b7d1..cc11cfa 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,9 +1,14 @@ /* _footer.scss */ +hr{ + background-color: black; + color: black; + margin: 0 !important; +} .conteiner_footer { width: 100%!important; display: flex; align-items: center; - justify-content: center; + padding: 22px 22px 22px 32px; .footerCheckout { border-top: none; color: $color-gray2; @@ -29,6 +34,15 @@ margin-bottom: 24px; max-width: 100%; } + span{ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 14px; + text-transform: capitalize; + color: #292929; + } } &__stamps { diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html index 6246210..8e28e9e 100644 --- a/checkout/src/template-checkout/checkout-footer.html +++ b/checkout/src/template-checkout/checkout-footer.html @@ -30,6 +30,7 @@
  • Developed By + logoM3 @TODO: m3 icon