From bef0feb053be4ddcb5e32813085d5db8c3e51005 Mon Sep 17 00:00:00 2001 From: Savio Date: Sun, 11 Dec 2022 20:01:44 -0300 Subject: [PATCH 1/4] feat(header): Adicionando a barra de progresso --- checkout/src/arquivos/js/components/Header.js | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..deb6557 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,33 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + //console.log(this.item); + this.progressBarHTML(); + await this.progressBarProgress(); } 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"); + } + progressBarHTML() { + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` + + `; + } + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ``; + } } } -- 2.34.1 From 7c59ca4f9178ef1d7d2530449028cf046d949ddd Mon Sep 17 00:00:00 2001 From: Savio Date: Mon, 12 Dec 2022 19:58:33 -0300 Subject: [PATCH 2/4] feat(header): Adicionado o script do header de evento --- checkout/src/arquivos/js/components/Header.js | 200 +++++++++++++++++- 1 file changed, 197 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index deb6557..30475e5 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -27,9 +27,13 @@ export default class Header { if (this.progressBar && window.innerWidth > 1024) { this.progressBar.innerHTML = ` `; } @@ -37,4 +41,194 @@ export default class Header { this.progressBar.innerHTML = ``; } } + + async progressBarProgress() { + if (this.progressBar && window.innerWidth > 1024) { + const progressBarLista = document.querySelectorAll("#progressBar ul li"); + progressBarLista.forEach((li) => { + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + li.children[0].children[0].children["progress-bar-circle-1"].classList.add( + "active" + ); + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.remove("active"); + } + } + } 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["progress-bar-circle-1"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + li.children[0].children[0].children["progress-bar-circle-2"].classList.add( + "active" + ); + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.remove("active"); + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" + ) { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + li.children[0].children[0].children["progress-bar-circle-3"].classList.add( + "active" + ); + } + } + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.add("active"); + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.remove("active"); + } + } + } else if ( + window.location.hash == "#/email" || + window.location.hash == "#/profile" || + window.location.hash == "#/shipping" + ) { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.add("active"); + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.remove("active"); + } + } + } else if (window.location.hash == "#/payment") { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.add("active"); + } + } + }); + }); + } + } } -- 2.34.1 From 8890726729c109de48995a1d1f2890c77379c96e Mon Sep 17 00:00:00 2001 From: Savio Date: Mon, 12 Dec 2022 21:06:19 -0300 Subject: [PATCH 3/4] feat(header): Adicionando estilos na barra de progresso --- checkout/src/arquivos/js/components/Header.js | 5 +- .../src/arquivos/sass/partials/_header.scss | 75 +++++++++++++++++++ 2 files changed, 77 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 30475e5..d2fe2db 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -28,12 +28,11 @@ export default class Header { this.progressBar.innerHTML = `
  • -

    Meu Carrinho

    • +

    Meu Carrinho

  • Dados Pessoais

    • - -
  • Pagamento

    • +
  • Pagamento

`; } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..4ccb577 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -2,6 +2,81 @@ .headerCheckout { .container { width: auto !important; + #progressBar { + width: 446px; + ul { + list-style-type: none; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 !important; + } + li .containerLi { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + position: relative; + } + li.central .containerLi { + align-items: center; + margin-left: 7px; + } + li:last-child .containerLi { + align-items: flex-end; + } + li .containerLi div { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + li { + display: flex; + flex-direction: column; + align-items: center; + } + li.central { + width: auto; + } + li #progress-bar-circle-1, + li #progress-bar-circle-2, + li #progress-bar-circle-3 { + width: 12px; + height: 12px; + border: 1px solid #000; + border-radius: 50%; + @media (min-width: 2500px) { + width: 24px; + height: 24px; + } + } + li #progress-bar-circle-1.active, + li #progress-bar-circle-2.active, + li #progress-bar-circle-3.active { + border: none; + background-color: #000; + } + li .progress-bar-line-1 { + position: absolute; + left: 25%; + transform: translateY(-50%); + bottom: 5px; + width: 100%; + height: 1px; + border-top: 1px solid #000; + } + li .progress-bar-line-2 { + position: absolute; + right: 21%; + transform: translateY(-50%); + bottom: 5px; + width: 100%; + height: 1px; + border-top: 1px solid #000; + } + } } &__wrapper { align-items: center; -- 2.34.1 From 27d740563c09eb7c09c02f9503e7c1dca06e8277 Mon Sep 17 00:00:00 2001 From: Savio Date: Tue, 13 Dec 2022 19:46:34 -0300 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20separando=20fun=C3=A7=C3=B5es?= =?UTF-8?q?=20em=20responsabilidades=20unicas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Header.js | 199 ++++-------------- 1 file changed, 37 insertions(+), 162 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index d2fe2db..35a3bac 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -46,188 +46,63 @@ export default class Header { const progressBarLista = document.querySelectorAll("#progressBar ul li"); progressBarLista.forEach((li) => { if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - li.children[0].children[0].children["progress-bar-circle-1"].classList.add( - "active" - ); - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } + this.trataPonto(li, 1); } 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["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - li.children[0].children[0].children["progress-bar-circle-2"].classList.add( - "active" - ); - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } + this.trataPonto(li, 2); } else if ( window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" ) { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - li.children[0].children[0].children["progress-bar-circle-3"].classList.add( - "active" - ); - } + this.trataPonto(li, 3); } window.addEventListener("hashchange", () => { if (window.location.hash == "#/cart") { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.add("active"); - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } + this.trataPonto(li, 1); } else if ( window.location.hash == "#/email" || window.location.hash == "#/profile" || window.location.hash == "#/shipping" ) { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.add("active"); - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } + this.trataPonto(li, 2); } else if (window.location.hash == "#/payment") { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.add("active"); - } + this.trataPonto(li, 3); } }); }); } } + + marcarPonto(li, local) { + if (li.children[0].children[0].children["progress-bar-circle-" + local]) { + li.children[0].children[0].children["progress-bar-circle-" + local].classList.add( + "active" + ); + } + } + + removerPonto(li, local) { + if (li.children[0].children[0].children["progress-bar-circle-" + local]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-" + local + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-" + local + ].classList.remove("active"); + } + } + } + + trataPonto(li, local) { + const indice = [1, 2, 3]; + let indicesPontoBranco = indice.splice(local - 1, 1); + this.marcarPonto(li, local); + for (const i of indice) { + this.removerPonto(li, i); + } + } } -- 2.34.1