From 385f39cdb1b44d0f76503329f0e5e64c13926f0c Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sun, 11 Dec 2022 17:34:16 -0300 Subject: [PATCH 01/10] feat:Header inicializado --- checkout/src/arquivos/js/components/Header.js | 1 + .../src/arquivos/sass/checkout/_checkout.scss | 4 ++- .../src/arquivos/sass/partials/_header.scss | 14 ++++++++ .../src/arquivos/sass/utils/_variaveis.scss | 2 +- .../template-checkout/checkout-header.html | 36 ++++++++++--------- 5 files changed, 39 insertions(+), 18 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..04662f0 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(); console.log(this.item); + console.log("estou funcionando") } async selectors() { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..25e999d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -65,7 +65,9 @@ body { .emailInfo h3 { color: $color-black !important; } - +.hide{ + display: none !important; +} #cart-title, #orderform-title { color: $color-gray2; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..a6ce19f 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,6 +1,16 @@ /* _header.scss */ .headerCheckout { + // position: relative; + &::after{ + content: ''; + align-self: stretch; + position: absolute; + right: 0; + width: 100%; + border-bottom: 1px solid $color-black; + } .container { + margin: 30px 0 30px 0; width: auto !important; } &__wrapper { @@ -17,6 +27,10 @@ } &__safeBuy { + display: flex; + img{ + margin-right: 8px; + } span { align-items: center; display: flex; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..feae4b1 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -5,7 +5,7 @@ $font-family: "Open Sans", sans-serif; $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ -$color-black: #292929; +$color-black: #000000; $color-white: #fff; diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html index 258a0d6..545beb3 100644 --- a/checkout/src/template-checkout/checkout-header.html +++ b/checkout/src/template-checkout/checkout-header.html @@ -1,20 +1,24 @@ - -
-
-
- -
Aqui entra a barra de progresso -
-
- Cadeado - Compra segura -
+
+
+
+ +
Aqui entra a barra de + progresso +
+
+ Cadeado + Compra segura
-
+
+
From 1abf31d03cdea2a72339a873d617adad8ea9b394 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Tue, 13 Dec 2022 21:40:37 -0300 Subject: [PATCH 02/10] feat:header responsivo --- checkout/src/arquivos/js/checkout.js | 3 +- checkout/src/arquivos/js/components/app.js | 20 +++++++++++ .../sass/checkout/_checkout-vazio.scss | 16 ++++++--- .../src/arquivos/sass/checkout/_checkout.scss | 7 ++++ .../src/arquivos/sass/partials/_header.scss | 36 ++++++++++++++++++- .../src/arquivos/sass/utils/_variaveis.scss | 5 ++- 6 files changed, 80 insertions(+), 7 deletions(-) create mode 100644 checkout/src/arquivos/js/components/app.js diff --git a/checkout/src/arquivos/js/checkout.js b/checkout/src/arquivos/js/checkout.js index c8162e9..87f6f2e 100644 --- a/checkout/src/arquivos/js/checkout.js +++ b/checkout/src/arquivos/js/checkout.js @@ -3,10 +3,11 @@ import { Container } from "m3-utils"; import "slick-carousel"; import Header from "./components/Header"; import Footer from "./components/Footer"; +import app from "./components/app"; const m3Checkout = new Container({ appName: "m3-checkout", - components: [CheckoutUI, Header, Footer], + components: [CheckoutUI, Header, Footer, app], }); m3Checkout.start(); diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js new file mode 100644 index 0000000..95cdd87 --- /dev/null +++ b/checkout/src/arquivos/js/components/app.js @@ -0,0 +1,20 @@ +import { waitElement } from "m3-utils"; + +export default class Footer { + constructor() { + this.init(); + console.log("app.js funcionando") + } + + async init() { + await this.selectors(); + await this.event(); + } + + async selectors() { + + } + async event() { + + } +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..2b41840 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -7,16 +7,23 @@ @include mq(md, max) { padding: 0 16px; } + p{ + display: none; + } } + &-title { - font-size: 20px; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; } &-links { .link-choose-products { - background: $color-black; - border: none; + background: transparent; + border: 1px solid $color-black; border-radius: 5px; transition: ease-in 0.22s all; outline: none; @@ -27,11 +34,12 @@ line-height: 16px; text-align: center; letter-spacing: 0.05em; - color: $color-white; + color: $color-black; text-transform: uppercase; &:hover { background: lighten($color-black, 5); + color: $color-white; } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 25e999d..38c8291 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -51,6 +51,13 @@ body { .container-cart { width: 80%; } + .container-cart{ + display: flex; + align-items: center; + align-content: center; + flex-wrap: wrap; + flex-direction: column-reverse + } } .btn-success { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index a6ce19f..cc03e79 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,9 +1,12 @@ /* _header.scss */ .headerCheckout { // position: relative; + @include mq(desc,max){ + margin: 0 16px 0 16px; + width: 92% !important; + } &::after{ content: ''; - align-self: stretch; position: absolute; right: 0; width: 100%; @@ -12,6 +15,14 @@ .container { margin: 30px 0 30px 0; width: auto !important; + @include mq(desc,max){ + margin: 16px 0 16px 0; + } + .progress-bar{ + @include mq(desc,max){ + display: none; + } + } } &__wrapper { align-items: center; @@ -23,6 +34,14 @@ img { height: 52px; width: auto; + @include mq(xll,max){ + height: 33px; + width: 155px; + } + @include mq(IVK,min){ + height: 91px; + width: 382px; + } } } @@ -46,5 +65,20 @@ i { margin-right: 8px; } + @include mq(desc,max){ + height: 16px; + span{ + font-weight: 400; + white-space: nowrap; + } + } + @include mq(IVK,min){ + height: 42px; + width: 236px; + span{ + font-size: 24px; + white-space: nowrap; + } + } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index feae4b1..2ed260a 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -26,7 +26,10 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px + xl: 1200px, + xll:1224px, + desc: 1280px, + IVK : 2500px ) !default; $z-index: ( From 4228149af5f372122c035f4d786bad959ad773b1 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Wed, 14 Dec 2022 19:47:03 -0300 Subject: [PATCH 03/10] feat(header): progrress bar adicionada --- checkout/src/arquivos/js/components/Header.js | 27 ++++++++- checkout/src/arquivos/js/components/app.js | 11 ++++ .../sass/checkout/_checkout-vazio.scss | 14 ++++- .../src/arquivos/sass/partials/_header.scss | 55 +++++++++++++++++++ 4 files changed, 104 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 04662f0..aa41a3c 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -4,19 +4,42 @@ import { waitElement } from "m3-utils"; export default class Header { constructor() { this.init(); + console.log("header.js funcionando") } async init() { await this.selectors(); + await this.event(); + await this.progress(); console.log(this.item); - console.log("estou funcionando") } 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 }); } + async event(){ + + } + async progress(){ + this.item.innerHTML =` +
+
+

Meu Carrinho

+
+
+
+

Dados Pessoais

+
+
+
+

Pagamento

+
+
+
+ ` + } } diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index 95cdd87..c28a9ec 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -9,12 +9,23 @@ export default class Footer { async init() { await this.selectors(); await this.event(); + await this.TextBtn()(); } async selectors() { + this.buttonText = await waitElement("#cart-choose-products", { + //#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 + }); } async event() { } + async TextBtn(){ + this.buttonText.innerHTML =` + CONTINUAR COMPRANDO + ` + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 2b41840..a69cb76 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,7 +1,19 @@ +#cart-choose-products{ + width: 326px; + height: 48px; + border-radius: 0 !important; + display: grid; + align-content: center; + padding: 0 0 0 0; +} .empty-cart { font-family: $font-family; &-content { - color: $color-black; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + color: $color-black; text-align: center; @include mq(md, max) { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index cc03e79..dc66ffc 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,3 +1,4 @@ +@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap'); /* _header.scss */ .headerCheckout { // position: relative; @@ -19,6 +20,60 @@ margin: 16px 0 16px 0; } .progress-bar{ + position: relative; + width:440px; + height: 35px; + .stepProgressBar{ + position: absolute; + display: flex; + justify-content: space-between; + align-items: center; + align-content: center; + top: 0; + left: -25%; + &::after{ + content: ""; + position: absolute; + right: 222px; + bottom: 27px; + width: 67%; + border-bottom: 1px solid $color-black; + } + .step{ + display: flex; + flex-direction: column; + align-items: center; + border: 0px; + margin-right: 180px; + &-text{ + width: 78px; + height: 14px; + font-family: 'Tenor Sans', sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 14px; + margin-bottom: 10px; + color: $color-black; + white-space: nowrap; + } + &-bullet{ + height: 12px; + width: 12px; + border-radius: 50%; + border: 1px solid ; + background-color: white; + position: relative; + z-index: map-get($map:$z-index, $key: level1); + display: inline-block; + transition: background-color 500ms; + line-height: 20px; + &.completed { + color: black; + background-color: $color-black; + } + } + } + } @include mq(desc,max){ display: none; } From 878f39506f513f0461acc50e220600d17ce9288c Mon Sep 17 00:00:00 2001 From: Rallenson Date: Thu, 15 Dec 2022 14:43:59 -0300 Subject: [PATCH 04/10] feat(header):funcionalidade da progress adicionada --- checkout/src/arquivos/js/checkout.js | 3 +- checkout/src/arquivos/js/components/Header.js | 67 +++++++++++++++---- checkout/src/arquivos/js/components/app.js | 3 +- .../src/arquivos/js/helpers/HashRouter.js | 1 + 4 files changed, 59 insertions(+), 15 deletions(-) diff --git a/checkout/src/arquivos/js/checkout.js b/checkout/src/arquivos/js/checkout.js index 87f6f2e..c188698 100644 --- a/checkout/src/arquivos/js/checkout.js +++ b/checkout/src/arquivos/js/checkout.js @@ -4,10 +4,11 @@ import "slick-carousel"; import Header from "./components/Header"; import Footer from "./components/Footer"; import app from "./components/app"; +import HashRouter from "./helpers/HashRouter"; const m3Checkout = new Container({ appName: "m3-checkout", - components: [CheckoutUI, Header, Footer, app], + components: [CheckoutUI, Header, Footer, app,HashRouter], }); m3Checkout.start(); diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index aa41a3c..c87ba6a 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -9,8 +9,10 @@ export default class Header { async init() { await this.selectors(); + window.addEventListener("hashchange", this.stepProgress.bind(this)); await this.event(); await this.progress(); + await this.stepProgress(); console.log(this.item); } @@ -20,26 +22,65 @@ export default class Header { timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); + this.step = document.querySelector('.completed'); } async event(){ } async progress(){ this.item.innerHTML =` -
-
-

Meu Carrinho

-
-
-
-

Dados Pessoais

-
-
-
+
    +
  • +

    Meu Carrinho

    +
    +
    • +
  • +

    Dados Pessoais

    +
    +
    • +

  • Pagamento

    -
    -
-
+
+ + ` } + async stepProgress(){ + const progressList = document.querySelectorAll("#progressBar ul li") + const step1 = document.getElementById("step_1") + const step2 = document.getElementById("step_2") + const step3 = document.getElementById("step_3") + console.log(step1,"primeiro circulo") + console.log(step2,"segundo circulo") + console.log(step3,"terceiro circulo") + progressList.forEach((li) => { + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){ + console.log("estou no cart") + if(li.children[1].id === "step_1"){ + step2.classList.remove('completed'); + step3.classList.remove('completed'); + li.children[1].classList.toggle('completed'); + } + } + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/email"){ + console.log("estou no email") + if(li.children[1].id === "step_2"){ + step1.classList.remove('completed'); + step3.classList.remove('completed'); + console.log(li,"esse é o children 2") + li.children[1].classList.toggle('completed'); + } + } + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"){ + console.log("estou no profile") + if(li.children[1].id === "step_3"){ + step1.classList.remove('completed'); + step2.classList.remove('completed'); + console.log(li,"esse é o children 3") + li.children[1].classList.toggle('completed'); + } + } + }) + } } diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index c28a9ec..f2d830a 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -9,7 +9,7 @@ export default class Footer { async init() { await this.selectors(); await this.event(); - await this.TextBtn()(); + await this.TextBtn(); } async selectors() { @@ -21,6 +21,7 @@ export default class Footer { } async event() { + } async TextBtn(){ diff --git a/checkout/src/arquivos/js/helpers/HashRouter.js b/checkout/src/arquivos/js/helpers/HashRouter.js index f187b42..6a1fb4d 100644 --- a/checkout/src/arquivos/js/helpers/HashRouter.js +++ b/checkout/src/arquivos/js/helpers/HashRouter.js @@ -10,6 +10,7 @@ export default class HashRouter { } hashChange(e) { + console.log("mudou o hash") const from = new URL(e.oldURL).hash || "/"; const to = new URL(e.newURL).hash || "/"; From 23c668abc3fb30eaf742db8a38279bc46996e834 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Thu, 15 Dec 2022 17:34:50 -0300 Subject: [PATCH 05/10] feat:ProgessStepBar finalizada --- checkout/src/arquivos/js/components/Header.js | 6 ++- .../src/arquivos/sass/partials/_header.scss | 39 +++++++++++++++---- .../src/arquivos/sass/utils/_variaveis.scss | 2 +- 3 files changed, 36 insertions(+), 11 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index c87ba6a..ef44815 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -72,13 +72,15 @@ export default class Header { li.children[1].classList.toggle('completed'); } } - if(window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"){ + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/profile" + || window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" + || window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ console.log("estou no profile") if(li.children[1].id === "step_3"){ step1.classList.remove('completed'); step2.classList.remove('completed'); console.log(li,"esse é o children 3") - li.children[1].classList.toggle('completed'); + li.children[1].classList.add('completed'); } } }) diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index dc66ffc..9ece7b4 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -30,23 +30,23 @@ align-items: center; align-content: center; top: 0; - left: -25%; + left: -28%; &::after{ content: ""; position: absolute; - right: 222px; + right: 179px; bottom: 27px; - width: 67%; - border-bottom: 1px solid $color-black; + width: 68%; + border-bottom: 1px solid #000; } .step{ display: flex; flex-direction: column; align-items: center; border: 0px; - margin-right: 180px; + margin-right: 140px; &-text{ - width: 78px; + width: 100%; height: 14px; font-family: 'Tenor Sans', sans-serif; font-weight: 400; @@ -55,6 +55,13 @@ margin-bottom: 10px; color: $color-black; white-space: nowrap; + @include mq(IVK,min){ + width: 100%; + height: 28px; + font-size: 24px; + line-height: 28px; + margin-bottom: 15px; + } } &-bullet{ height: 12px; @@ -66,17 +73,33 @@ z-index: map-get($map:$z-index, $key: level1); display: inline-block; transition: background-color 500ms; - line-height: 20px; &.completed { color: black; background-color: $color-black; } + @include mq(IVK,min){ + height: 24px; + width: 24px; + } } } } - @include mq(desc,max){ + @include mq(xll,max){ display: none; } + @include mq(IVK,min){ + width:1078px; + height: 68px; + .stepProgressBar{ + left: -1%; + &::after{ + content: ""; + right: 216px; + bottom: 32px; + width: 68%; + } + } + } } } &__wrapper { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 2ed260a..95041f0 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -27,7 +27,7 @@ $grid-breakpoints: ( md: 768px, lg: 992px, xl: 1200px, - xll:1224px, + xll:1280px, desc: 1280px, IVK : 2500px ) !default; From 3802b0c5243fde0aa5ae857f4f228e879209652b Mon Sep 17 00:00:00 2001 From: Rallenson Date: Fri, 16 Dec 2022 01:43:08 -0300 Subject: [PATCH 06/10] feat(footer):footer estruturado --- checkout/src/arquivos/js/components/Footer.js | 4 +- checkout/src/arquivos/js/components/Header.js | 18 ++--- checkout/src/arquivos/js/components/app.js | 75 ++++++++++++++++++- .../src/arquivos/sass/partials/_footer.scss | 42 ++++++++++- 4 files changed, 119 insertions(+), 20 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..b34a32a 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,6 +7,7 @@ export default class Footer { async init() { await this.selectors(); + await this.addCarrossel(); // this.onUpdate(); } @@ -14,6 +15,7 @@ export default class Footer { //Para verificar se o carrinho está vazio e remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement this.checkoutVazio = await waitElement(".empty-cart-content"); + this.slick = await waitElement(".footerCheckout__prateleira"); } onUpdate() { @@ -31,7 +33,7 @@ export default class Footer { observer.observe(target, config); } async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement("footerCheckout__prateleira"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index ef44815..148eda7 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -51,36 +51,30 @@ export default class Header { const step1 = document.getElementById("step_1") const step2 = document.getElementById("step_2") const step3 = document.getElementById("step_3") - console.log(step1,"primeiro circulo") - console.log(step2,"segundo circulo") - console.log(step3,"terceiro circulo") progressList.forEach((li) => { if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){ - console.log("estou no cart") if(li.children[1].id === "step_1"){ step2.classList.remove('completed'); step3.classList.remove('completed'); li.children[1].classList.toggle('completed'); } } - if(window.location.href == "https://m3academy.myvtex.com/checkout/#/email"){ - console.log("estou no email") + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/email" + || window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" + || window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"){ if(li.children[1].id === "step_2"){ step1.classList.remove('completed'); step3.classList.remove('completed'); console.log(li,"esse é o children 2") - li.children[1].classList.toggle('completed'); + li.children[1].classList.add('completed'); } } - if(window.location.href == "https://m3academy.myvtex.com/checkout/#/profile" - || window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" - || window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){ - console.log("estou no profile") + if(window.location.href =="https://m3academy.myvtex.com/checkout/#/payment"){ if(li.children[1].id === "step_3"){ step1.classList.remove('completed'); step2.classList.remove('completed'); console.log(li,"esse é o children 3") - li.children[1].classList.add('completed'); + li.children[1].classList.toggle('completed'); } } }) diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index f2d830a..8a7f677 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -9,7 +9,7 @@ export default class Footer { async init() { await this.selectors(); await this.event(); - await this.TextBtn(); + await this.TextTransfer(); } async selectors() { @@ -18,13 +18,80 @@ export default class Footer { timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); - + this.IconPayFot = await waitElement(".footerCheckout__payments", { + //#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.IconVtex = await waitElement(".footerCheckout__vtexpci", { + //#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 + }); } async event() { - + } - async TextBtn(){ + async TextTransfer(){ + const IconDev = document.querySelector(".footerCheckout__developedBy") + + IconDev.children[0].children[0].innerHTML=` + Powered by + M3 Academy + ` + IconDev.children[1].children[0].innerHTML=` + Developed by + M3 Academy + ` + this.IconVtex.innerHTML=` + M3 Academy + ` + this.IconPayFot.innerHTML=` +
    +
  1. + M3 Academy +
    2. +
  2. + M3 Academy +
    3. +
  3. + M3 Academy +
    4. +
  4. + M3 Academy +
    5. +
  5. + M3 Academy +
    6. +
  6. + M3 Academy +
    7. +
  7. + M3 Academy +
    8. +
` + this.buttonText.innerHTML =` CONTINUAR COMPRANDO ` diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..20a1ea1 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -3,10 +3,38 @@ border-top: none; color: $color-gray2; + &::before{ + content: ''; + position: absolute; + right: 0; + width: 100%; + height: 67px; + border-bottom: 1px solid $color-black; + } + &__payments{ + &__images{ + list-style: none; + display: flex; + align-items: center; + .images_pay-card{ + margin-right: 15px; + } + } + } &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + position: relative; + height: 100px; + display: inline-flex; + align-items: flex-end; + .container{ + position: absolute; + top: 94px; + width: 100%; + display: flex; + align-items: baseline; + justify-content: space-between; + flex-direction: row; + } } &__address { @@ -51,6 +79,14 @@ list-style-type: none; margin: 0; + .VtexM3{ + width: 44px; + height: 16px; + } + .VtexM3_2{ + width: 28px; + height: 16px; + } li:last-child { margin-left: 16px; } From add2cb8a6801aaf23e57f2e1f4d4a3b13c91043a Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sat, 17 Dec 2022 01:46:39 -0300 Subject: [PATCH 07/10] feat(footer):slick inicializado --- checkout/src/arquivos/js/components/Footer.js | 75 +++++++++++++++++-- checkout/src/arquivos/js/components/Header.js | 18 +++-- .../src/arquivos/sass/partials/_footer.scss | 55 ++++++++++++-- 3 files changed, 127 insertions(+), 21 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index b34a32a..8fb2575 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,35 +8,94 @@ export default class Footer { async init() { await this.selectors(); await this.addCarrossel(); - // this.onUpdate(); + await this.empytStart() + await 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.checkoutVazio = await waitElement(".empty-cart-content"); + this.checkoutVazio = await waitElement(".empty-cart-content", { + //#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.slick = await waitElement(".footerCheckout__prateleira"); + this.Footer = await waitElement(".footerCheckout"); + this.Fds = document.createElement("div") } - - onUpdate() { + async empytStart(){ + let target2 = this.slick; + let Footer = this.Footer; + console.log(Footer) + let ExistsAtt = document.querySelector('.empty-cart-content[style="display: flex;"]'); + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){ + if(!!ExistsAtt){ + console.log(!!ExistsAtt,"empyt cart existe"); //true + target2.classList.add('hide') + Footer.classList.remove('footerCheckout__ComSlick') + }else{ + console.log(!!ExistsAtt,"empyt cart não existe"); //false + target2.classList.remove('hide') + Footer.classList.add('footerCheckout__ComSlick') + } + } + } + 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 target2 = this.slick; + let Footer = this.Footer; + let config = { + childList: true, + attributes: true, + attributeOldValue:true, + attributeFilter:["style"], + subtree:false, + characterData:true, + characterDataOldValue:true}; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { - console.log(mutation.type); + console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue,mutation); + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){ + if(mutation.oldValue == "display: none;"){ + console.log("entrei no if",mutation.oldValue) + target2.classList.add('hide') + Footer.classList.remove('footerCheckout__ComSlick') + }else{ + console.log("entrei no else",mutation.oldValue) + target2.classList.remove('hide') + Footer.classList.add('footerCheckout__ComSlick') + } + } }); }); observer.observe(target, config); } async addCarrossel() { - const elemento = await waitElement("footerCheckout__prateleira"); - $(elemento).slick({ + let target2 = this.slick; + let divRegua = this.Fds; + console.log(this.Fds) + divRegua.classList.add('Regua') + this.Footer.appendChild(divRegua) + target2.classList.add('hide') + this.slick.innerHTML = + ` +
1
+
2
+
3
+
4
+
5
+ ` + $(this.slick).slick({ slidesToShow: 4, slidesToScroll: 1, + infinite: true, + initialSlide: 0, + variableWidth:true, }); } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 148eda7..af111a8 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -12,7 +12,6 @@ export default class Header { window.addEventListener("hashchange", this.stepProgress.bind(this)); await this.event(); await this.progress(); - await this.stepProgress(); console.log(this.item); } @@ -23,6 +22,8 @@ export default class Header { interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); this.step = document.querySelector('.completed'); + this.slick = await waitElement(".footerCheckout__prateleira"); + this.Footer = await waitElement(".footerCheckout"); } async event(){ @@ -45,18 +46,23 @@ export default class Header { ` + await this.stepProgress(); } async stepProgress(){ const progressList = document.querySelectorAll("#progressBar ul li") const step1 = document.getElementById("step_1") const step2 = document.getElementById("step_2") const step3 = document.getElementById("step_3") + let target2 = this.slick; + let Footer = this.Footer; progressList.forEach((li) => { if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){ if(li.children[1].id === "step_1"){ step2.classList.remove('completed'); step3.classList.remove('completed'); - li.children[1].classList.toggle('completed'); + li.children[1].classList.add('completed'); + target2.classList.toggle('hide') + Footer.classList.add('footerCheckout__ComSlick') } } if(window.location.href == "https://m3academy.myvtex.com/checkout/#/email" @@ -65,16 +71,18 @@ export default class Header { if(li.children[1].id === "step_2"){ step1.classList.remove('completed'); step3.classList.remove('completed'); - console.log(li,"esse é o children 2") li.children[1].classList.add('completed'); + target2.classList.add('hide'); + Footer.classList.remove('footerCheckout__ComSlick'); } } if(window.location.href =="https://m3academy.myvtex.com/checkout/#/payment"){ if(li.children[1].id === "step_3"){ step1.classList.remove('completed'); step2.classList.remove('completed'); - console.log(li,"esse é o children 3") - li.children[1].classList.toggle('completed'); + li.children[1].classList.add('completed'); + target2.classList.add('hide'); + Footer.classList.remove('footerCheckout__ComSlick'); } } }) diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 20a1ea1..3846abe 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,15 +1,20 @@ /* _footer.scss */ .footerCheckout { - border-top: none; + position: relative; + border-top: 1px solid; color: $color-gray2; + margin-top: 100px; + &__ComSlick{ + margin-top: 900px !important; + } &::before{ content: ''; - position: absolute; - right: 0; - width: 100%; - height: 67px; - border-bottom: 1px solid $color-black; + // right: 0; + // width: 100%; + // height: 67px; + // border-bottom: 1px solid red; + // $color-black } &__payments{ &__images{ @@ -23,12 +28,11 @@ } &__wrapper { position: relative; + width: 100 !important; height: 100px; display: inline-flex; align-items: flex-end; .container{ - position: absolute; - top: 94px; width: 100%; display: flex; align-items: baseline; @@ -107,4 +111,39 @@ } } } + &__prateleira{ + position: absolute; + display: inline-flex; + width: 100% !important; + height: 390px; + padding-left: 7.4803149606299%; + margin-bottom: 54px !important; + top: -445px; + align-items: center; + justify-content: center; + padding-right: 15.33203125%; + .quadrado{ + text-align: center; + width: 83.818897637795%!important; + height: 390px; + margin-left: 16px; + background: pink; + } + .slick-slide{ + width: 258px !important; + } + .slick-list { + width: 1016px; + left: 34px; + } + } + .Regua{ + background: blue; + position: absolute; + top: -485px; + left: 126px; + z-index: -1; + width: 1016px; + height: 466px !important; + } } From 8b71dcf28b26ca71db71b3ba21806fbe6fd4acff Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sat, 17 Dec 2022 22:51:38 -0300 Subject: [PATCH 08/10] feat(footer):footer terminado slick ainda precisa ser concertado futuramente --- checkout/src/arquivos/js/components/Footer.js | 132 +++++++++++++++-- checkout/src/arquivos/js/components/Header.js | 5 +- checkout/src/arquivos/js/components/app.js | 20 ++- .../src/arquivos/sass/partials/_footer.scss | 134 +++++++++++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 1 + 5 files changed, 253 insertions(+), 39 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 8fb2575..406ee99 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -20,12 +20,12 @@ export default class Footer { timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); - this.slick = await waitElement(".footerCheckout__prateleira"); + this.prateleira = await waitElement(".footerCheckout__prateleira"); this.Footer = await waitElement(".footerCheckout"); this.Fds = document.createElement("div") } async empytStart(){ - let target2 = this.slick; + let target2 = this.prateleira; let Footer = this.Footer; console.log(Footer) let ExistsAtt = document.querySelector('.empty-cart-content[style="display: flex;"]'); @@ -46,7 +46,7 @@ export default class Footer { // 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 target2 = this.slick; + let target2 = this.prateleira; let Footer = this.Footer; let config = { childList: true, @@ -76,26 +76,128 @@ export default class Footer { observer.observe(target, config); } async addCarrossel() { - let target2 = this.slick; + let target2 = this.prateleira; let divRegua = this.Fds; console.log(this.Fds) divRegua.classList.add('Regua') this.Footer.appendChild(divRegua) target2.classList.add('hide') - this.slick.innerHTML = + this.prateleira.innerHTML = ` -
1
-
2
-
3
-
4
-
5
+ + + +

Você também pode gostar:

+
    +
  • + Sandália Azul Spike Amarração +

    Sandália Azul Spike Amarração

    +
    + + + + + + +
    + +
    • +
  • + Sandália Roxo Spike Amarração +

    Sandália Roxo Spike Amarração

    +
    + + + + + +
    + +
    • +
  • + Sandália Verde Spike Amarração +

    Sandália Verde Spike Amarração

    +
    + + + + + +
    + +
    • +
  • + Jaqueta Masculina Thermoball Eco +

    Jaqueta Masculina Thermoball Eco

    +
    + + + +
    + +
    • +
  • + Sandália Amarela Spike Amarração +

    Sandália Amarela Spike Amarração

    +
    + +
    + +
    • +
+ + + ` - $(this.slick).slick({ + $('.slick').slick({ + infinite: true, slidesToShow: 4, slidesToScroll: 1, - infinite: true, - initialSlide: 0, - variableWidth:true, - }); + variableWidth:false, + prevArrow: $(".Fakebutton-Prev"), + nextArrow: $(".Fakebutton-Next"), + responsive:[{ + breakpoint: 1024, + settings: { + infinite: true, + slidesToShow: 2, + slidesToScroll: 1, + variableWidth:false, + prevArrow: $(".Fakebutton-Prev"), + nextArrow: $(".Fakebutton-Next"), + } + }, + { + breakpoint: 1280, + settings: { + infinite: true, + slidesToShow: 3, + slidesToScroll: 1, + variableWidth:false, + prevArrow: $(".Fakebutton-Prev"), + nextArrow: $(".Fakebutton-Next"), + } + }], + }); } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index af111a8..01de860 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -22,8 +22,9 @@ export default class Header { interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); this.step = document.querySelector('.completed'); - this.slick = await waitElement(".footerCheckout__prateleira"); + this.prateleira = await waitElement(".footerCheckout__prateleira"); this.Footer = await waitElement(".footerCheckout"); + this.pay__Wrapper = document.createElement("div") } async event(){ @@ -53,7 +54,7 @@ export default class Header { const step1 = document.getElementById("step_1") const step2 = document.getElementById("step_2") const step3 = document.getElementById("step_3") - let target2 = this.slick; + let target2 = this.prateleira; let Footer = this.Footer; progressList.forEach((li) => { if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){ diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index 8a7f677..4c33590 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -23,17 +23,35 @@ export default class Footer { timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); + this.IconPayFotInfo = await waitElement(".footerCheckout__address", { + //#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.IconVtex = await waitElement(".footerCheckout__vtexpci", { //#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.MeuCarrinho = await waitElement("#cart-title", { + //#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.Footer = await waitElement(".footerCheckout__wrapper", { + //#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.pay__Wrapper = document.createElement("div") } async event() { - } async TextTransfer(){ + // const conteiner= this.Footer.children[0] + // conteiner.appendChild(this.pay__Wrapper) + // console.log(conteiner) const IconDev = document.querySelector(".footerCheckout__developedBy") IconDev.children[0].children[0].innerHTML=` diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 3846abe..c0e0848 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,3 +1,4 @@ +@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap'); /* _footer.scss */ .footerCheckout { position: relative; @@ -5,7 +6,7 @@ color: $color-gray2; margin-top: 100px; &__ComSlick{ - margin-top: 900px !important; + margin-top: 500px !important; } &::before{ @@ -28,8 +29,8 @@ } &__wrapper { position: relative; - width: 100 !important; - height: 100px; + width: 100% !important; + height: 70px; display: inline-flex; align-items: flex-end; .container{ @@ -38,6 +39,11 @@ align-items: baseline; justify-content: space-between; flex-direction: row; + position: relative; + @include mq(md, max) { + flex-direction: column-reverse; + + } } } @@ -55,6 +61,11 @@ margin-bottom: 24px; max-width: 100%; } + @include mq(xll, max) { + position: absolute; + top: 0; + margin: 16px 0 0 16px !important; + } } &__stamps { @@ -67,6 +78,12 @@ align-self: center; margin-bottom: 12px; } + @include mq(xll, max) { + position: absolute; + bottom: 13px; + width: 100%; + right: 0; + } &__divider { background-color: $color-gray4; @@ -82,7 +99,11 @@ display: flex; list-style-type: none; margin: 0; - + @include mq(xll, max) { + margin: 16px; + top: 41px; + position: absolute; + } .VtexM3{ width: 44px; height: 16px; @@ -112,38 +133,109 @@ } } &__prateleira{ + // background: gray; position: absolute; display: inline-flex; width: 100% !important; height: 390px; - padding-left: 7.4803149606299%; - margin-bottom: 54px !important; - top: -445px; + // margin-bottom: 54px !important; + top: -505px; align-items: center; justify-content: center; - padding-right: 15.33203125%; - .quadrado{ - text-align: center; - width: 83.818897637795%!important; - height: 390px; - margin-left: 16px; - background: pink; + flex-direction: column; + .slick{ + display: flex; + width: 100%; + height: 100%; } - .slick-slide{ - width: 258px !important; + .SLick_title{ + font-family: 'Tenor Sans', sans-serif; + color: $color-black; } - .slick-list { - width: 1016px; - left: 34px; + .Fakebutton-Prev{ + left: 161px; + top: 227px; + z-index: map-get($map:$z-index, $key: level5); + position: absolute; } + .Fakebutton-Next{ + position: absolute; + display: inline; + right: 161px; + z-index: map-get($map:$z-index, $key: level5); + top: 227px; + } + .quadrado{ + display: flex !important; + justify-content: space-between; + align-items: center; + text-align: center; + width: 242px !important; + height: 390px; + margin-right: 16px; + background: transparent; + flex-direction: column; + &__btn{ + button{ + display: inline-flex; + align-items: center; + justify-content: center; + color: $color-white; + border-radius: 8px; + border: 0; + background-color: $color-blue-100; + text-align: center; + width: 26px; + height: 28px; + } + .cor{ + width: 54px !important; + height: 28px !important; + } + .verde{ + width: 54px !important; + height: 28px !important; + } + .azul{ + width: 46px !important; + height: 28px !important; + } + .jaq__azul{ + width: 112px !important; + height: 28px !important; + white-space: nowrap; + } + } + .Ver__produto{ + width: 100%; + height: 42px; + color: $color-white; + border-radius: 8px; + border: 0; + background-color: $color-blue-100; + } + } + .slick-slide{ + position: relative; + } + .slick-list { + // width: 1016px; + // left: -49px; + position: absolute; + top: 0px; + left: 10.78125%; + width: 79.375%; + height: 466px !important; + } } .Regua{ + display: none; background: blue; position: absolute; top: -485px; - left: 126px; + left: 10.78125%; z-index: -1; - width: 1016px; + width: 79.375%; height: 466px !important; } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 95041f0..f05d692 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -16,6 +16,7 @@ $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-blue: #4267b2; +$color-blue-100: #00C8FF; $color-green: #4caf50; From 4bdb116c8b4083021cc35b23fd3ed88e982e88ac Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sun, 18 Dec 2022 21:41:50 -0300 Subject: [PATCH 09/10] feat:body struturado --- checkout/src/arquivos/js/components/Footer.js | 24 ++- checkout/src/arquivos/js/components/Header.js | 11 +- checkout/src/arquivos/js/components/app.js | 56 +++++- .../sass/checkout/_checkout-autenticacao.scss | 33 +++- .../sass/checkout/_checkout-carrinho.scss | 151 +++++++++++--- .../sass/checkout/_checkout-pagamento.scss | 185 ++++++++++++++++++ .../src/arquivos/sass/checkout/_checkout.scss | 16 +- .../src/arquivos/sass/partials/_footer.scss | 24 +-- .../src/arquivos/sass/utils/_variaveis.scss | 3 + 9 files changed, 441 insertions(+), 62 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 406ee99..3ef4bc6 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -23,21 +23,28 @@ export default class Footer { this.prateleira = await waitElement(".footerCheckout__prateleira"); this.Footer = await waitElement(".footerCheckout"); this.Fds = document.createElement("div") + this.MeuCarrinho = await waitElement("#cart-title", { + //#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 + }); } async empytStart(){ let target2 = this.prateleira; let Footer = this.Footer; - console.log(Footer) + const MeuCarrinho = this.MeuCarrinho let ExistsAtt = document.querySelector('.empty-cart-content[style="display: flex;"]'); if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){ if(!!ExistsAtt){ console.log(!!ExistsAtt,"empyt cart existe"); //true - target2.classList.add('hide') - Footer.classList.remove('footerCheckout__ComSlick') + MeuCarrinho.classList.add('hide'); + target2.classList.add('hide'); + Footer.classList.remove('footerCheckout__ComSlick'); }else{ console.log(!!ExistsAtt,"empyt cart não existe"); //false - target2.classList.remove('hide') - Footer.classList.add('footerCheckout__ComSlick') + MeuCarrinho.classList.remove('hide'); + target2.classList.remove('hide'); + Footer.classList.add('footerCheckout__ComSlick'); } } } @@ -48,8 +55,9 @@ export default class Footer { let target = this.checkoutVazio; let target2 = this.prateleira; let Footer = this.Footer; + const MeuCarrinho = this.MeuCarrinho let config = { - childList: true, + childList: false, attributes: true, attributeOldValue:true, attributeFilter:["style"], @@ -62,10 +70,12 @@ export default class Footer { if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){ if(mutation.oldValue == "display: none;"){ console.log("entrei no if",mutation.oldValue) + MeuCarrinho.classList.add('hide'); target2.classList.add('hide') Footer.classList.remove('footerCheckout__ComSlick') }else{ console.log("entrei no else",mutation.oldValue) + MeuCarrinho.classList.remove('hide'); target2.classList.remove('hide') Footer.classList.add('footerCheckout__ComSlick') } @@ -139,7 +149,7 @@ export default class Footer {
  • - Jaqueta Masculina Thermoball Eco { if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){ + MeuCarrinho.classList.remove('hide'); + this.Finalizar_Pedido.classList.add('hide') if(li.children[1].id === "step_1"){ step2.classList.remove('completed'); step3.classList.remove('completed'); @@ -69,6 +74,8 @@ export default class Header { if(window.location.href == "https://m3academy.myvtex.com/checkout/#/email" || window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" || window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"){ + MeuCarrinho.classList.add('hide'); + this.Finalizar_Pedido.classList.remove('hide') if(li.children[1].id === "step_2"){ step1.classList.remove('completed'); step3.classList.remove('completed'); @@ -78,6 +85,8 @@ export default class Header { } } if(window.location.href =="https://m3academy.myvtex.com/checkout/#/payment"){ + MeuCarrinho.classList.add('hide'); + this.Finalizar_Pedido.classList.remove('hide') if(li.children[1].id === "step_3"){ step1.classList.remove('completed'); step2.classList.remove('completed'); diff --git a/checkout/src/arquivos/js/components/app.js b/checkout/src/arquivos/js/components/app.js index 4c33590..92bdb32 100644 --- a/checkout/src/arquivos/js/components/app.js +++ b/checkout/src/arquivos/js/components/app.js @@ -33,7 +33,7 @@ export default class Footer { timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); - this.MeuCarrinho = await waitElement("#cart-title", { + this.table = await waitElement(".cart-items", { //#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 @@ -43,16 +43,62 @@ export default class Footer { timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); - this.pay__Wrapper = document.createElement("div") + this.tbody = await waitElement(".accordion-inner"); + this.LapisAzul = await waitElement(".icon-edit"); + this.btnCep = await waitElement("#shipping-calculate-link"); + this.Dados_profile = document.querySelectorAll(".accordion-group")[1]; + this.pay__Wrapper = document.createElement("div"); + this.Finalizar_btn = document.createElement("button"); + this.more = document.createElement("p"); + this.wrapper = document.createElement("tr"); } async event() { + this.btnCep.addEventListener("click",this.nonExist.bind(this)) } + async nonExist(){ + this.cep = await waitElement('.ship-postalCode small a'); + let ExistsAtt = this.cep + if(!!ExistsAtt){ + + this.cep.innerHTML =` + Não sei meu código postal + ` + console.log(!!ExistsAtt,""); //true + }else{ + console.log(!!ExistsAtt,"cep n existe"); //false + + } + } async TextTransfer(){ - // const conteiner= this.Footer.children[0] - // conteiner.appendChild(this.pay__Wrapper) - // console.log(conteiner) + const dadosProfile =this.Dados_profile.children[0].children[0].children[1] + const tbodywrapper = this.wrapper; + const tbody = this.tbody.children[1].children[3]; + const table = this.table.children[0].children[0].children[1]; + const table_2 = this.table.children[0].children[0].children[2]; + tbodywrapper.classList.add("flex") + tbodywrapper.appendChild(this.more) + tbodywrapper.appendChild(this.Finalizar_btn) + tbody.appendChild(tbodywrapper) + console.log(this.LapisAzul,"lapis azul") const IconDev = document.querySelector(".footerCheckout__developedBy") + this.Finalizar_btn.innerHTML =` + FINALIZAR COMPRA + ` + dadosProfile.innerHTML =` + Identificação + ` + this.more.innerHTML =` + Escolher mais produtos + ` + table.innerHTML= + ` + Frete + ` + table_2.innerHTML= + ` + Unidade + ` IconDev.children[0].children[0].innerHTML=` Powered by diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..2461b50 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,3 +1,12 @@ +#orderform-title{ + font-weight: 700 !important; + color: $color-black !important; +} +#btn-client-pre-email{ + background: $color-blue-100 !important; + color: $color-black; + font-weight: 700 !important; +} .checkout-container { .client-pre-email { border-color: $color-gray4; @@ -25,12 +34,27 @@ margin-bottom: 16px; span { - color: #303030; - font-size: 24px; + color: $color-black; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + height: 22px; } small { - color: $color-gray4; + color: $color-black; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + height: 22px; } } } @@ -90,10 +114,11 @@ li { span { color: $color-black; + font-weight: 700; } i::before { - color: $color-black; + color: $color-blue-100; font-size: 1rem; opacity: 1; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..1b1de80 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,9 +1,43 @@ +@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); .container { @include mq(md, max) { width: 100%; } } +.totalizers-list{ + td{ + height: 0; + } +} +.coupon{ + &-fieldset{ + div{ + margin-top: 35px; + .coupon-label{ + position: relative; + text-align: initial; + left: 47px; + } + #cart-coupon-add{ + display: inline-flex; + align-items: center; + justify-content: center; + background: $color-blue-100; + color: $color-black; + letter-spacing: 0.05em; + text-transform: uppercase; + font-size: 14px; + line-height: 19px; + font-weight: 400; + font-family: $font-family; + } + .coupon-value{ + width: 204px; + } + } + } +} .cart-template { font-family: $font-family; @include mq(md, max) { @@ -17,6 +51,7 @@ box-sizing: border-box; border-radius: 5px; padding: 16px; + margin-top: 44px; @include mq(md, max) { margin: 0px 0 25px 0; @@ -111,12 +146,13 @@ } th { - color: $color-black; + color: $color-black-100; padding: 0 0 16px; font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; + font-family: $font-family-secundary; @include mq(md, max) { &.quantity-price, @@ -155,12 +191,13 @@ } a { - color: $color-blue; + color: $color-black; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; transition: ease-in 0.22s all; + font-family: $font-family-secundary; &:hover { color: darken($color-blue, 10); @@ -201,6 +238,7 @@ span.list-price { color: $color-gray2; + font-weight: 400; font-size: 12px; line-height: 14px; text-decoration-line: line-through; @@ -213,18 +251,19 @@ text-transform: lowercase; } } + } 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; margin: 6px auto 0; max-height: 38px; - max-width: 118px; + max-width: 1018px; padding: 0; width: max-content !important; @@ -236,7 +275,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; @@ -252,29 +291,41 @@ .icon-plus-sign, .icon-minus-sign { - &::before { + &::after { color: $color-black; display: block; font-weight: 500; - padding: 1px 12px; + padding: 5px 12px; + } + &::before{ + background:$color-blue-100; + border-radius: 50%; + color: $color-white; + width: 16px; + height: 16px; } } .icon-minus-sign { - &:before { + &::before{ content: "-"; - font-size: 16px; + font-size: 14px; + width: 16px; + height: 16px; } } .icon-plus-sign { - &:before { + &::before{ content: "+"; font-size: 14px; + width: 16px; + height: 16px; } } .item-quantity-change { + width: 30px; @media (max-width: 979px) and (min-width: 768px) { position: inherit; bottom: inherit; @@ -297,12 +348,17 @@ } span { font-style: normal; - font-weight: normal; + font-weight: bold; font-size: 14px; line-height: 16px; color: $color-black; } } + .best-price{ + span{ + font-weight: 400 !important; + } + } .quantity-price { @include mq(md, max) { @@ -353,10 +409,10 @@ .srp-main-title { margin: 32px 0 12px; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + color: $color-black; @include mq(md, max) { margin-top: 0; @@ -374,7 +430,7 @@ background-color: $color-gray5; border: none; border-radius: 5px; - color: $color-gray2; + color: $color-black; font-size: 16px; letter-spacing: 0.05em; line-height: 19px; @@ -470,7 +526,6 @@ font-size: 12px; line-height: 14px; color: $color-black; - margin-bottom: 12px; } input { @@ -495,7 +550,7 @@ outline: none; position: absolute; right: -150px; - top: 36px; + top: 24px; transition: all 0.2s linear; width: 96px; text-transform: uppercase; @@ -515,8 +570,7 @@ font-weight: normal; font-size: 10px; line-height: 12px; - color: $color-blue; - margin-top: 7px; + color: $color-black; } span.help.error { @@ -528,8 +582,15 @@ top: 17px; } } + &__form{ + .ship-country{ + display: none; + } + } + } + #cart-shipping-calculate{ + background: $color-blue-100; } - .srp-result { strong, .srp-items { @@ -595,17 +656,20 @@ width: 346px; .coupon-data { + margin-top: 33px; + span{ + color: $color-black !important; + } #cart-link-coupon-add { text-decoration: none; &:hover { - text-decoration: underline; cursor: pointer; } } span { font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; color: $color-blue; @@ -734,11 +798,42 @@ td.info, td.monetary { font-style: normal; - font-weight: normal; + font-weight: bold; font-size: 18px; line-height: 21px; color: $color-black; } + button{ + border: 0; + right: 0; + top: 121px; + width: 140%; + height: 42px; + background: $color-blue-100; + border-radius: 8px; + font-weight: 700; + line-height: 20px; + font-size: 14px; + letter-spacing: 0.05em; + font-family:$font-family; + margin-bottom: 44px; + } + .flex{ + display: flex; + flex-direction: column; + align-items: center; + flex-wrap: wrap; + p{ + margin-bottom: 14px; + margin-top: 17px; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400 !important; + font-size: 12px; + line-height: 14px; + color:$color-black + } + } } } } @@ -810,3 +905,11 @@ } } } +#find-pickup-link{ + background: $color-blue-100 !important; + width: 280px; + height: 42px; +} +// #cart-shipping-calculate{ +// top: 24px; +// } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..4ec5ea0 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -9,3 +9,188 @@ body .container-main.container-order-form .orderform-template.active { width: 66.1132%; } } +#is-corporate-client{ + display: none; +} +#postalCode-finished-loading{ + .shipping-method-toggle{ + background: transparent !important; + border-radius: 16px !important; + border: 1px solid $color-black !important; + } + div{ + background: transparent !important; + border-radius: 16px !important; + } + span{ + color: $color-black; + text-shadow: none !important; + text-transform: uppercase; + } +} +#ship-number{ + width: 296px; + height: 35px; +} +#ship-complement{ + width: 296px; + height: 35px; +} +#ship-receiverName{ + width: 296px; + height: 35px; +} +.ship-country{ + display: none; +} + +.input-small{ + width: 142px !important; + height: 42px !important; +} +.box-client-info-pf{ + .client-notice{ + display: none; + } + label,span{ + color: #7D7D7D !important; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + .help, .error{ + color: red !important; + } + .input-xlarge{ + width: 298px; + height: 42px; + } +} +.accordion-group{ + width: 332px; + border-radius: 4px!important; + border: 1px solid $color-gray3; + border: 1px solid $color-gray6 !important; + .newsletter-text, + p, + label{ + color: #7D7D7D !important; + } + input, + .cart{ + border-radius: 4px!important; + border: 1px solid $color-gray6 !important; + } + div{ + border-radius: 4px!important; + } + .vtex-omnishipping-1-x-deliveryGroup{ + #delivery-packages-options{ + border-radius: 8px!important; + border: 1px solid $color-gray6 !important; + path{ + border: $color-gray3 !important; + fill: $color-blue-100; + } + } + } + .icon-user, + .icon-home, + .icon-credit-card{ + display: none; + } + a{ + background: transparent !important; + border: none !important; + box-shadow: none !important; + } + .icon-edit{ + &::before{ + content: ""; + width: 20px !important; + height: 20px !important; + background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png); + background-size: 20px; + fill: transparent !important; + + } + } + #go-to-shipping, + #btn-go-to-payment, + #go-to-payment{ + width: 100% !important; + background: $color-blue-100 !important; + text-transform: uppercase !important; + height: 42px !important; + } +} +#payment-data-submit{ + width: 100% !important; + background: $color-green_2 !important; + text-transform: uppercase !important; + height: 42px !important; + border-radius: 8px !important; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +} +#payment-data{ + width: 719px !important; + #payment-group-custom204PaymentGroupPaymentGroup, + #payment-group-SPEIPaymentGroup, + #payment-group-MercadoPagoPaymentGroup, + #payment-group-custom201PaymentGroupPaymentGroup, + #payment-group-PSEPaymentGroup, + #payment-group-customPrivate_502PaymentGroup, + #payment-group-instantPaymentPaymentGroup, + #payment-group-custom203PaymentGroupPaymentGroup, + #payment-group-promissoryPaymentGroup, + #show-gift-card-group, + #payment-group-custom205PaymentGroupPaymentGroup, + #payment-group-creditDirectSalePaymentGroup{ + display: none; + } + .form-step{ + display: flex; + height: 452px; + } + .accordion-group{ + width: 680px !important; + height: 452px !important; + } + // h3{ + // display: block !important; + // } + span, + a{ + width: 210px; + height: 50px; + } + a{ + background: $color-gray3 !important; + border: 1px solid #58595B !important; + padding: 0; + margin-bottom: 12px; + border-radius: 4px; + color: #58595B; + text-align: center; + text-decoration: none; + &:hover{ + border: 1px solid orangered !important; + color: orangered; + } + } + .payment-group-item-text{ + background-image: none; + } + .steps-view{ + position: absolute; + // width: 394px; + // height: 292px; + right: 0; + top: -2px; + } +} +.PaymentCardHolderDocument{ + display: none !important; +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 38c8291..de2ad74 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -49,7 +49,7 @@ body { } .container-order-form, .container-cart { - width: 80%; + width: 86%; } .container-cart{ display: flex; @@ -90,6 +90,20 @@ body { margin-left: 30px; } } +#cart-title{ + position: absolute; + color:$color-black; + font-family: "Open Sans",sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 42px; + margin: 16px 0 16px; + letter-spacing: .1em; + text-transform: uppercase; + top: 0; + left: 0; + letter-spacing: 0.05em; +} .dropdown { &__content { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c0e0848..eb1e58e 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -6,16 +6,7 @@ color: $color-gray2; margin-top: 100px; &__ComSlick{ - margin-top: 500px !important; - } - - &::before{ - content: ''; - // right: 0; - // width: 100%; - // height: 67px; - // border-bottom: 1px solid red; - // $color-black + margin-top: 450px !important; } &__payments{ &__images{ @@ -214,6 +205,9 @@ border: 0; background-color: $color-blue-100; } + .imago{ + background: #eeeeee; + } } .slick-slide{ position: relative; @@ -228,14 +222,4 @@ height: 466px !important; } } - .Regua{ - display: none; - background: blue; - position: absolute; - top: -485px; - left: 10.78125%; - z-index: -1; - width: 79.375%; - height: 466px !important; - } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f05d692..8a06258 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black: #000000; +$color-black-100: #292929; $color-white: #fff; @@ -14,11 +15,13 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #E0E0E0; $color-blue: #4267b2; $color-blue-100: #00C8FF; $color-green: #4caf50; +$color-green_2: #035505; /* Grid breakpoints */ $grid-breakpoints: ( From 59d940e3fdf1af67fa9cd783c097bde0e6d5900a Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sun, 18 Dec 2022 23:49:20 -0300 Subject: [PATCH 10/10] feat:slick mobile --- .../sass/checkout/_checkout-carrinho.scss | 18 +++++- .../sass/checkout/_checkout-pagamento.scss | 2 - .../sass/checkout/_checkout-vazio.scss | 10 +++ .../src/arquivos/sass/checkout/_checkout.scss | 5 ++ .../src/arquivos/sass/partials/_footer.scss | 62 +++++++++++++++++++ 5 files changed, 93 insertions(+), 4 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 1b1de80..ad53583 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -40,6 +40,14 @@ } .cart-template { font-family: $font-family; + .summary-template-holder{ + div{ + border: 0 !important; + @include mq(xll, max) { + width: 100%; + } + } + } @include mq(md, max) { padding: 0 0; } @@ -59,6 +67,9 @@ border-right: none; border-radius: 0; } + @include mq(xll, max) { + margin: 30px 0 25px 0; + } } .cart-fixed.affix { position: relative !important; @@ -804,8 +815,6 @@ color: $color-black; } button{ - border: 0; - right: 0; top: 121px; width: 140%; height: 42px; @@ -817,6 +826,11 @@ letter-spacing: 0.05em; font-family:$font-family; margin-bottom: 44px; + border: 0; + @include mq(xll, max) { + height: 48px; + white-space: nowrap; + } } .flex{ display: flex; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 4ec5ea0..951c6df 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -185,8 +185,6 @@ body .container-main.container-order-form .orderform-template.active { } .steps-view{ position: absolute; - // width: 394px; - // height: 292px; right: 0; top: -2px; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index a69cb76..6e159da 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -5,6 +5,10 @@ display: grid; align-content: center; padding: 0 0 0 0; + @include mq(xll, max) { + width: 250px; + height: 48px; + } } .empty-cart { font-family: $font-family; @@ -22,6 +26,7 @@ p{ display: none; } + } @@ -30,6 +35,11 @@ line-height: 33px; text-align: center; text-transform: uppercase; + @include mq(xll, max) { + font-size: 18px; + line-height: 25px; + white-space: nowrap; + } } &-links { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index de2ad74..34526e6 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -103,6 +103,11 @@ body { top: 0; left: 0; letter-spacing: 0.05em; + @include mq(xll, max) { + font-size: 24px; + line-height: 33px; + white-space: nowrap; + } } .dropdown { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index eb1e58e..dabaf54 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -57,6 +57,13 @@ top: 0; margin: 16px 0 0 16px !important; } + span{ + @include mq(IVK, min) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + } + } } &__stamps { @@ -98,10 +105,19 @@ .VtexM3{ width: 44px; height: 16px; + @include mq(IVK, min) { + width: 88px; + height: 30px; + } + } .VtexM3_2{ width: 28px; height: 16px; + @include mq(IVK, min) { + width: 56px; + height: 32px; + } } li:last-child { margin-left: 16px; @@ -119,7 +135,13 @@ text-decoration: none; span { + color: $color-black; margin-right: 8px; + @include mq(IVK, min) { + font-weight: 400; + font-size: 18px; + line-height: 25px; + } } } } @@ -142,12 +164,20 @@ .SLick_title{ font-family: 'Tenor Sans', sans-serif; color: $color-black; + margin-bottom: 20px; + @include mq(xll, max) { + font-size: 14px; + line-height: 28px; + } } .Fakebutton-Prev{ left: 161px; top: 227px; z-index: map-get($map:$z-index, $key: level5); position: absolute; + @include mq(xll, max) { + left: 29px; + } } .Fakebutton-Next{ position: absolute; @@ -155,6 +185,9 @@ right: 161px; z-index: map-get($map:$z-index, $key: level5); top: 227px; + @include mq(xll, max) { + right: 22px; + } } .quadrado{ display: flex !important; @@ -178,10 +211,19 @@ text-align: center; width: 26px; height: 28px; + @include mq(xll, max) { + width: 16px ; + height: 18px; + border-radius: 4px; + } } .cor{ width: 54px !important; height: 28px !important; + @include mq(xll, max) { + width: 46px ; + height: 28px; + } } .verde{ width: 54px !important; @@ -195,6 +237,10 @@ width: 112px !important; height: 28px !important; white-space: nowrap; + @include mq(xll, max) { + width: 164px ; + height: 42px; + } } } .Ver__produto{ @@ -204,13 +250,28 @@ border-radius: 8px; border: 0; background-color: $color-blue-100; + @include mq(xll, max) { + width: 106px; + height: 42px; + } } .imago{ background: #eeeeee; } + + @include mq(xll, max) { + width: 112px !important; + height: 394px !important; + } } .slick-slide{ position: relative; + @include mq(xll, max) { + img{ + width: 164px; + height: 164px; + } + } } .slick-list { // width: 1016px; @@ -222,4 +283,5 @@ height: 466px !important; } } + }