From a95858376c95058dd575f011f7b1a47bd66913ee Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Mon, 12 Dec 2022 10:31:58 -0300 Subject: [PATCH 01/13] feat(checkout): Cria barra de progresso desktop e 4k --- checkout/src/arquivos/js/components/Header.js | 49 ++++++- .../src/arquivos/sass/checkout/_checkout.scss | 2 +- .../src/arquivos/sass/partials/_header.scss | 134 +++++++++++++++++- .../src/arquivos/sass/utils/_variaveis.scss | 27 ++-- 4 files changed, 192 insertions(+), 20 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..51d65fe 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,51 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + this.progressBarContent(); } 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"); + } + + progressBarContent() { + // console.log(this.progressBar.innerHTML); + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` + + `; + } + + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ``; + } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..093b6c0 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -13,7 +13,7 @@ footer .footerCheckout__wrapper { margin: auto auto 0 auto; } footer .footerCheckout__prateleira, -header { +header .container { width: 79.53125%; margin: 0 auto; } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..d26ec35 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -7,16 +7,125 @@ align-items: center; display: flex; justify-content: space-between; + padding: 29px 131px; + border-bottom: 1px solid $color-black2; + + @include mq(pg, max) { + padding: 16px; + } + + @include mq(xxl, min) { + padding: 29px 256px; + } + } + + #progressBar { + width: 439px; + + @include mq(xxl, min) { + width: 1078.86px; + } + } + + #progressBar ul { + display: flex; + justify-content: space-between; + list-style-type: none; + margin: 0; + } + + #progressBar li .containerProgressBar { + display: flex; + width: 100%; + flex-direction: column; + align-items: flex-start; + justify-content: center; + position: relative; + font-family: "Tenor Sans", sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 14px; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 28px; + } + } + + #progressBar li.center-li { + width: auto; + } + + .containerProgressBar .progress-bar-first-line, + .progress-bar-second-line { + width: 181px; + bottom: 5px; + border: 1px solid $color-black2; + position: absolute; + margin: 0; + + @include mq(xxl, min) { + width: 444px; + bottom: 10px; + } + } + + .progress-bar-first-line { + left: 60%; + // transform: translate(-50%); + } + + .progress-bar-second-line { + right: 40%; + z-index: -1; + + @include mq(xxl, min) { + right: 58%; + } + // transform: translate(-50%); + } + + .containerProgressBar .progress-bar-first-circle, + .progress-bar-second-circle, + .progress-bar-third-circle { + margin: 0 auto; + width: 12px; + height: 12px; + margin-top: 9px; + border: 1px solid $color-black2; + border-radius: 50%; + background: $color-white; + + @include mq(xxl, min) { + width: 24px; + height: 24px; + } } &__logo { img { height: 52px; width: auto; + cursor: pointer; + + @include mq(pg, max) { + height: 32.12px; + width: 155px; + } + + @include mq(cstm, max) { + height: 33px; + width: 155px; + } + + @include mq(xxl, min) { + height: 91.2px; + } } } &__safeBuy { + display: flex; span { align-items: center; display: flex; @@ -27,10 +136,33 @@ font-size: 12px; line-height: 14px; color: $color-gray; + + @include mq(pg, max) { + line-height: 16px; + color: $color-black; + } + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + color: $color-black; + } } - i { + img { margin-right: 8px; + max-width: 12px; + height: 15px; + + @include mq(pg, max) { + height: 13.33px; + } + + @include mq(xxl, min) { + margin-right: 7.9px; + height: 41.46px; + max-width: 29.47px; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..f03a179 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -2,10 +2,11 @@ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); $font-family: "Open Sans", sans-serif; -$font-family-secundary:"Tenor Sans", sans-serif; +$font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; +$color-black2: #000000; $color-white: #fff; @@ -21,18 +22,20 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + pg: 1025px, + xl: 1200px, + xxl: 2500px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default; -- 2.34.1 From eab225d5293a38722a60f15319d21e46c225ac23 Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Mon, 12 Dec 2022 14:48:20 -0300 Subject: [PATCH 02/13] =?UTF-8?q?feat(checkout):=20Adiciona=20intera=C3=A7?= =?UTF-8?q?=C3=A3o=20de=20mudan=C3=A7a=20de=20acordo=20com=20a=20p=C3=A1gi?= =?UTF-8?q?na/em=20caso=20de=20reload=20nas=20dots=20da=20barra=20de=20pro?= =?UTF-8?q?gresso?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Header.js | 199 ++++++++++++++++++ .../src/arquivos/sass/partials/_header.scss | 17 +- 2 files changed, 215 insertions(+), 1 deletion(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 51d65fe..c2dd6bd 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -9,6 +9,7 @@ export default class Header { async init() { await this.selectors(); this.progressBarContent(); + await this.progressBarDot(); } async selectors() { @@ -55,4 +56,202 @@ export default class Header { this.progressBar.innerHTML = ``; } } + + async progressBarDot() { + if (this.progressBar && window.innerWidth > 1024) { + const progressList = document.querySelectorAll("#progressBar ul li"); + progressList.forEach((li) => { + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + if (li.children[0].children[0].children["progress-bar-first-circle"]) { + li.children[0].children[0].children[ + "progress-bar-first-circle" + ].classList.add("active"); + } + if (li.children[0].children[0].children["progress-bar-second-circle"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-second-circle" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-second-circle" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-third-circle"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-third-circle" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-third-circle" + ].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-first-circle"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-first-circle" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-first-circle" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-second-circle"]) { + li.children[0].children[0].children[ + "progress-bar-second-circle" + ].classList.add("active"); + } + if (li.children[0].children[0].children["progress-bar-third-circle"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-third-circle" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-third-circle" + ].classList.remove("active"); + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" + ) { + if (li.children[0].children[0].children["progress-bar-first-circle"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-first-circle" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-first-circle" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-second-circle"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-second-circle" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-second-circle" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-third-circle"]) { + li.children[0].children[0].children[ + "progress-bar-third-circle" + ].classList.add("active"); + } + } + + this.progressBarWhenHashChange(); + }); + } + } + + progressBarWhenHashChange() { + const progressList = document.querySelectorAll("#progressBar ul li"); + progressList.forEach((li) => { + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + if (li.children[0].children[0].children["progress-bar-first-circle"]) { + li.children[0].children[0].children[ + "progress-bar-first-circle" + ].classList.add("active"); + } + if (li.children[0].children[0].children["progress-bar-second-circle"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-second-circle" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-second-circle" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-third-circle"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-third-circle" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-third-circle" + ].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-first-circle"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-first-circle" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-first-circle" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-second-circle"]) { + li.children[0].children[0].children[ + "progress-bar-second-circle" + ].classList.add("active"); + } + if (li.children[0].children[0].children["progress-bar-third-circle"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-third-circle" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-third-circle" + ].classList.remove("active"); + } + } + } else if (window.location.hash == "#/payment") { + if (li.children[0].children[0].children["progress-bar-first-circle"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-first-circle" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-first-circle" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-second-circle"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-second-circle" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-second-circle" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-third-circle"]) { + li.children[0].children[0].children[ + "progress-bar-third-circle" + ].classList.add("active"); + } + } + }); + }); + } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index d26ec35..e73608d 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -94,7 +94,6 @@ margin-top: 9px; border: 1px solid $color-black2; border-radius: 50%; - background: $color-white; @include mq(xxl, min) { width: 24px; @@ -102,6 +101,18 @@ } } + .containerProgressBar .progress-bar-first-circle { + background: $color-white; + } + + .containerProgressBar .progress-bar-second-circle { + background: $color-white; + } + + .containerProgressBar .progress-bar-third-circle { + background: $color-white; + } + &__logo { img { height: 52px; @@ -165,4 +176,8 @@ } } } + + .active { + background: $color-black2 !important; + } } -- 2.34.1 From 44053428023b6d29f48c681c844cf3b6cfeddf1a Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Wed, 14 Dec 2022 16:53:47 -0300 Subject: [PATCH 03/13] feat(checkout): Cria footer mobile e desktop --- checkout/src/arquivos/js/components/Footer.js | 42 +++++ .../src/arquivos/sass/checkout/_checkout.scss | 2 +- .../src/arquivos/sass/partials/_footer.scss | 166 ++++++++++++++++-- .../src/arquivos/sass/partials/_header.scss | 15 +- .../src/arquivos/sass/utils/_variaveis.scss | 2 + 5 files changed, 205 insertions(+), 22 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..e5d16cb 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,12 +7,15 @@ export default class Footer { async init() { await this.selectors(); + this.footerIcons(); // this.onUpdate(); } async selectors() { //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.CredicardIcon = await waitElement(".footerCheckout__payments"); + this.vtexPciIcon = await waitElement(".footerCheckout__vtexpci"); this.checkoutVazio = await waitElement(".empty-cart-content"); } @@ -30,6 +33,7 @@ export default class Footer { observer.observe(target, config); } + async addCarrossel() { const elemento = await waitElement("#my-element"); $(elemento).slick({ @@ -37,4 +41,42 @@ export default class Footer { slidesToScroll: 1, }); } + + footerIcons() { + if (this.CredicardIcon) { + this.CredicardIcon.innerHTML = ` +
MasterCard
+
Visa
+
American Express
+
Elo
+
HiperCard
+
Paypal
+
Boleto
+ `; + } + + if (this.vtexPciIcon) { + this.vtexPciIcon.innerHTML = ` +
VTEX PCI Certified
+ `; + } + + const footerDevelopedBy = document.getElementsByClassName("footerCheckout__developedBy"); + + if (footerDevelopedBy) { + const vtexIcon = footerDevelopedBy[0].children[0].children[0]; + const m3Icon = footerDevelopedBy[0].children[1].children[0]; + + vtexIcon.innerHTML = ` + Powered By +
VTEX
+ `; + + m3Icon.innerHTML = ` + Developed By +
M3
+ `; + console.log(m3Icon); + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 093b6c0..00466a1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,7 +9,7 @@ html { } footer .footerCheckout__wrapper { - 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 c7c65c2..66b34f5 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -3,13 +3,82 @@ border-top: none; color: $color-gray2; + .container { + width: 94.9734%; + display: flex; + align-items: center; + justify-content: center; + padding: 27px 0 24px; + margin: 0; + + @include mq(pg, max) { + align-items: flex-start; + flex-direction: column; + padding: 16px 8px !important; + } + + @include mq(csun, max) { + padding: 16px 0 8px 8px !important; + } + } + &__wrapper { align-items: center; display: flex; + flex-direction: column; justify-content: space-between; + border-top: 1px solid $color-black2; + + @include mq(pg, max) { + align-items: flex-start; + } + } + + &__payments { + display: flex; + + img { + height: 20px; + margin: 0; + margin-right: 13.35px; + max-width: fit-content; + + @include mq(sm, max) { + margin-right: 5.22px; + } + + @include mq(csun, max) { + margin-right: 0; + } + + @include mq(xxl, min) { + height: 39.06px; + } + } + + figure { + margin: 0; + } + } + + &__vtexpci { + img { + height: 33px; + margin: 0; + max-width: fit-content; + } + + ul { + padding: 189px; + } + + figure { + margin: 0; + } } &__address { + width: 33.33%; color: $color-gray2; font-family: $font-family; font-style: normal; @@ -19,37 +88,76 @@ text-transform: capitalize; max-width: 40%; - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; + @include mq(pg, max) { + order: 2; + margin: 8px 0 8px; + line-height: 14px; + white-space: nowrap; + color: $color-black; + } + + // @include mq(md, max) { + // margin-bottom: 24px; + // max-width: 100%; + // } + + @include mq(xxl, min) { + font-size: 20px; + line-height: 27px; + text-transform: capitalize; + color: $color-black; } } &__stamps { + width: 33.33%; align-items: center; display: flex; - justify-self: center; + justify-content: center; list-style: none; + margin: 0; - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; + @include mq(csyn, max) { + flex-wrap: wrap; } + @include mq(pg, max) { + order: 1; + margin-bottom: 8px; + justify-content: flex-start; + } + + // @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; + + @include mq(cstm, max) { + margin: 0 10px 0 0; + } } } &__developedBy { + width: 33.33%; align-items: center; display: flex; list-style-type: none; margin: 0; + justify-content: flex-end; + + @include mq(pg, max) { + order: 3; + justify-content: flex-start; + margin-top: 8px; + } li:last-child { margin-left: 16px; @@ -57,17 +165,45 @@ 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; + color: $color-gray2; + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 10px; + line-height: 12px; + margin-right: 10.12px; + + @include mq(pg, max) { + font-size: 9px; + line-height: 12px; + white-space: nowrap; + color: $color-black; + } + + @include mq(xxl, min) { + font-size: 18px; + line-height: 25px; + color: $color-black; + } + } + + figure { + margin: 0; + + @include mq(pg, max) { + width: max-content; + } + } + + img { + height: 16px; + + @include mq(xxl, min) { + height: 31.25px; + } } } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index e73608d..ef06ada 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,14 +1,17 @@ /* _header.scss */ .headerCheckout { - .container { - width: auto !important; - } + width: 100%; + border-bottom: 1px solid #000; + + // .container { + // width: auto !important; + // } &__wrapper { align-items: center; display: flex; justify-content: space-between; - padding: 29px 131px; - border-bottom: 1px solid $color-black2; + padding: 29px 0; + // border-bottom: 1px solid $color-black2; @include mq(pg, max) { padding: 16px; @@ -115,7 +118,7 @@ &__logo { img { - height: 52px; + height: 37.14px; width: auto; cursor: pointer; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f03a179..056652e 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -23,6 +23,8 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, + csun: 285, + csyn: 355, cstm: 400, sm: 576px, md: 768px, -- 2.34.1 From 1067e397ba2f62fcb370a350a9cd00335fb1a1df Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Wed, 14 Dec 2022 17:37:18 -0300 Subject: [PATCH 04/13] =?UTF-8?q?fix(header):=20Conserta=20prolemas=20de?= =?UTF-8?q?=20espa=C3=A7amento=20e=20desfoque=20da=20logo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/arquivos/sass/partials/_header.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index ef06ada..c47a832 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -3,22 +3,24 @@ width: 100%; border-bottom: 1px solid #000; - // .container { - // width: auto !important; - // } + .container { + @include mq(pg, max) { + width: 100%; + } + } + &__wrapper { align-items: center; display: flex; justify-content: space-between; padding: 29px 0; - // border-bottom: 1px solid $color-black2; @include mq(pg, max) { padding: 16px; } @include mq(xxl, min) { - padding: 29px 256px; + padding: 29px 0; } } @@ -75,7 +77,6 @@ .progress-bar-first-line { left: 60%; - // transform: translate(-50%); } .progress-bar-second-line { @@ -85,7 +86,6 @@ @include mq(xxl, min) { right: 58%; } - // transform: translate(-50%); } .containerProgressBar .progress-bar-first-circle, @@ -124,12 +124,11 @@ @include mq(pg, max) { height: 32.12px; - width: 155px; + max-width: fit-content; } @include mq(cstm, max) { height: 33px; - width: 155px; } @include mq(xxl, min) { @@ -154,6 +153,7 @@ @include mq(pg, max) { line-height: 16px; color: $color-black; + white-space: nowrap; } @include mq(xxl, min) { -- 2.34.1 From 9f062fbc7b487c26afc2dfcd47887843befc9ff1 Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Fri, 16 Dec 2022 11:25:46 -0300 Subject: [PATCH 05/13] feat(checkout): Cria prateleira --- checkout/src/arquivos/js/components/Footer.js | 75 ++++++++++++++++++- .../src/arquivos/sass/partials/_footer.scss | 28 +++++++ 2 files changed, 99 insertions(+), 4 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index e5d16cb..f385334 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -6,9 +6,16 @@ export default class Footer { } async init() { + this.list = await this.apiRequest(); await this.selectors(); this.footerIcons(); - // this.onUpdate(); + this.onUpdate(); + this.createContainerShelf(); + this.shelfItem = await waitElement(".footerCheckout__shelfList"); + await this.createShelf(); + await this.addCarrossel(); + console.log(this.list); + // await this.createShelf(); } async selectors() { @@ -16,6 +23,7 @@ export default class Footer { // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement this.CredicardIcon = await waitElement(".footerCheckout__payments"); this.vtexPciIcon = await waitElement(".footerCheckout__vtexpci"); + this.shelf = await waitElement(".footerCheckout__prateleira"); this.checkoutVazio = await waitElement(".empty-cart-content"); } @@ -27,18 +35,77 @@ export default class Footer { let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { - console.log(mutation.type); + // console.log(mutation.type); + if ( + target.attributes.style.nodeValue == "display: none;" && + window.location.hash == "#/cart" + ) { + // const shelf = document.querySelector(".footerCheckout__prateleira"); + // this.createShelf(); + // console.log("Olá eu sou uma prateleira"); + } else { + console.log("Fui embora :(!"); + } }); }); observer.observe(target, config); } + createContainerShelf() { + if (this.shelf) { + this.shelf.innerHTML = ` +
+

Você também pode gostar:

+
+
    + `; + } + } + + async createShelf() { + let structure = ""; + + this.list.forEach((resp) => { + const sku = resp.skus.map((item) => `
  • ${item}
    • `); + + structure += ` +
  • +
    +
    ${resp.name}
    +
      ${sku}
    + +
    • + `; + }); + + this.shelfItem.innerHTML = structure; + console.log("ioaioaioiaoioa"); + } + + async apiRequest() { + const api = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + return fetch(api) + .then((response) => response.json()) + .then((data) => { + const objInfo = data.map((res) => ({ + img: res.items[0].images[0].imageUrl, + name: res.productName, + skus: res.items.map((item) => item.name), + link: res.link, + })); + return objInfo; + }); + } + async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".footerCheckout__shelfList"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, + infinite: false, + arrows: true, }); } @@ -62,6 +129,7 @@ export default class Footer { } const footerDevelopedBy = document.getElementsByClassName("footerCheckout__developedBy"); + // console.log(footerDevelopedBy); if (footerDevelopedBy) { const vtexIcon = footerDevelopedBy[0].children[0].children[0]; @@ -76,7 +144,6 @@ export default class Footer { Developed By
    M3
    `; - console.log(m3Icon); } } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 66b34f5..f43fedd 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -3,6 +3,24 @@ border-top: none; color: $color-gray2; + &__prateleira { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + &__prateleira-title { + h2 { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-black2; + } + } + .container { width: 94.9734%; display: flex; @@ -208,3 +226,13 @@ } } } + +.slick-slide { + &__shelf-card { + height: 390px; + } + + ul { + list-style-type: none; + } +} -- 2.34.1 From b263b8986d20f9bc662a9a1637a203a348995fd4 Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Sat, 17 Dec 2022 12:29:27 -0300 Subject: [PATCH 06/13] feat(slick): Torna slick responsivo mobile e desktop --- checkout/src/arquivos/js/components/Footer.js | 72 ++++++-- checkout/src/arquivos/sass/lib/_slick.scss | 35 +++- .../src/arquivos/sass/partials/_footer.scss | 160 +++++++++++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 2 + 4 files changed, 227 insertions(+), 42 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index f385334..6efba39 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -10,12 +10,16 @@ export default class Footer { await this.selectors(); this.footerIcons(); this.onUpdate(); - this.createContainerShelf(); + if (window.location.hash === "#/cart") { + await this.createContainerShelf(); + } + if (window.location.hash !== "#/cart") { + await this.removeShelf(); + } this.shelfItem = await waitElement(".footerCheckout__shelfList"); await this.createShelf(); - await this.addCarrossel(); + this.addCarrossel(); console.log(this.list); - // await this.createShelf(); } async selectors() { @@ -35,16 +39,15 @@ export default class Footer { let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { - // console.log(mutation.type); - if ( - target.attributes.style.nodeValue == "display: none;" && - window.location.hash == "#/cart" - ) { - // const shelf = document.querySelector(".footerCheckout__prateleira"); - // this.createShelf(); - // console.log("Olá eu sou uma prateleira"); + console.log(mutation.type); + console.log(mutation); + + const footer = document.querySelector(".footerCheckout"); + console.log(footer); + if (target.attributes.style.nodeValue == "display: none;") { + footer.children[0].classList.remove("ativado"); } else { - console.log("Fui embora :(!"); + footer.children[0].classList.add("ativado"); } }); }); @@ -52,17 +55,25 @@ export default class Footer { observer.observe(target, config); } - createContainerShelf() { + async createContainerShelf() { if (this.shelf) { this.shelf.innerHTML = `

    Você também pode gostar:

    +
      + `; } } + async removeShelf() { + if (this.shelf) { + this.shelf.innerHTML = ""; + } + } + async createShelf() { let structure = ""; @@ -74,13 +85,13 @@ export default class Footer {
      ${resp.name}
        ${sku}
      - + `; }); this.shelfItem.innerHTML = structure; - console.log("ioaioaioiaoioa"); + // console.log("ioaioaioiaoioa"); } async apiRequest() { @@ -106,6 +117,37 @@ export default class Footer { slidesToScroll: 1, infinite: false, arrows: true, + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + infinite: false, + arrows: true, + }, + }, + + { + breakpoint: 992, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + infinite: false, + arrows: true, + }, + }, + + { + breakpoint: 374, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + infinite: false, + arrows: true, + }, + }, + ], }); } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..c7642e7 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -63,7 +63,10 @@ } .slick-slide { float: left; - height: 100%; + width: 100%; + height: auto; + margin-left: 8px; + margin-right: 8px; min-height: 1px; outline: none; [dir="rtl"] & { @@ -71,6 +74,7 @@ } img { display: block; + width: 100%; } &.slick-loading img { display: none; @@ -99,16 +103,41 @@ .slick-arrow { font-size: 0; position: absolute; + outline: 0; + border: 0; } .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center; z-index: 4; - left: 10px; + bottom: 50%; + left: 20px; + cursor: pointer; + + @include mq(xxl, min) { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") + no-repeat center; + bottom: 50%; + left: -949px; + z-index: 5; + width: 100%; + } } .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; z-index: 4; - right: 10px; + bottom: 50%; + right: 20px; + cursor: pointer; + + @include mq(xxl, min) { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") + no-repeat center; + z-index: 5; + right: -910px; + width: 100%; + } } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index f43fedd..c04edf1 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -3,24 +3,6 @@ border-top: none; color: $color-gray2; - &__prateleira { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - - &__prateleira-title { - h2 { - font-family: $font-family-secundary; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 38px; - color: $color-black2; - } - } - .container { width: 94.9734%; display: flex; @@ -41,6 +23,7 @@ } &__wrapper { + margin-top: 68px !important; align-items: center; display: flex; flex-direction: column; @@ -225,14 +208,143 @@ } } } -} -.slick-slide { - &__shelf-card { - height: 390px; + &__prateleira { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } - ul { - list-style-type: none; + &__prateleira-title { + margin-bottom: 20px; + } + + &__shelfList { + width: 1016px; + + @include mq(pg, max) { + width: 991px; + } + + @include mq(lg, max) { + width: 760px; + } + + @include mq(md, max) { + width: 500px; + } + + @include mq(sm, max) { + width: 344px; + } + + @include mq(csin, max) { + width: 240px; + } + + @include mq(xxl, min) { + width: 1994.07px; + } + + ul { + display: flex; + justify-content: center; + margin: 0; + margin: 0 0 20px; + list-style-type: none; + // font-size: 0; + #text { + font-size: 0; + } + + li { + background: $color-blue2; + border-radius: 8px; + padding: 5px; + color: $color-white; + font-weight: 700; + font-size: 13px; + line-height: 18px; + font-family: $font-family; + text-transform: uppercase; + + @include mq(xxl, min) { + font-size: 26px; + line-height: 35px; + } + } + } + + figure { + margin: 0; + } + + figcaption { + margin: 20px 0; + font-weight: 400; + font-size: 13px; + line-height: 18px; + text-align: center; + color: $color-black2; + font-family: $font-family; + + @include mq(xxl, min) { + font-weight: 400; + font-size: 26px; + line-height: 35px; + } + } + + .button-list { + width: 100%; + padding: 12px 72px; + border-radius: 8px; + background: $color-blue2; + outline: 0; + border: 0; + + a { + color: $color-white; + text-transform: uppercase; + font-weight: 700; + font-size: 13px; + line-height: 18px; + white-space: nowrap; + font-family: $font-family; + + @include mq(xxl, min) { + font-size: 26px; + line-height: 35px; + } + } + } + + button { + display: flex; + justify-content: center; + margin: 0; + } + } + + &__prateleira-title { + h2 { + font-family: $font-family-secundary; + font-style: normal; + text-align: center; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-black2; + + @include mq(xxl, min) { + font-size: 48px; + line-height: 76px; + } + } + } + + .ativado { + display: none !important; } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 056652e..0f0de87 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -17,6 +17,7 @@ $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-blue: #4267b2; +$color-blue2: #00c8ff; $color-green: #4caf50; @@ -25,6 +26,7 @@ $grid-breakpoints: ( xs: 0, csun: 285, csyn: 355, + csin: 370, cstm: 400, sm: 576px, md: 768px, -- 2.34.1 From 945567bc60d85ee9ca11f7095faf044eeb533c0f Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Sat, 17 Dec 2022 13:11:10 -0300 Subject: [PATCH 07/13] feat(checkout-vazio): Adapta layout do checkout vazio ao layout do figma --- .../sass/checkout/_checkout-vazio.scss | 86 ++++++++++++------- 1 file changed, 54 insertions(+), 32 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..7d1e57f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,38 +1,60 @@ .empty-cart { - font-family: $font-family; - &-content { - color: $color-black; - text-align: center; + font-family: $font-family; + &-content { + color: $color-black; + text-align: center; - @include mq(md, max) { - padding: 0 16px; - } - } + @include mq(md, max) { + padding: 0 16px; + } + } - &-title { - font-size: 20px; - } + &-title { + font-size: 0px; - &-links { - .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; - transition: ease-in 0.22s all; - outline: none; - font-family: $font-family; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - text-align: center; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; + &::after { + content: "Seu Carrinho está vazio."; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + color: $color-black2; + } + } - &:hover { - background: lighten($color-black, 5); - } - } - } + &-links { + .link-choose-products { + background: $color-white; + border: 1px solid $color-black; + border-radius: 0; + transition: ease-in 0.22s all; + outline: none; + padding: 16px 64px; + font-size: 0; + color: $color-black; + cursor: pointer; + + &::after { + content: "Continuar comprando"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + transition: ease-in 0.22s all; + } + + &:hover { + background: lighten($color-black, 5); + color: $color-white; + } + } + } + + &-message { + display: none; + } } -- 2.34.1 From 95120d918808e8bf3af506c0acb71aa57bd2e8df Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Sat, 17 Dec 2022 15:23:19 -0300 Subject: [PATCH 08/13] =?UTF-8?q?feat(checkout-carrinho):=20Adapta=20p?= =?UTF-8?q?=C3=A1gina=20do=20carrinho=20para=20o=20layout=20do=20figma?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sass/checkout/_checkout-carrinho.scss | 185 ++++++++++++------ .../src/arquivos/sass/utils/_variaveis.scss | 2 + 2 files changed, 131 insertions(+), 56 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..0b324ae 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -13,7 +13,7 @@ display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px; @@ -114,10 +114,32 @@ color: $color-black; padding: 0 0 16px; font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; + &.shipping-date { + font-size: 0; + + &::after { + content: "Frete"; + font-weight: 400; + font-family: $font-family-secundary; + font-size: 14px; + line-height: 16px; + } + } + + &.product-price { + &::after { + content: "Unidade"; + font-weight: 400; + font-family: $font-family-secundary; + font-size: 14px; + line-height: 16px; + } + } + @include mq(md, max) { &.quantity-price, &.shipping-date { @@ -155,7 +177,7 @@ } a { - color: $color-blue; + color: $color-black2; font-style: normal; font-weight: normal; font-size: 12px; @@ -163,7 +185,7 @@ transition: ease-in 0.22s all; &:hover { - color: darken($color-blue, 10); + color: darken($color-black, 10); text-decoration: none; } @@ -179,7 +201,7 @@ } td.shipping-date { - color: $color-gray2; + color: $color-gray6; font-size: 12px; line-height: 14px; @@ -190,6 +212,8 @@ .product-price { min-width: 100px; + font-size: 0; + @include mq(md, max) { min-width: 78px; } @@ -200,25 +224,34 @@ } span.list-price { - color: $color-gray2; + color: $color-gray6; font-size: 12px; line-height: 14px; text-decoration-line: line-through; + @include mq(sm, max) { font-size: 12px; line-height: 14px; } + .muted { + color: $color-gray6; + } + .old-product-price-label { text-transform: lowercase; } + + .new-product-price-label { + color: $color-black; + } } } td.quantity { align-items: center; border: 1px solid $color-gray3; - border-radius: 0; + border-radius: 8px; box-sizing: border-box; display: flex; justify-content: center; @@ -236,7 +269,7 @@ background-color: $color-white; border: 1px solid $color-gray3; border-radius: 0; - border-width: 0 1px; + border-width: 0; display: block; max-height: 38px; margin: 0 !important; @@ -253,26 +286,26 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $color-blue2; display: block; font-weight: 500; padding: 1px 12px; } } - .icon-minus-sign { - &:before { - content: "-"; - font-size: 16px; - } - } + // .icon-minus-sign { + // // &:before { + // // content: "-"; + // // font-size: 16px; + // // } + // } - .icon-plus-sign { - &:before { - content: "+"; - font-size: 14px; - } - } + // .icon-plus-sign { + // &:before { + // content: "+"; + // font-size: 14px; + // } + // } .item-quantity-change { @media (max-width: 979px) and (min-width: 768px) { @@ -302,6 +335,12 @@ line-height: 16px; color: $color-black; } + + .total-selling-price { + &.total-selling-price { + font-weight: 700; + } + } } .quantity-price { @@ -355,8 +394,9 @@ font-style: normal; font-weight: normal; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + font-family: $font-family; + color: $color-black2; @include mq(md, max) { margin-top: 0; @@ -365,7 +405,8 @@ .srp-description { color: $color-gray2; - font-size: 12px; + font-size: 14px; + font-weight: 400; line-height: 18px; margin: 0 0 12px; } @@ -373,9 +414,9 @@ button.shp-open-options { background-color: $color-gray5; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; + border-radius: 8px; + color: $color-black2; + font-size: 14px; letter-spacing: 0.05em; line-height: 19px; font-weight: 500; @@ -405,18 +446,22 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; + cursor: pointer; + padding: 12px 36px; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; + white-space: nowrap; + text-transform: uppercase; &:hover { background-color: lighten($color-black, 5); @@ -444,12 +489,12 @@ } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black2; border-radius: 100px; } .blue { - color: $color-blue; + color: $color-black2; } label { @@ -462,6 +507,25 @@ } .srp-postal-code { + .ship-country { + label { + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $color-black2; + margin-bottom: 12px; + } + + select { + border: 1px solid $color-gray7; + border-radius: 5px; + box-shadow: none; + color: $color-black2; + } + } + .ship-postalCode { label { font-family: $font-family; @@ -469,15 +533,15 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-black; + color: $color-black2; margin-bottom: 12px; } input { - border: 1px solid $color-gray3; + border: 1px solid $color-gray7; border-radius: 5px; box-shadow: none; - color: $color-gray3; + color: $color-black2; font-size: 12px; height: 36px; padding: 12px 8px; @@ -485,11 +549,14 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue2; border: none; border-radius: 5px; color: $color-white; - font-size: 12px; + font-style: normal; + font-size: 14px; + font-weight: 700; + line-height: 19px; height: 36px; letter-spacing: 1px; outline: none; @@ -501,22 +568,28 @@ text-transform: uppercase; &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue, 5); } } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; - margin-top: 7px; + font-size: 0; + &::after { + content: "Não sei meu código postal"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: normal; + font-size: 10px; + line-height: 12px; + color: $color-black2; + margin-top: 7px; + text-decoration-line: underline; + cursor: pointer; + } } span.help.error { @@ -525,7 +598,7 @@ position: absolute; left: 0; width: 100%; - top: 17px; + top: 5px; } } } @@ -608,7 +681,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black2; text-decoration: none; } } @@ -734,7 +807,7 @@ td.info, td.monetary { font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; line-height: 21px; color: $color-black; @@ -776,31 +849,31 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black2; } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; display: block; font-size: 0; transition: ease-in 0.22s all; padding: 12px 19px; &:hover { - background-color: darken($color-green, 5); + background-color: darken($color-blue, 5); } &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; + font-weight: 700; font-size: 13px; letter-spacing: 0.05em; - color: $color-white; + color: $color-black2; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 0f0de87..1aa5f0c 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -15,6 +15,8 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #989898; +$color-gray7: #c4c4c4; $color-blue: #4267b2; $color-blue2: #00c8ff; -- 2.34.1 From 0c0bfea0ae32506b3a13069bd69f61e8f4b58920 Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Sat, 17 Dec 2022 16:54:05 -0300 Subject: [PATCH 09/13] feat(checkout-email): Adapta tela de cadastro de email para o layout figma --- .../sass/checkout/_checkout-autenticacao.scss | 510 ++++++++++-------- .../src/arquivos/sass/utils/_variaveis.scss | 2 + 2 files changed, 275 insertions(+), 237 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..0743781 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,325 @@ .checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; + .client-pre-email { + border-color: $color-gray4; + font-family: $font-family; + padding-top: 8px; + border-top: 1px solid $color-black2; - .link-cart { - a { - color: $color-black; - font-size: 14px; + .link-cart { + a { + color: $color-black2; + font-family: $font-family-secundary; + font-size: 14px; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; - &:hover { - color: lighen($color-black, 10); - } - } - } + &:hover { + color: lighen($color-black, 10); + } + } + } - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; - h3 { - margin-bottom: 16px; + h3 { + margin-bottom: 16px; - span { - color: #303030; - font-size: 24px; - } + span { + font-family: $font-family-secundary; + color: $color-black2; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + } - small { - color: $color-gray4; - } - } - } + small { + font-family: $font-family-secundary; + color: $color-black2; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + } + } + } - .client-email { - margin: 0 0 16px; + .client-email { + margin: 0 0 16px; - input { - box-shadow: none; - color: $color-black; - font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; - box-sizing: border-box; - border-radius: 5px; + input { + box-shadow: none; + font-weight: 400; + font-size: 12px; + line-height: 16px; + font-family: $font-family; + padding: 0 16px; + height: 52px; + box-sizing: border-box; + border: 1px solid $color-black2; + border-radius: 5px 8px 8px 5px; - @media (max-width: 490px) { - width: auto; - } - } + &::-webkit-input-placeholder { + color: $color-black2 !important; + } - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; + @media (max-width: 490px) { + width: auto; + } + } - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + button { + background-color: $color-blue2; + border-radius: 0px 8px 8px 0px; + border: none; + font-family: $font-family; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: $color-black2; + padding: 12.46px 14.41px; + height: 52px; + right: 0; + top: 0; + cursor: pointer; - span.help.error { - color: red; - } - } + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + span.help.error { + color: $color-red; + font-weight: 700; + font-size: 12px; + line-height: 16px; + } + } - h3 { - color: #303030; - margin: 0 0 8px 0; - } + .emailInfo { + padding: 16px; + background-color: $color-white; + border: 1px solid $color-black2; + border-radius: 5px; - ul { - margin: 0; + h3 { + font-family: $font-family; + color: $color-black2; + font-weight: 700; + font-size: 12px; + line-height: 16px; + margin: 0 0 8px 0; + } - li { - span { - color: $color-black; - } + ul { + margin: 0; - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } + li { + span { + font-family: $color-black2; + color: $color-black2; + font-weight: 700; + font-size: 12px; + line-height: 16px; + } - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } + i::before { + color: $color-blue2; + font-size: 1rem; + opacity: 1; + } + } + } - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; + i::before { + color: $color-black; + font-size: 6rem; + opacity: 0.5; + } + } + } - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + .shipping-data, + .payment-data, + .client-profile-data { + .accordion-group { + border-radius: 0; + border: 1px solid $color-gray4; + font-family: $font-family; + padding: 16px; - i::before { - fill: #303030; - } - } + .accordion-heading { + span { + color: #303030; + margin-bottom: 8px; + padding: 0; - a { - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } + i::before { + fill: #303030; + } + } - .accordion-inner { - padding: 0; + a { + align-items: center; + background-color: #303030; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + } + } - /* General configurations */ + .accordion-inner { + padding: 0; - .client-notice { - color: $color-black; - } + /* General configurations */ - p { - label { - color: $color-black; - font-weight: 500; - } + .client-notice { + color: $color-black; + } - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } + p { + label { + color: $color-black; + font-weight: 500; + } - .help.error { - color: red; - } - } + select, + input { + border-radius: 0; + border: 1px solid $color-gray4; + box-shadow: none; + } - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } + .help.error { + color: red; + } + } - .state-inscription-box span { - font-weight: 500; - } + .box-client-info-pj { + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-black; + font-weight: 500; + text-decoration: underline; + } + } - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; + .state-inscription-box span { + font-weight: 500; + } - &:hover { - background: lighten($color-black, 5); - } + button.submit { + border: none; + border-radius: 5px; + background: $color-black; + margin-top: 8px; + outline: none; + transition: all 0.2s linear; - &:active { - background: darken($color-black, 5); - } - } + &:hover { + background: lighten($color-black, 5); + } - /* Shipping configurations */ + &:active { + background: darken($color-black, 5); + } + } - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } + /* Shipping configurations */ - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + .vtex-omnishipping-1-x-deliveryGroup { + p { + color: #303030; + font-size: 14px; + font-weight: 500; + } - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; + .shp-lean { + border: 1px solid $color-gray4; + border-radius: 0; - svg path { - fill: #d8c8ac; - } - } - } - } + label { + background-color: $color-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } + svg path { + fill: #d8c8ac; + } + } + } + } - .shp-summary-group-info { - border-color: $color-gray4; - } + .delivery-address-title { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + .shp-summary-group-info { + border-color: $color-gray4; + } - @include mq(md, max) { - background-position: 8px 9px; - } + .address-summary { + background: none; + border-color: $color-gray4; + border-radius: 0; + color: #303030; + padding: 12px; - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } + @include mq(md, max) { + background-position: 8px 9px; + } - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } + a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + } - .shp-summary-group-price { - padding-right: 16px; - } + .shp-summary-group-price, + .shp-summary-package { + color: $color-gray4; + } - .shp-summary-package { - padding-left: 16px; - } + .shp-summary-group-price { + padding-right: 16px; + } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } + .shp-summary-package { + padding-left: 16px; + } - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + } - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } - } - } + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: #d8c8ac; + border: 1px solid #d8c8ac; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + text-shadow: 1.3px 1px lighten($color-black, 50); + } + } + } + } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 1aa5f0c..f494e92 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -8,6 +8,8 @@ $font-family-secundary: "Tenor Sans", sans-serif; $color-black: #292929; $color-black2: #000000; +$color-red: #ff0000; + $color-white: #fff; $color-gray: #6c6c6c; -- 2.34.1 From 6f1bc31a816a5d161d97b06b522838edf83d9ebf Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Sun, 18 Dec 2022 12:36:33 -0300 Subject: [PATCH 10/13] =?UTF-8?q?feat(autenticacao):=20Adapta=20a=20ultima?= =?UTF-8?q?=20p=C3=A1gina=20de=20pagamento=20para=20o=20layout=20do=20figm?= =?UTF-8?q?a?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sass/checkout/_checkout-autenticacao.scss | 177 +++++++++++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 4 + 2 files changed, 151 insertions(+), 30 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 0743781..093744a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -144,12 +144,29 @@ } } + .client-profile-data { + .accordion-heading { + span { + span { + font-size: 0; + &::before { + content: "Identificação"; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 16px; + line-height: 19px; + } + } + } + } + } + .shipping-data, .payment-data, .client-profile-data { .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid $color-gray3; + border-radius: 8px; font-family: $font-family; padding: 16px; @@ -160,13 +177,19 @@ padding: 0; i::before { + display: none; fill: #303030; } } a { + background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png") + no-repeat center; align-items: center; - background-color: #303030; + width: 30px; + height: 30px; + z-index: 6; + // background-color: #303030; border-radius: 8px; border: none; color: $color-white; @@ -183,27 +206,43 @@ .client-notice { color: $color-black; + font-size: 0; + } + + #is-corporate-client { + font-size: 0; } p { label { - color: $color-black; - font-weight: 500; + font-family: $font-family; + color: $color-gray2; + font-weight: 400; + font-size: 14px; + line-height: 19px; } select, input { - border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid $color-gray8; + border-radius: 5px; + // height: 42px; box-shadow: none; } + #client-phone, + #client-document { + height: 44px; + } + .help.error { color: red; } } .box-client-info-pj { + display: none; + .link a#is-corporate-client, .link a#not-corporate-client { color: $color-black; @@ -218,11 +257,17 @@ button.submit { border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; + border-radius: 8px; + width: 100%; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + background: $color-blue2; + margin-top: 45px; outline: none; transition: all 0.2s linear; + cursor: pointer; &:hover { background: lighten($color-black, 5); @@ -235,22 +280,34 @@ /* Shipping configurations */ + .ship-postalCode { + input { + width: 95% !important; + max-width: 95% !important; + height: 45px; + } + } .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; + color: $color-black; + // display: flex; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; } .vtex-omnishipping-1-x-deliveryGroup { p { - color: #303030; + color: $color-gray2; + font-style: normal; + font-weight: 700; font-size: 14px; - font-weight: 500; + line-height: 19px; } .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-gray8; + border-radius: 8px; label { background-color: $color-white; @@ -259,16 +316,19 @@ padding: 8px 12px; svg path { - fill: #d8c8ac; + // fill: #d8c8ac; + background: #00c8ff; + border-radius: 3px; } } } } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: $color-gray2; } .shp-summary-group-info { @@ -277,9 +337,11 @@ .address-summary { background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; + border-color: $color-gray8; + border-radius: 8px; + font-weight: 400; + font-size: 12px; + line-height: 16px; padding: 12px; @include mq(md, max) { @@ -287,9 +349,59 @@ } a { - color: #303030; - font-weight: 500; - text-decoration: underline; + font-size: 0; + + &::after { + content: "alterar"; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-blue2; + text-decoration: none; + } + } + } + + #payment-group-MercadoPagoPaymentGroup .payment-group-item-text, + #payment-group-bankInvoicePaymentGroup .payment-group-item-text, + #payment-group-creditCardPaymentGroup .payment-group-item-text, + #payment-group-creditCardPaymentGroup .payment-group-item-text, + #payment-group-instantPaymentPaymentGroup[data-name="Pix"] + .payment-group-item-text { + background-image: none; + } + + .payment-group-item { + border: 1px solid $color-black2 !important; + border-radius: 6px; + display: block; + margin-left: 5px; + margin-right: 40px; + margin-top: 12px; + opacity: 0.7; + width: 100%; + padding: 0 18px 0 8px; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + + span { + text-align: center; + color: $color-gray10 !important; + padding-right: 0; + font-family: $font-family; + font-weight: 400; + font-size: 14px; + line-height: 24px; + + &::selection { + color: $color-red2 !important; + } + } + + &:focus { + border-color: $color-red2 !important; } } @@ -311,13 +423,18 @@ color: #303030; } + .vtex-omnishipping-1-x-addressFormPart1 small { + margin: 0; + } + .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; + background-color: $color-white; + border: 1px solid $color-black; } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); + color: $color-black; + // text-shadow: 1.3px 1px lighten($color-black, 50); } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f494e92..065826c 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -9,6 +9,7 @@ $color-black: #292929; $color-black2: #000000; $color-red: #ff0000; +$color-red2: #f15a31; $color-white: #fff; @@ -19,6 +20,9 @@ $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #989898; $color-gray7: #c4c4c4; +$color-gray8: #e0e0e0; +$color-gray9: #808080; +$color-gray10: #58595b; $color-blue: #4267b2; $color-blue2: #00c8ff; -- 2.34.1 From 2ea4f4e4555e2bc8e4f9521c3161c53454d63293 Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Sun, 18 Dec 2022 13:26:21 -0300 Subject: [PATCH 11/13] fix(cupom-button): Adiciona estilo que ficou faltando no botao de cupom --- .../sass/checkout/_checkout-carrinho.scss | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 0b324ae..e95a08c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -703,6 +703,7 @@ } .coupon-label label { + display: flex; margin-bottom: 12px; font-family: $font-family; font-style: normal; @@ -715,6 +716,7 @@ .coupon-fields { margin-bottom: 32px; + display: flex; @include mq(sm, max) { span { @@ -735,9 +737,9 @@ box-shadow: none; color: $color-gray4; font-size: 12px; - height: 34px; + height: 36px; padding: 0 12px; - max-width: 160px; + max-width: 204.32px; @include mq(sm, max) { max-width: 100%; @@ -746,17 +748,18 @@ } button { - background: $color-black; + background: $color-blue2; border: none; border-radius: 5px; - color: $color-white; - font-size: 12px; + color: $color-black2; + font-weight: 400; + font-size: 14px; + line-height: 19px; height: 36px; letter-spacing: 1px; - margin-left: 6px; + margin-left: 15.17px; outline: none; transition: all 0.2s linear; - width: 94px; text-transform: uppercase; @include mq(md, max) { @@ -764,11 +767,11 @@ } &:hover { - background-color: lighten($color-black, 5); + background-color: lighten($color-blue, 5); } &:active { - background-color: darken($color-black, 5); + background-color: darken($color-blue, 5); } } } -- 2.34.1 From ad6dde538ad5f22bf51e0aa20dde7395e28a0ce0 Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Sun, 18 Dec 2022 15:43:04 -0300 Subject: [PATCH 12/13] feat(checkout): Adiciona responsividade as telas e ao slick --- checkout/src/arquivos/js/components/Footer.js | 2 +- .../sass/checkout/_checkout-carrinho.scss | 76 ++++++++++++++++++- .../src/arquivos/sass/partials/_footer.scss | 2 + 3 files changed, 78 insertions(+), 2 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 6efba39..d786546 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -78,7 +78,7 @@ export default class Footer { let structure = ""; this.list.forEach((resp) => { - const sku = resp.skus.map((item) => `
    • ${item}
      • `); + const sku = resp.skus.map((item) => `
    • ${item}
      • `).join(""); structure += `
    • diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index e95a08c..6f1bb40 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -105,12 +105,26 @@ background-color: $color-white; } + .checkout-container { + overflow: 0 !important; + + @media (max-width: 1024px) { + overflow: hidden !important; + } + + @media (max-width: 767px) { + overflow-x: hidden !important; + } + } + .cart-items { + width: 100% !important; .product-item { padding: 16px 0; } th { + font-family: $font-family-secundary; color: $color-black; padding: 0 0 16px; font-style: normal; @@ -118,6 +132,11 @@ font-size: 14px; line-height: 16px; + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } + &.shipping-date { font-size: 0; @@ -127,6 +146,11 @@ font-family: $font-family-secundary; font-size: 14px; line-height: 16px; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } } } @@ -137,6 +161,11 @@ font-family: $font-family-secundary; font-size: 14px; line-height: 16px; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } } } @@ -177,6 +206,7 @@ } a { + font-family: $font-family-secundary; color: $color-black2; font-style: normal; font-weight: normal; @@ -189,6 +219,11 @@ text-decoration: none; } + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } + @media (max-width: 490px) { margin-left: 23px; } @@ -205,6 +240,11 @@ font-size: 12px; line-height: 14px; + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } + @include mq(md, max) { display: none; } @@ -229,6 +269,11 @@ line-height: 14px; text-decoration-line: line-through; + @include mq(xxl, min) { + font-size: 24px; + line-height: 28px; + } + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -290,6 +335,10 @@ display: block; font-weight: 500; padding: 1px 12px; + + @include mq(xxl, min) { + width: 32px; + } } } @@ -334,6 +383,11 @@ font-size: 14px; line-height: 16px; color: $color-black; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } } .total-selling-price { @@ -344,6 +398,10 @@ } .quantity-price { + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + } @include mq(md, max) { display: none; } @@ -398,6 +456,11 @@ font-family: $font-family; color: $color-black2; + @include mq(xxl, min) { + font-size: 48px; + line-height: 65px; + } + @include mq(md, max) { margin-top: 0; } @@ -408,7 +471,13 @@ font-size: 14px; font-weight: 400; line-height: 18px; - margin: 0 0 12px; + // margin: 0 0 12px; + margin: 0; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 36px; + } } button.shp-open-options { @@ -463,6 +532,11 @@ white-space: nowrap; text-transform: uppercase; + @include mq(xxl, min) { + font-size: 28px !important; + line-height: 36px !important; + } + &:hover { background-color: lighten($color-black, 5); } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c04edf1..6d9e8b5 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -252,6 +252,8 @@ justify-content: center; margin: 0; margin: 0 0 20px; + gap: 5px; + flex-wrap: wrap; list-style-type: none; // font-size: 0; #text { -- 2.34.1 From 086822385dc50466b5a806517beb51ee86ee6f62 Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Sun, 18 Dec 2022 18:43:20 -0300 Subject: [PATCH 13/13] fix(prateleira): Concerta prateleira que estava aparecendo nas paginas fora de cart e checkout vazio --- checkout/src/arquivos/js/components/Footer.js | 67 +++++++++---------- .../src/arquivos/sass/partials/_footer.scss | 2 +- 2 files changed, 34 insertions(+), 35 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index d786546..c816f0e 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -9,17 +9,13 @@ export default class Footer { this.list = await this.apiRequest(); await this.selectors(); this.footerIcons(); - this.onUpdate(); if (window.location.hash === "#/cart") { - await this.createContainerShelf(); - } - if (window.location.hash !== "#/cart") { - await this.removeShelf(); + await this.onUpdate(); } this.shelfItem = await waitElement(".footerCheckout__shelfList"); await this.createShelf(); + this.events(); this.addCarrossel(); - console.log(this.list); } async selectors() { @@ -31,23 +27,23 @@ export default class Footer { this.checkoutVazio = await waitElement(".empty-cart-content"); } - onUpdate() { + events() { + window.addEventListener("hashchange", this.hashChange.bind(this)); + } + + async onUpdate() { //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver let target = this.checkoutVazio; let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); - console.log(mutation); - - const footer = document.querySelector(".footerCheckout"); - console.log(footer); - if (target.attributes.style.nodeValue == "display: none;") { - footer.children[0].classList.remove("ativado"); - } else { - footer.children[0].classList.add("ativado"); + console.log("ndidubazsbf"); + mutations.map((mutation) => { + if (mutation.target.attributes.style.nodeValue == "display: none;") { + this.createContainerShelf(); + } else if (mutation.target.attributes.style.nodeValue == "display: block;") { + this.removeShelf(); } }); }); @@ -55,26 +51,27 @@ export default class Footer { observer.observe(target, config); } - async createContainerShelf() { - if (this.shelf) { - this.shelf.innerHTML = ` -
      -

      Você também pode gostar:

      -
      + createContainerShelf() { + this.shelf.innerHTML = ` +
      +

      Você também pode gostar:

      +
      -
        +
          - `; + `; + } + + hashChange(e) { + console.log(e); + if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") { + this.shelf.classList.add("desativado"); + } else { + this.shelf.classList.remove("desativado"); } } - async removeShelf() { - if (this.shelf) { - this.shelf.innerHTML = ""; - } - } - - async createShelf() { + createShelf() { let structure = ""; this.list.forEach((resp) => { @@ -91,7 +88,10 @@ export default class Footer { }); this.shelfItem.innerHTML = structure; - // console.log("ioaioaioiaoioa"); + } + + removeShelf() { + this.shelf.innerHTML = ""; } async apiRequest() { @@ -171,7 +171,6 @@ export default class Footer { } const footerDevelopedBy = document.getElementsByClassName("footerCheckout__developedBy"); - // console.log(footerDevelopedBy); if (footerDevelopedBy) { const vtexIcon = footerDevelopedBy[0].children[0].children[0]; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 6d9e8b5..7b055d7 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -346,7 +346,7 @@ } } - .ativado { + .desativado { display: none !important; } } -- 2.34.1