From 8373e350997ed5225910c440bf68116061bf0aeb Mon Sep 17 00:00:00 2001 From: carloswinter Date: Sun, 18 Dec 2022 21:58:10 -0300 Subject: [PATCH 1/3] feat(slick):adiciona css ao slick --- checkout/src/arquivos/sass/lib/_slick.scss | 26 +++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..1cacbf0 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -18,7 +18,7 @@ position: relative; overflow: hidden; display: block; - margin: 0; + margin: 0 -16px; padding: 0; &:focus { @@ -65,6 +65,7 @@ float: left; height: 100%; min-height: 1px; + margin: 0 8px 56px 8px; outline: none; [dir="rtl"] & { float: right; @@ -95,6 +96,9 @@ height: auto; border: 1px solid transparent; } + @media (max-width: 1024px) { + margin: 0px 7.5px 56px 7.5px; + } } .slick-arrow { font-size: 0; @@ -104,11 +108,31 @@ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center; z-index: 4; + top: 167px; + border: none; left: 10px; + @include mq(tv, min) { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") + no-repeat center center; + top: 313px; + width: 26px; + height: 58px; + } } .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; + top: 167px; z-index: 4; + border: none; right: 10px; + @include mq(tv, min) { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") + no-repeat center center; + top: 313px; + width: 26px; + height: 58px; + } } .slick-arrow.slick-hidden { display: none; From f9c8cd4e33528bd0ba3643d7df8aaef1088f3e33 Mon Sep 17 00:00:00 2001 From: carloswinter Date: Sun, 18 Dec 2022 21:59:21 -0300 Subject: [PATCH 2/3] feat(header): adiciona logica barra de progresso ao header --- checkout/src/arquivos/js/components/Header.js | 164 +++++++++++++++++- 1 file changed, 162 insertions(+), 2 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..bfa1e44 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,174 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + this.events(); + this.createProgressBar(); + await this.progressBarProgress(); } async selectors() { - this.item = await waitElement("#my-element", { + this.item = await waitElement("#progressBar", { //#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"); + } + events() { + addEventListener("resize", () => { + this.createProgressBar(); + this.progressBarProgress(); + }); + } + createProgressBar() { + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` + + `; + } + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ``; + } + } + async progressBarProgress() { + this.circle1 = await waitElement(".progress-bar-circle-1"); + this.circle2 = await waitElement(".progress-bar-circle-2"); + this.circle3 = await waitElement(".progress-bar-circle-3"); + if (this.progressBar && window.innerWidth > 1024) { + const progressBarList = document.querySelectorAll("#progressBar ul li"); + progressBarList.forEach((li) => { + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + if (this.circle1) { + this.circle1.classList.add("active"); + } + if (this.circle2) { + if (this.circle2.classList.contains("active")) { + this.circle2.classList.remove("active"); + } + } + if (this.circle3) { + if (this.circle3.classList.contains("active")) { + this.circle3.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 (this.circle1) { + if (this.circle1.classList.contains("active")) { + this.circle1.classList.remove("active"); + } + console.log("email shipping"); + console.log(this.circle1); + if (this.circle2) { + this.circle2.classList.add("active"); + console.log("teste dados"); + } + console.log(this.circle2); + console.log(this.circle3); + if (this.circle3) { + if (this.circle3.classList.contains("active")) { + this.circle3.classList.remove("active"); + } + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" + ) { + if (this.circle1) { + if (this.circle1.classList.contains("active")) { + this.circle1.classList.remove("active"); + } + } + if (this.circle2) { + if (this.circle2.classList.contains("active")) { + this.circle2.classList.remove("active"); + } + } + if (this.circle3) { + this.circle3.classList.add("active"); + } + } + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + if (this.circle1) { + this.circle1.classList.add("active"); + } + if (this.circle2) { + if (this.circle2.classList.contains("active")) { + this.circle2.classList.remove("active"); + } + } + if (this.circle3) { + if (this.circle3.classList.contains("active")) { + this.circle3.classList.remove("active"); + } + } + } else if ( + window.location.hash == "#/email" || + window.location.hash == "#/profile" || + window.location.hash == "#/shipping" + ) { + if (this.circle1) { + if (this.circle1.classList.contains("active")) { + this.circle1.classList.remove("active"); + } + } + if (this.circle2) { + this.circle2.classList.add("active"); + } + if (this.circle3) { + if (this.circle3.classList.contains("active")) { + this.circle3.classList.remove("active"); + } + } + } else if (window.location.hash == "#/payment") { + if (this.circle1) { + if (this.circle1.classList.contains("active")) { + this.circle1.classList.remove("active"); + } + } + if (this.circle2) { + if (this.circle2.classList.contains("active")) { + this.circle2.classList.remove("active"); + } + } + if (this.circle3) { + this.circle3.classList.add("active"); + } + } + }); + }); + } } } From 84b16ee8eaa7cb88ba20dcf4aef4e8f8c835c145 Mon Sep 17 00:00:00 2001 From: carloswinter Date: Sun, 18 Dec 2022 22:03:22 -0300 Subject: [PATCH 3/3] feat(header): adiciona css em scss ao header) --- .../src/arquivos/sass/partials/_header.scss | 158 ++++++++++++++++-- 1 file changed, 147 insertions(+), 11 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..29f8467 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,36 +1,172 @@ -/* _header.scss */ .headerCheckout { .container { width: auto !important; } &__wrapper { - align-items: center; display: flex; - justify-content: space-between; + align-items: center; + justify-content: space-around; + padding: 16px; + border-bottom: 1px solid $black; + + @media (min-width: 1025px) { + padding: 33.5px 0; + } + + @media (min-width: 2500px) { + padding: 33.5px 0; + } + } + .progress-bar { + display: flex; + flex-direction: column; + right: 31.5%; + top: 33%; + @media (max-width: 1024px) { + display: none; + } + @media (min-width: 2500px) { + right: 41%; + } + + .containerLi { + display: flex; + position: relative; + align-items: center; + } + ul { + display: flex; + margin: 0; + gap: 100px; + list-style: none; + } + + p { + margin-bottom: 0; + } + + &-text { + font-family: $font-family-secundary; + font-weight: 400; + font-size: 12px; + line-height: 14px; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + + &-line-1, + &-line-2 { + position: absolute; + width: 171px; + top: 82%; + left: 55%; + border: 1px solid $black; + z-index: 0; + + @media (min-width: 2500px) { + width: 240px; + top: 79%; + left: 55%; + } + } + + &-line-2 { + width: 166px; + left: -223%; + + @media (min-width: 2500px) { + width: 230px; + left: -143%; + } + } + + &-circle-1, + &-circle-2, + &-circle-3 { + display: flex; + height: 10px; + width: 10px; + align-self: center; + background: $white; + border: 1px solid $black; + border-radius: 50%; + margin-left: 40%; + margin-top: 9px; + padding: 0; + + @media (min-width: 2500px) { + height: 22px; + width: 22px; + } + } + + .active { + background: $black; + } } &__logo { - img { - height: 52px; - width: auto; + width: 45.35%; + + @media (min-width: 1025px) { + width: 17.059%; + } + + @media (min-width: 1025px) { + width: 15.28%; + + img { + width: 100%; + } + } + @media (min-width: 2500px) { + width: 19.22%; } } &__safeBuy { + justify-content: flex-end; + display: flex; + align-items: center; + + @media (min-width: 1025px) { + width: 15.5%; + } + + @media (min-width: 2500px) { + width: 20%; + } + span { - align-items: center; - display: flex; + min-width: fit-content; + height: 50%; text-transform: uppercase; font-family: $font-family; font-style: normal; font-weight: normal; font-size: 12px; - line-height: 14px; + line-height: 16px; color: $color-gray; + margin-left: 8px; + + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } - i { - margin-right: 8px; + img { + width: 4.5%; + min-width: 12px; + + @media (min-width: 2500px) { + width: 6.1%; + } } } }