From 7b1d68e3ec6af71c2a6c8facebdcd4eb1d21a0d2 Mon Sep 17 00:00:00 2001 From: Adilson Fernando Date: Fri, 16 Dec 2022 13:26:19 -0300 Subject: [PATCH] feat: js do footer --- checkout/src/arquivos/js/components/Footer.js | 38 +++ checkout/src/arquivos/js/components/Header.js | 288 +++++++++++++++++- .../sass/checkout/_checkout-vazio.scss | 9 +- .../src/arquivos/sass/checkout/_checkout.scss | 5 +- .../src/arquivos/sass/partials/_footer.scss | 125 ++++---- .../src/arquivos/sass/partials/_header.scss | 16 +- 6 files changed, 408 insertions(+), 73 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..dffbab9 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,6 +7,7 @@ export default class Footer { async init() { await this.selectors(); + this.footerFlex(); // this.onUpdate(); } @@ -14,6 +15,7 @@ export default class Footer { //Para verificar se o carrinho está vazio e remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement this.checkoutVazio = await waitElement(".empty-cart-content"); + this.divFooter = await waitElement(".footerCheckout__wrapper"); } onUpdate() { @@ -37,4 +39,40 @@ export default class Footer { slidesToScroll: 1, }); } + footerFlex(){ + this.divFooter.innerHTML = ` +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+ + + +
+ ` + } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..27ec2f2 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -1,4 +1,3 @@ -// import waitForEl from "../helpers/waitForEl"; import { waitElement } from "m3-utils"; export default class Header { @@ -8,14 +7,289 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + this.linhaHeader(); + 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.item = await waitElement("#my-element", { - //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar - timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise - interval: 1000, // vai verificar a cada 1 segundo se o elemento existe - }); + // 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(){ + this.divAnteriorLinha.innerHTML = ` +
+ +
+
+
+ Cadeado + Compra segura +
+
+
+ ` + } + meioDaTela(){ + this.textoMeioTela.innerHTML = `SEU CARRINHO ESTÁ VAZIO` + this.textoMeioTela4.innerHTML = `` + } + meioDaTela2(){ + this.textoMeioTela2.innerHTML = `` + } + meioDaTela3(){ + this.textoMeioTela3.innerHTML = `CONTINUAR COMPRANDO` + } + } + diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..b410b1b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -15,9 +15,10 @@ &-links { .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; + background: $color-white !important ; + border-width: 1px; + border-style: solid; + border-color: $color-black ; transition: ease-in 0.22s all; outline: none; font-family: $font-family; @@ -27,7 +28,7 @@ line-height: 16px; text-align: center; letter-spacing: 0.05em; - color: $color-white; + color: $color-black; text-transform: uppercase; &:hover { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..f0ca00f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -14,8 +14,9 @@ footer .footerCheckout__wrapper { } footer .footerCheckout__prateleira, header { - width: 79.53125%; - margin: 0 auto; + // width: 79.53125%; + width: 100%; + margin: 0; } body { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..959b7d1 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,73 +1,80 @@ /* _footer.scss */ -.footerCheckout { - border-top: none; - color: $color-gray2; - - &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; - } - - &__address { +.conteiner_footer { + width: 100%!important; + display: flex; + align-items: center; + justify-content: center; + .footerCheckout { + border-top: none; color: $color-gray2; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - text-transform: capitalize; - max-width: 40%; - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; - } - } - - &__stamps { - align-items: center; - display: flex; - justify-self: center; - list-style: none; - - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; - } - - &__divider { - background-color: $color-gray4; - display: inline-block; - height: 24px; - margin: 0 8px; - width: 1px; - } - } - - &__developedBy { - align-items: center; - display: flex; - list-style-type: none; - margin: 0; - - li:last-child { - margin-left: 16px; - } - - a { + &__wrapper { align-items: center; - color: $color-gray2; display: flex; + justify-content: space-between; + + } + + &__address { + color: $color-gray2; font-family: $font-family; font-style: normal; font-weight: normal; font-size: 10px; line-height: 12px; - text-decoration: none; + text-transform: capitalize; + max-width: 40%; - span { - margin-right: 8px; + @include mq(md, max) { + margin-bottom: 24px; + max-width: 100%; + } + } + + &__stamps { + align-items: center; + display: flex; + justify-self: center; + list-style: none; + + @include mq(md, max) { + align-self: center; + margin-bottom: 12px; + } + + &__divider { + background-color: $color-gray4; + display: inline-block; + height: 24px; + margin: 0 8px; + width: 1px; + } + } + + &__developedBy { + align-items: center; + display: flex; + list-style-type: none; + margin: 0; + + li:last-child { + margin-left: 16px; + } + + a { + align-items: center; + color: $color-gray2; + display: flex; + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 10px; + line-height: 12px; + text-decoration: none; + + span { + margin-right: 8px; + } } } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..413a749 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,12 +1,18 @@ /* _header.scss */ .headerCheckout { .container { - width: auto !important; + width: 100%!important; + hr{ + background-color: black; + color: black; + margin: 0 !important; + } } &__wrapper { align-items: center; display: flex; justify-content: space-between; + padding: 29px 131px; } &__logo { @@ -17,6 +23,10 @@ } &__safeBuy { + display: flex; + align-items: center; + justify-content: center; + width: 11.69%; span { align-items: center; display: flex; @@ -28,6 +38,10 @@ line-height: 14px; color: $color-gray; } + img{ + width: 10.085%; + margin-right: 8px; + } i { margin-right: 8px;