diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..106d65c 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,217 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + this.body.onresize = await 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"); + this.body = await waitElement("#checkoutMainContainer"); + } + async progressBarHTML() { + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` + + `; + } + if (this.progressBar && window.innerWidth <= 1024) { + 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"); + } + } + }); + }); + } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..f88d072 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -8,14 +8,20 @@ html { min-height: 100%; } -footer .footerCheckout__wrapper { +footer .footerCheckout__wrapper .container { width: 94.9734%; margin: auto auto 0 auto; } -footer .footerCheckout__prateleira, header { + border-bottom: 1px solid #000; +} +footer .footerCheckout__prateleira, +.headerCheckout .container { width: 79.53125%; margin: 0 auto; + @media (max-width: 1024px) { + width: auto; + } } body { @@ -27,7 +33,11 @@ body { @include mq(md, max) { padding-left: 0; } - + .container { + @media (max-width: 490px) { + padding: 16px !important; + } + } &.body-cart { font-family: $font-family; } @@ -47,10 +57,10 @@ body { padding-left: 0; } } - .container-order-form, - .container-cart { - width: 80%; - } + // .container-order-form, + // .container-cart { + // width: 80%; + // } } .btn-success { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..71b8338 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,7 +1,132 @@ /* _header.scss */ .headerCheckout { .container { - width: auto !important; + padding: 29px 0 29.86px; + @media (min-width: 2500px) { + padding: 29px 0; + } + @media (max-width: 1024px) { + padding: 16px 16px 16.88px; + } + + #progressBar { + width: 439px; + font-size: 0; + @media (min-width: 2500px) { + width: 1078.86px; + } + @media (max-width: 1024px) { + display: none; + } + 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; + justify-content: center; + width: 173px; + @media (min-width: 2500px) { + width: 444px; + } + p { + font-family: $font-family-secundary; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #000000; + margin-bottom: 9px; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + margin-bottom: 15px; + } + } + } + li.central { + width: auto; + } + li #progress-bar-circle-1 { + margin-right: 4px; + } + li #progress-bar-circle-3 { + margin-left: 4px; + @media (min-width: 2500px) { + margin-left: 0px; + } + } + li #progress-bar-circle-1, + li #progress-bar-circle-2, + li #progress-bar-circle-3 { + width: 12px; + height: 12px; + border: 1px solid #000000; + border-radius: 50%; + margin-bottom: 0; + @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: #000000; + } + li .progress-bar-line-1 { + position: absolute; + left: 25%; + bottom: 5px; + width: 100%; + border-top: 1px solid #000; + margin: 0 !important; + line-height: 0; + @media (min-width: 2500px) { + left: 19%; + bottom: 11px; + } + } + li .progress-bar-line-2 { + position: absolute; + right: 21%; + bottom: 6px; + width: 100%; + border-top: 1px solid #000; + margin: 0 !important; + line-height: 0; + @media (min-width: 2500px) { + right: 18%; + bottom: 11px; + } + } + } } &__wrapper { align-items: center; @@ -10,27 +135,62 @@ } &__logo { - img { - height: 52px; - width: auto; + width: 15.28%; + @media (min-width: 2500px) { + width: 19.25%; + } + @media (max-width: 1024px) { + width: 155.58px; + min-width: 155.58px; + } + @media (max-width: 320px) { + min-width: 119px; + } + a { + width: 100%; + @media (max-width: 1024px) { + width: 155.58px; + min-width: 155.58px; + } + @media (max-width: 320px) { + min-width: 119px; + } + img { + height: auto; + width: 100%; + } } } &__safeBuy { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 8px; + width: 11.69%; + min-width: 119px; + @media (min-width: 2500px) { + width: 11.83%; + min-width: 235.28px; + } span { - align-items: center; - display: flex; - text-transform: uppercase; font-family: $font-family; - font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; - line-height: 14px; - color: $color-gray; + line-height: 16px; + text-transform: uppercase; + color: #292929; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } - i { - margin-right: 8px; + img { + width: 10.08%; + @media (min-width: 2500px) { + width: 12.52%; + } } } }