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

    Meu Carrinho

    • +

    Meu Carrinho

  • Dados Pessoais

    • - -
  • Pagamento

    • +
  • Pagamento

`; } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..4ccb577 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -2,6 +2,81 @@ .headerCheckout { .container { width: auto !important; + #progressBar { + width: 446px; + ul { + list-style-type: none; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 !important; + } + li .containerLi { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + position: relative; + } + li.central .containerLi { + align-items: center; + margin-left: 7px; + } + li:last-child .containerLi { + align-items: flex-end; + } + li .containerLi div { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + li { + display: flex; + flex-direction: column; + align-items: center; + } + li.central { + width: auto; + } + li #progress-bar-circle-1, + li #progress-bar-circle-2, + li #progress-bar-circle-3 { + width: 12px; + height: 12px; + border: 1px solid #000; + border-radius: 50%; + @media (min-width: 2500px) { + width: 24px; + height: 24px; + } + } + li #progress-bar-circle-1.active, + li #progress-bar-circle-2.active, + li #progress-bar-circle-3.active { + border: none; + background-color: #000; + } + li .progress-bar-line-1 { + position: absolute; + left: 25%; + transform: translateY(-50%); + bottom: 5px; + width: 100%; + height: 1px; + border-top: 1px solid #000; + } + li .progress-bar-line-2 { + position: absolute; + right: 21%; + transform: translateY(-50%); + bottom: 5px; + width: 100%; + height: 1px; + border-top: 1px solid #000; + } + } } &__wrapper { align-items: center; -- 2.34.1 From 27d740563c09eb7c09c02f9503e7c1dca06e8277 Mon Sep 17 00:00:00 2001 From: Savio Date: Tue, 13 Dec 2022 19:46:34 -0300 Subject: [PATCH 04/22] =?UTF-8?q?refactor:=20separando=20fun=C3=A7=C3=B5es?= =?UTF-8?q?=20em=20responsabilidades=20unicas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Header.js | 199 ++++-------------- 1 file changed, 37 insertions(+), 162 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index d2fe2db..35a3bac 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -46,188 +46,63 @@ export default class Header { const progressBarLista = document.querySelectorAll("#progressBar ul li"); progressBarLista.forEach((li) => { if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - li.children[0].children[0].children["progress-bar-circle-1"].classList.add( - "active" - ); - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } + this.trataPonto(li, 1); } else if ( window.location.href === "https://m3academy.myvtex.com/checkout/#/email" || window.location.href == "https://m3academy.myvtex.com/checkout/#/profile" || window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" ) { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - li.children[0].children[0].children["progress-bar-circle-2"].classList.add( - "active" - ); - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } + this.trataPonto(li, 2); } else if ( window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" ) { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - li.children[0].children[0].children["progress-bar-circle-3"].classList.add( - "active" - ); - } + this.trataPonto(li, 3); } window.addEventListener("hashchange", () => { if (window.location.hash == "#/cart") { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.add("active"); - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } + this.trataPonto(li, 1); } else if ( window.location.hash == "#/email" || window.location.hash == "#/profile" || window.location.hash == "#/shipping" ) { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.add("active"); - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.remove("active"); - } - } + this.trataPonto(li, 2); } else if (window.location.hash == "#/payment") { - if (li.children[0].children[0].children["progress-bar-circle-1"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-1" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-2"]) { - if ( - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.contains("active") - ) { - li.children[0].children[0].children[ - "progress-bar-circle-2" - ].classList.remove("active"); - } - } - if (li.children[0].children[0].children["progress-bar-circle-3"]) { - li.children[0].children[0].children[ - "progress-bar-circle-3" - ].classList.add("active"); - } + this.trataPonto(li, 3); } }); }); } } + + marcarPonto(li, local) { + if (li.children[0].children[0].children["progress-bar-circle-" + local]) { + li.children[0].children[0].children["progress-bar-circle-" + local].classList.add( + "active" + ); + } + } + + removerPonto(li, local) { + if (li.children[0].children[0].children["progress-bar-circle-" + local]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-" + local + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-" + local + ].classList.remove("active"); + } + } + } + + trataPonto(li, local) { + const indice = [1, 2, 3]; + let indicesPontoBranco = indice.splice(local - 1, 1); + this.marcarPonto(li, local); + for (const i of indice) { + this.removerPonto(li, i); + } + } } -- 2.34.1 From 3dc506b33ca425ca28b2d8ae4e10b73a578816f7 Mon Sep 17 00:00:00 2001 From: Savio Date: Tue, 13 Dec 2022 21:41:36 -0300 Subject: [PATCH 05/22] feat(footer):Lendo os dados da api. --- checkout/src/arquivos/js/components/Footer.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..a026ccc 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,6 +8,9 @@ export default class Footer { async init() { await this.selectors(); // this.onUpdate(); + await this.pegarInfo( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ); } async selectors() { @@ -37,4 +40,19 @@ export default class Footer { slidesToScroll: 1, }); } + produto(data) { + return { + imagem: data["items"][0]["images"][0]["imageUrl"], + nome: data["productName"], + tamanho: data["items"].map((val) => val["name"]), + }; + } + async pegarInfo(url, tratamento) { + const response = await fetch(url); + //console.log(response); + const data = await response.json(); + //console.log(data); + const Items = data.map((val) => this.produto(val)); + console.log(Items); + } } -- 2.34.1 From 007cf8b13cd36f9dd9390d2ea4bdb0b0d371ed05 Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 14 Dec 2022 11:43:09 -0300 Subject: [PATCH 06/22] feat(footer):Adicionado as imagens do footer --- checkout/src/arquivos/js/components/Footer.js | 34 +++++++++++++++++-- checkout/src/arquivos/js/components/Header.js | 1 + 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index a026ccc..ead43b8 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -11,12 +11,18 @@ export default class Footer { await this.pegarInfo( "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" ); + await this.renderIconCreditCards(); + await this.renderIconVtexPci(); + await this.renderIconsDeveloped(); } 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.footerIconsCreditCards = await waitElement(".footerCheckout__payments"); + this.footerIconVtexPci = await waitElement(".footerCheckout__vtexpci"); + this.footerIconsDeveloped = await waitElement(".footerCheckout__developedBy"); } onUpdate() { @@ -40,19 +46,41 @@ export default class Footer { slidesToScroll: 1, }); } - produto(data) { + produtos(data) { return { imagem: data["items"][0]["images"][0]["imageUrl"], nome: data["productName"], tamanho: data["items"].map((val) => val["name"]), }; } - async pegarInfo(url, tratamento) { + + async pegarInfo(url) { const response = await fetch(url); //console.log(response); const data = await response.json(); //console.log(data); - const Items = data.map((val) => this.produto(val)); + const Items = data.map((val) => this.produtos(val)); console.log(Items); } + + renderIconCreditCards() { + this.footerIconsCreditCards.innerHTML = ` + + + + + + + `; + } + + renderIconVtexPci() { + this.footerIconVtexPci.innerHTML = ``; + } + + renderIconsDeveloped() { + this.footerIconsDeveloped.innerHTML = ` +
  • Powered By
    • +
  • Developed By
    • `; + } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 35a3bac..8c71127 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -22,6 +22,7 @@ export default class Header { });*/ this.header = await waitElement(".headerCheckout"); this.progressBar = await waitElement("#progressBar"); + this.footerIconsCreditCard = await waitElement(".footerCheckout__payments"); } progressBarHTML() { if (this.progressBar && window.innerWidth > 1024) { -- 2.34.1 From 98efe6486d15d8fe5cd9d940f38f1780b282cca5 Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 14 Dec 2022 18:26:51 -0300 Subject: [PATCH 07/22] feat(footer): Alinhar o footer --- checkout/src/arquivos/js/components/Footer.js | 20 ++++++------- checkout/src/arquivos/js/components/Header.js | 5 ++-- .../src/arquivos/sass/partials/_footer.scss | 29 +++++++++++++++++-- 3 files changed, 40 insertions(+), 14 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ead43b8..00b47af 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -65,22 +65,22 @@ export default class Footer { renderIconCreditCards() { this.footerIconsCreditCards.innerHTML = ` - - - - - - - `; + + + + + + + `; } renderIconVtexPci() { - this.footerIconVtexPci.innerHTML = ``; + this.footerIconVtexPci.innerHTML = ``; } renderIconsDeveloped() { this.footerIconsDeveloped.innerHTML = ` -
  • Powered By
    • -
  • Developed By
    • `; +
  • Powered By
    • +
  • Developed By
    • `; } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 8c71127..fd2d3fb 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -22,7 +22,6 @@ export default class Header { });*/ this.header = await waitElement(".headerCheckout"); this.progressBar = await waitElement("#progressBar"); - this.footerIconsCreditCard = await waitElement(".footerCheckout__payments"); } progressBarHTML() { if (this.progressBar && window.innerWidth > 1024) { @@ -33,7 +32,9 @@ export default class Header {

  • Dados Pessoais

    • -
  • Pagamento

    • + +
  • +

    Pagamento

    • `; } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..fe04cdd 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,5 +1,8 @@ /* _footer.scss */ .footerCheckout { + width: 100%; + display: flex; + flex-direction: column; border-top: none; color: $color-gray2; @@ -8,7 +11,10 @@ display: flex; justify-content: space-between; } - + .container { + display: flex; + flex-direction: row; + } &__address { color: $color-gray2; font-family: $font-family; @@ -26,11 +32,13 @@ } &__stamps { + width: 31.56%; align-items: center; display: flex; justify-self: center; list-style: none; - + flex-direction: row; + margin: 0; @include mq(md, max) { align-self: center; margin-bottom: 12px; @@ -43,9 +51,20 @@ margin: 0 8px; width: 1px; } + &__payments { + display: flex; + flex-direction: row; + } + .IconCredImg { + width: 12.25%; + } + .IconVtexImg { + width: 87%; + } } &__developedBy { + width: 18.6%; align-items: center; display: flex; list-style-type: none; @@ -69,6 +88,12 @@ span { margin-right: 8px; } + .iconDevV { + width: 19.65%; + } + .iconDeveLM3 { + width: 15.65%; + } } } } -- 2.34.1 From 1ee14528ee00a89aaaf426c3d701766a2c672ddc Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 14 Dec 2022 19:31:12 -0300 Subject: [PATCH 08/22] fix: Cosertando o css header --- checkout/src/arquivos/js/checkout.js | 3 ++- checkout/src/arquivos/js/components/Body.js | 16 +++++++++++++ checkout/src/arquivos/sass/checkout.scss | 1 + .../src/arquivos/sass/partials/_body.scss | 11 +++++++++ .../src/arquivos/sass/partials/_footer.scss | 2 ++ .../src/arquivos/sass/partials/_header.scss | 24 ++++++++++++++----- 6 files changed, 50 insertions(+), 7 deletions(-) create mode 100644 checkout/src/arquivos/js/components/Body.js create mode 100644 checkout/src/arquivos/sass/partials/_body.scss diff --git a/checkout/src/arquivos/js/checkout.js b/checkout/src/arquivos/js/checkout.js index c8162e9..063678e 100644 --- a/checkout/src/arquivos/js/checkout.js +++ b/checkout/src/arquivos/js/checkout.js @@ -2,11 +2,12 @@ import CheckoutUI from "./components/CheckoutUI"; import { Container } from "m3-utils"; import "slick-carousel"; import Header from "./components/Header"; +import Body from "./components/Body"; import Footer from "./components/Footer"; const m3Checkout = new Container({ appName: "m3-checkout", - components: [CheckoutUI, Header, Footer], + components: [CheckoutUI, Header, Body, Footer], }); m3Checkout.start(); diff --git a/checkout/src/arquivos/js/components/Body.js b/checkout/src/arquivos/js/components/Body.js new file mode 100644 index 0000000..4378375 --- /dev/null +++ b/checkout/src/arquivos/js/components/Body.js @@ -0,0 +1,16 @@ +export default class Body { + constructor() { + this.init(); + } + + async init() { + await this.selectors(); + } + async selectors() { + this.titleCart = await waitElement(".empty-cart-title"); + } + + trocaTitle() { + this.titleCart.innerHTML = ``; + } +} diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..9ca7fc6 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -1,5 +1,6 @@ @import "./utils/all"; @import "./lib/slick"; @import "./partials/header"; +@import "./partials/body"; @import "./partials/footer"; @import "./checkout/checkout.scss"; diff --git a/checkout/src/arquivos/sass/partials/_body.scss b/checkout/src/arquivos/sass/partials/_body.scss new file mode 100644 index 0000000..70e1b3f --- /dev/null +++ b/checkout/src/arquivos/sass/partials/_body.scss @@ -0,0 +1,11 @@ +/*#checkoutMainContainer { + width: 100%; + transform: translateY(-50%); + height: 1px; + border-bottom: 1px solid #000000; +}*/ +.container-cart { + #cart-title { + display: none !important; + } +} diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index fe04cdd..2e4d3be 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -14,6 +14,8 @@ .container { display: flex; flex-direction: row; + align-items: center; + justify-content: center; } &__address { color: $color-gray2; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 4ccb577..baa4a83 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,6 +1,14 @@ /* _header.scss */ .headerCheckout { .container { + &::after { + margin-top: 30px; + width: 100%; + transform: translateY(-50%); + height: 1px; + border-bottom: 1px solid #000000; + } + width: auto !important; #progressBar { width: 446px; @@ -60,25 +68,26 @@ } li .progress-bar-line-1 { position: absolute; - left: 25%; + left: 57%; transform: translateY(-50%); - bottom: 5px; - width: 100%; + bottom: 4px; + width: 212%; height: 1px; border-top: 1px solid #000; } li .progress-bar-line-2 { position: absolute; - right: 21%; + right: 59%; transform: translateY(-50%); bottom: 5px; - width: 100%; + width: 242%; height: 1px; border-top: 1px solid #000; } } } &__wrapper { + margin-top: 30px; align-items: center; display: flex; justify-content: space-between; @@ -92,9 +101,11 @@ } &__safeBuy { + display: flex; span { align-items: center; display: flex; + flex-direction: row; text-transform: uppercase; font-family: $font-family; font-style: normal; @@ -104,7 +115,8 @@ color: $color-gray; } - i { + img { + width: 10%; margin-right: 8px; } } -- 2.34.1 From 710c9ad6b47e8002f192593b42a2de44b051e825 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 15 Dec 2022 15:14:37 -0300 Subject: [PATCH 09/22] feat(body): Trocando as mensagens do body --- checkout/src/arquivos/js/checkout.js | 3 +-- checkout/src/arquivos/js/components/Body.js | 16 ---------------- checkout/src/arquivos/js/components/Footer.js | 11 +++++++++++ checkout/src/arquivos/sass/checkout.scss | 1 - checkout/src/arquivos/sass/partials/_body.scss | 11 ----------- checkout/src/arquivos/sass/partials/_footer.scss | 5 +++++ 6 files changed, 17 insertions(+), 30 deletions(-) delete mode 100644 checkout/src/arquivos/js/components/Body.js delete mode 100644 checkout/src/arquivos/sass/partials/_body.scss diff --git a/checkout/src/arquivos/js/checkout.js b/checkout/src/arquivos/js/checkout.js index 063678e..c8162e9 100644 --- a/checkout/src/arquivos/js/checkout.js +++ b/checkout/src/arquivos/js/checkout.js @@ -2,12 +2,11 @@ import CheckoutUI from "./components/CheckoutUI"; import { Container } from "m3-utils"; import "slick-carousel"; import Header from "./components/Header"; -import Body from "./components/Body"; import Footer from "./components/Footer"; const m3Checkout = new Container({ appName: "m3-checkout", - components: [CheckoutUI, Header, Body, Footer], + components: [CheckoutUI, Header, Footer], }); m3Checkout.start(); diff --git a/checkout/src/arquivos/js/components/Body.js b/checkout/src/arquivos/js/components/Body.js deleted file mode 100644 index 4378375..0000000 --- a/checkout/src/arquivos/js/components/Body.js +++ /dev/null @@ -1,16 +0,0 @@ -export default class Body { - constructor() { - this.init(); - } - - async init() { - await this.selectors(); - } - async selectors() { - this.titleCart = await waitElement(".empty-cart-title"); - } - - trocaTitle() { - this.titleCart.innerHTML = ``; - } -} diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 00b47af..255832f 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -14,6 +14,7 @@ export default class Footer { await this.renderIconCreditCards(); await this.renderIconVtexPci(); await this.renderIconsDeveloped(); + this.trocaTitle(); } async selectors() { @@ -23,6 +24,9 @@ export default class Footer { this.footerIconsCreditCards = await waitElement(".footerCheckout__payments"); this.footerIconVtexPci = await waitElement(".footerCheckout__vtexpci"); this.footerIconsDeveloped = await waitElement(".footerCheckout__developedBy"); + this.titleCart = await waitElement(".empty-cart-title"); + this.subTitleCart = await waitElement(".empty-cart-message"); + this.buttonCart = await waitElement("#cart-choose-products"); } onUpdate() { @@ -83,4 +87,11 @@ export default class Footer {
  • Powered By
  • Developed By
    • `; } + + trocaTitle() { + const tituloCart = document.querySelector(".empty-cart-title"); + tituloCart.innerHTML = `

    SEU CARRINHO ESTÁ VAZIO

    `; + this.subTitleCart.innerHTML = `

    `; + this.buttonCart.innerHTML = `Continuar comprando`; + } } diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 9ca7fc6..771070c 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -1,6 +1,5 @@ @import "./utils/all"; @import "./lib/slick"; @import "./partials/header"; -@import "./partials/body"; @import "./partials/footer"; @import "./checkout/checkout.scss"; diff --git a/checkout/src/arquivos/sass/partials/_body.scss b/checkout/src/arquivos/sass/partials/_body.scss deleted file mode 100644 index 70e1b3f..0000000 --- a/checkout/src/arquivos/sass/partials/_body.scss +++ /dev/null @@ -1,11 +0,0 @@ -/*#checkoutMainContainer { - width: 100%; - transform: translateY(-50%); - height: 1px; - border-bottom: 1px solid #000000; -}*/ -.container-cart { - #cart-title { - display: none !important; - } -} diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 2e4d3be..579e12b 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -99,3 +99,8 @@ } } } +.container-cart { + #cart-title { + display: none !important; + } +} -- 2.34.1 From 25106c689cc2b9bcb851e8addeb61850a8007659 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 15 Dec 2022 16:58:27 -0300 Subject: [PATCH 10/22] feat(body): Adicionando body estilizado --- .../src/arquivos/sass/partials/_footer.scss | 27 +++++++++++++++++++ .../src/arquivos/sass/partials/_header.scss | 14 +++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 24 ++++++++--------- 3 files changed, 49 insertions(+), 16 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 579e12b..35d6a94 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -99,8 +99,35 @@ } } } + +/*CSS Body*/ .container-cart { #cart-title { display: none !important; } + + .empty-cart-content { + display: flex; + margin-top: 170px; + .empty-cart-title { + h2 { + font-family: $font-family; + font-weight: 700; + font-size: 24px; + line-height: 33px; + } + } + .empty-cart-links { + #cart-choose-products { + margin: 0; + padding: 16px 64px; + background-color: $color-white; + color: $color-black; + border: 1px solid #000; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 14px; + } + } + } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index baa4a83..5a7de07 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,15 +1,19 @@ /* _header.scss */ .headerCheckout { + margin: 0 !important; + width: 100% !important; .container { + margin: 0 !important; + width: 100% !important; + &::after { - margin-top: 30px; + margin: 30px 0 0 0; width: 100%; transform: translateY(-50%); height: 1px; border-bottom: 1px solid #000000; } - width: auto !important; #progressBar { width: 446px; ul { @@ -94,6 +98,7 @@ } &__logo { + padding-left: 131px; img { height: 52px; width: auto; @@ -101,6 +106,7 @@ } &__safeBuy { + padding-right: 131px; display: flex; span { align-items: center; @@ -111,8 +117,8 @@ font-style: normal; font-weight: normal; font-size: 12px; - line-height: 14px; - color: $color-gray; + line-height: 16px; + color: $color-black; } img { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..ef9a0f0 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -2,7 +2,7 @@ @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; @@ -21,18 +21,18 @@ $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, + xl: 1200px, ) !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 8e255dc0fc5710607a724e409e6674de5db9c05f Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 15 Dec 2022 18:59:08 -0300 Subject: [PATCH 11/22] =?UTF-8?q?feat(body):=20Adicionando=20as=20informa?= =?UTF-8?q?=C3=A7=C3=B5es=20dos=20infocards?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 32 +++++++++++++++++++ .../src/arquivos/sass/partials/_footer.scss | 16 ++++++++-- 2 files changed, 45 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 255832f..2ebc53a 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -14,6 +14,7 @@ export default class Footer { await this.renderIconCreditCards(); await this.renderIconVtexPci(); await this.renderIconsDeveloped(); + this.trocaTitle(); } @@ -27,6 +28,7 @@ export default class Footer { this.titleCart = await waitElement(".empty-cart-title"); this.subTitleCart = await waitElement(".empty-cart-message"); this.buttonCart = await waitElement("#cart-choose-products"); + this.prateleiraInfoCards = await waitElement(".footerCheckout__prateleira"); } onUpdate() { @@ -53,6 +55,7 @@ export default class Footer { produtos(data) { return { imagem: data["items"][0]["images"][0]["imageUrl"], + link: data["link"], nome: data["productName"], tamanho: data["items"].map((val) => val["name"]), }; @@ -65,6 +68,35 @@ export default class Footer { //console.log(data); const Items = data.map((val) => this.produtos(val)); console.log(Items); + await this.renderInfoCards(Items); + } + estruturaInfoCard(items) { + let listaInfocards = ``; + for (const i of items) { + const elem = `
  • +

    ${i["nome"]}

    +
    ${this.tamanhosProdutos(i["tamanho"], i["link"])}
    + VER PRODUTO
    • `; + listaInfocards += elem; + } + return listaInfocards; + } + tamanhosProdutos(tam, link) { + let listaTamanhos = `
      `; + for (const n of tam) { + const nums = `
    • ${n}
      • `; + listaTamanhos += nums; + } + listaTamanhos += `
    `; + return listaTamanhos; + } + + async renderInfoCards(Items) { + this.prateleiraInfoCards.innerHTML = `

    Você também pode gostar:

      ${this.estruturaInfoCard( + Items + )}
    `; } renderIconCreditCards() { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 35d6a94..5e38b61 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,24 +1,29 @@ /* _footer.scss */ + .footerCheckout { - width: 100%; + margin: 0 !important; + width: 100% !important; display: flex; flex-direction: column; - border-top: none; + border-top: 1px solid #000000; color: $color-gray2; &__wrapper { align-items: center; display: flex; justify-content: space-between; + margin: 0 !important; } .container { + width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; + margin: 0 !important; } &__address { - color: $color-gray2; + color: $color-black; font-family: $font-family; font-style: normal; font-weight: normal; @@ -110,6 +115,7 @@ display: flex; margin-top: 170px; .empty-cart-title { + margin: 0 !important; h2 { font-family: $font-family; font-weight: 700; @@ -118,6 +124,7 @@ } } .empty-cart-links { + margin-top: 32px; #cart-choose-products { margin: 0; padding: 16px 64px; @@ -127,6 +134,9 @@ font-family: $font-family-secundary; font-weight: 400; font-size: 14px; + &::hover { + cursor: pointer; + } } } } -- 2.34.1 From 71bb9076eafcd17fe547ed2cbdf1210ac27a86a2 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 16 Dec 2022 13:17:18 -0300 Subject: [PATCH 12/22] =?UTF-8?q?feat(body):=20Estiliza=C3=A7=C3=A3o=20das?= =?UTF-8?q?=20prateleiras?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 16 ++--- .../src/arquivos/sass/partials/_footer.scss | 66 +++++++++++++++++++ .../src/arquivos/sass/utils/_variaveis.scss | 1 + 3 files changed, 75 insertions(+), 8 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 2ebc53a..b98206d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -74,19 +74,19 @@ export default class Footer { let listaInfocards = ``; for (const i of items) { const elem = `
  • -

    ${i["nome"]}

    -
    ${this.tamanhosProdutos(i["tamanho"], i["link"])}
    - VER PRODUTO
    • `; +

    ${ + i["nome"] + }

    + ${this.tamanhosProdutos(i["tamanho"], i["link"])} + VER PRODUTO`; listaInfocards += elem; } return listaInfocards; } tamanhosProdutos(tam, link) { - let listaTamanhos = `
      `; + let listaTamanhos = `
        `; for (const n of tam) { - const nums = `
      • ${n}
        • `; + const nums = `
      • ${n}
        • `; listaTamanhos += nums; } listaTamanhos += `
      `; @@ -94,7 +94,7 @@ export default class Footer { } async renderInfoCards(Items) { - this.prateleiraInfoCards.innerHTML = `

      Você também pode gostar:

        ${this.estruturaInfoCard( + this.prateleiraInfoCards.innerHTML = `

        Você também pode gostar:

          ${this.estruturaInfoCard( Items )}
        `; } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 5e38b61..e44f0a3 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -22,6 +22,72 @@ justify-content: center; margin: 0 !important; } + &__prateleira { + margin: 0 !important; + width: 100% !important; + display: flex; + flex-direction: column; + align-items: center; + .prateleira__subtitle { + font-size: 24px; + font-family: $font-family-secundary; + font-weight: 400; + color: #000; + line-height: 38px; + } + .infoCards { + width: 79.375%; + display: flex; + align-items: center; + .infoCard { + width: 23.81%; + height: 390px; + border: 1px solid #000; + display: flex; + flex-direction: column; + align-items: center; + &__image { + width: 100%; + object-fit: fill; + border-radius: 8px; + } + + &__text { + margin-top: 20px; + margin-bottom: 0; + font-family: $font-family; + font-size: 13px; + color: #000; + font-weight: 400; + } + + &__tamanhos { + margin-top: 20px; + + display: flex; + flex-direction: row; + list-style: none; + } + &__tamanho { + margin-right: 5px; + background-color: $color-blue-300; + border-radius: 8px; + &__numero { + display: flex; + justify-content: center; + } + &__link { + color: $color-white; + margin: 5px; + font-family: $font-family; + font-size: 13px; + font-weight: 700; + } + } + } + } + } + &__address { color: $color-black; font-family: $font-family; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index ef9a0f0..dc2f354 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-300: #00c8ff; $color-green: #4caf50; -- 2.34.1 From 194d9ddbc62dd37e903d9f5ad766a9b7cbbdd29f Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 16 Dec 2022 18:19:55 -0300 Subject: [PATCH 13/22] feat(body): Estilizando o carrinho --- .../src/arquivos/sass/partials/_footer.scss | 44 +++++++++++++++---- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index e44f0a3..f1295bd 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -12,7 +12,7 @@ align-items: center; display: flex; justify-content: space-between; - margin: 0 !important; + margin: 50px 0 0 0 !important; } .container { width: 100%; @@ -36,54 +36,82 @@ line-height: 38px; } .infoCards { - width: 79.375%; + width: 100%; display: flex; align-items: center; + gap: 16px; .infoCard { - width: 23.81%; + width: 242px; height: 390px; border: 1px solid #000; display: flex; flex-direction: column; align-items: center; &__image { - width: 100%; - object-fit: fill; + max-width: 100%; + height: 242px; + object-fit: cover; border-radius: 8px; } &__text { + display: flex; + width: 100%; margin-top: 20px; margin-bottom: 0; font-family: $font-family; font-size: 13px; color: #000; font-weight: 400; + justify-content: center; } &__tamanhos { margin-top: 20px; - + width: 100%; display: flex; flex-direction: row; list-style: none; + margin-left: 0%; + gap: 5px; + justify-content: center; } &__tamanho { - margin-right: 5px; background-color: $color-blue-300; border-radius: 8px; + height: 28px; + display: flex; + justify-content: center; &__numero { display: flex; justify-content: center; } &__link { color: $color-white; - margin: 5px; + margin: 4px; font-family: $font-family; font-size: 13px; font-weight: 700; } } + &__link { + padding: 12px 0; + display: flex; + justify-content: center; + width: 242px; + height: 42px; + margin-top: 32px; + font-family: $font-family; + font-weight: 700; + font-size: 13px; + line-height: 18px; + color: $color-white; + background-color: $color-blue-300; + border-radius: 8px; + &::hoover { + cursor: pointer; + } + } } } } -- 2.34.1 From e225f3d8ea085b5342c878c2e1ff6150d5a43227 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 16 Dec 2022 20:11:04 -0300 Subject: [PATCH 14/22] feat(body): Trocando os estilos do carrinho --- checkout/src/arquivos/js/components/Footer.js | 10 + .../sass/checkout/_checkout-carrinho.scss | 1199 +++++++++-------- .../src/arquivos/sass/partials/_footer.scss | 22 +- 3 files changed, 633 insertions(+), 598 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index b98206d..df64513 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -16,6 +16,8 @@ export default class Footer { await this.renderIconsDeveloped(); this.trocaTitle(); + this.trocaFrete(); + this.trocaUnidade(); } async selectors() { @@ -29,6 +31,8 @@ export default class Footer { this.subTitleCart = await waitElement(".empty-cart-message"); this.buttonCart = await waitElement("#cart-choose-products"); this.prateleiraInfoCards = await waitElement(".footerCheckout__prateleira"); + this.freteCarrinho = await waitElement(".shipping-date"); + this.unidadeCarrinho = await waitElement(".product-price"); } onUpdate() { @@ -126,4 +130,10 @@ export default class Footer { this.subTitleCart.innerHTML = `

        `; this.buttonCart.innerHTML = `Continuar comprando`; } + trocaFrete() { + this.freteCarrinho.innerHTML = `Frete`; + } + trocaUnidade() { + this.unidadeCarrinho.innerHTML = `Unidade`; + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..65e5ce2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -111,10 +111,11 @@ } th { + font-family: $font-family-secundary; color: $color-black; padding: 0 0 16px; font-style: normal; - font-weight: bold; + font-weight: normal; font-size: 14px; line-height: 16px; @@ -147,276 +148,553 @@ } } - .product-name { - padding-right: 0; + @include mq(lg, max) { + width: 250px; + } - @include mq(lg, max) { - width: 250px; + a { + color: #000; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + transition: ease-in 0.22s all; + + &:hover { + color: darken($color-black, 10); + text-decoration: none; } - a { - color: $color-blue; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - transition: ease-in 0.22s all; - - &:hover { - color: darken($color-blue, 10); - text-decoration: none; - } - - @media (max-width: 490px) { - margin-left: 23px; - } - } - - .brand, - .seller { - display: none !important; + @media (max-width: 490px) { + margin-left: 23px; } } - td.shipping-date { + .brand, + .seller { + display: none !important; + } + } + + td.shipping-date { + color: $color-gray2; + font-size: 12px; + line-height: 14px; + + @include mq(md, max) { + display: none; + } + } + + .product-price { + min-width: 100px; + @include mq(md, max) { + min-width: 78px; + } + @media (max-width: 490px) { + position: absolute; + bottom: 0; + right: 0; + } + + span.list-price { color: $color-gray2; font-size: 12px; line-height: 14px; - - @include mq(md, max) { - display: none; - } - } - - .product-price { - min-width: 100px; - @include mq(md, max) { - min-width: 78px; - } - @media (max-width: 490px) { - position: absolute; - bottom: 0; - right: 0; - } - - span.list-price { - color: $color-gray2; + text-decoration-line: line-through; + @include mq(sm, max) { font-size: 12px; line-height: 14px; - text-decoration-line: line-through; - @include mq(sm, max) { - font-size: 12px; - line-height: 14px; - } - - .old-product-price-label { - text-transform: lowercase; - } - } - } - - td.quantity { - align-items: center; - border: 1px solid $color-gray3; - border-radius: 0; - box-sizing: border-box; - display: flex; - justify-content: center; - margin: 6px auto 0; - max-height: 38px; - max-width: 118px; - padding: 0; - width: max-content !important; - - @media (max-width: 490px) { - margin-left: 84px !important; } - input { - background-color: $color-white; - border: 1px solid $color-gray3; - border-radius: 0; - border-width: 0 1px; - display: block; - max-height: 38px; - margin: 0 !important; - padding: 8px 0; - width: 38px; - color: $color-gray2; - box-shadow: none; - - @include mq(lg, max) { - width: 24px !important; - } - } - - .icon-plus-sign, - .icon-minus-sign { - &::before { - color: $color-black; - display: block; - font-weight: 500; - padding: 1px 12px; - } - } - - .icon-minus-sign { - &:before { - content: "-"; - font-size: 16px; - } - } - - .icon-plus-sign { - &:before { - content: "+"; - font-size: 14px; - } - } - - .item-quantity-change { - @media (max-width: 979px) and (min-width: 768px) { - position: inherit; - bottom: inherit; - left: inherit; - height: inherit; - width: inherit; - top: inherit; - } - - @media (max-width: 490px) { - padding: 0; - } - } - } - - .quantity-price, - .best-price { - .icon-question-sign { - display: none; - } - span { - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 16px; - color: $color-black; - } - } - - .quantity-price { - @include mq(md, max) { - display: none; - } - } - - .item-remove { - @media (max-width: 490px) { - top: 0; - } - .icon::before { - color: $color-gray4; - font-size: 15px; - - @include mq(md, max) { - font-size: 18px; - } - } - } - - .item-unavailable-message { - background-color: #d8c8ac; - color: $color-white; - - .icon-warning-sign { - color: #bb4f4f; - } - - .top-arrow { - border-bottom-color: #d8c8ac; + .old-product-price-label { + text-transform: lowercase; } } } - .summary { - .cart-more-options { - margin: 0; - width: max-content; + td.quantity { + align-items: center; + border: 1px solid $color-gray3; + border-radius: 0; + box-sizing: border-box; + display: flex; + justify-content: center; + margin: 6px auto 0; + max-height: 38px; + max-width: 118px; + padding: 0; + width: max-content !important; - .srp-container { - padding: 0 0 0 10px; + @media (max-width: 490px) { + margin-left: 84px !important; + } + + input { + background-color: $color-white; + border: 1px solid $color-gray3; + border-radius: 0; + border-width: 0 1px; + display: block; + max-height: 38px; + margin: 0 !important; + padding: 8px 0; + width: 38px; + font-family: $font-family-secundary; + color: $color-gray2; + box-shadow: none; + + @include mq(lg, max) { + width: 24px !important; + } + } + + .icon-plus-sign, + .icon-minus-sign { + &::before { + color: $color-black; + display: block; + font-weight: 500; + padding: 1px 12px; + } + } + + .icon-minus-sign { + &:before { + color: $color-blue-300; + font-size: 20px; + } + } + + .icon-plus-sign { + &:before { + font-size: 20px; + color: $color-blue-300; + } + } + + .item-quantity-change { + @media (max-width: 979px) and (min-width: 768px) { + position: inherit; + bottom: inherit; + left: inherit; + height: inherit; + width: inherit; + top: inherit; + } + + @media (max-width: 490px) { + padding: 0; + } + } + } + + .quantity-price, + .best-price { + .icon-question-sign { + display: none; + } + span { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-black; + text-transform: lowercase; + } + .total-selling-price { + text-transform: uppercase; + } + } + + .quantity-price { + @include mq(md, max) { + display: none; + } + } + + .item-remove { + @media (max-width: 490px) { + top: 0; + } + .icon::before { + color: $color-gray4; + font-size: 15px; + + @include mq(md, max) { + font-size: 18px; + } + } + } + + .item-unavailable-message { + background-color: #d8c8ac; + color: $color-white; + + .icon-warning-sign { + color: #bb4f4f; + } + + .top-arrow { + border-bottom-color: #d8c8ac; + } + } +} + +.summary { + .cart-more-options { + margin: 0; + width: max-content; + + .srp-container { + padding: 0 0 0 10px; + + @include mq(md, max) { + padding: 0 16px; + } + + .srp-main-title { + margin: 32px 0 12px; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 28px; + color: $color-gray2; @include mq(md, max) { - padding: 0 16px; - } - - .srp-main-title { - margin: 32px 0 12px; - font-style: normal; - font-weight: normal; - font-size: 24px; - line-height: 28px; - color: $color-gray2; - - @include mq(md, max) { - margin-top: 0; - } - } - - .srp-description { - color: $color-gray2; - font-size: 12px; - line-height: 18px; - margin: 0 0 12px; - } - - button.shp-open-options { - background-color: $color-gray5; - border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; - letter-spacing: 0.05em; - line-height: 19px; - font-weight: 500; - outline: none; - padding: 12px 40px; - transition: all 0.2s linear; - - &:hover { - background-color: lighten($color-gray5, 5); - } - - &:active { - background-color: darken($color-gray5, 5); - } + margin-top: 0; } } - .srp-data { - width: 280px; + .srp-description { + color: $color-gray2; + font-size: 12px; + line-height: 18px; + margin: 0 0 12px; + } - @include mq(cstm, max) { - width: calc(100vw - 32px); + button.shp-open-options { + background-color: $color-gray5; + border: none; + border-radius: 5px; + color: $color-gray2; + font-size: 16px; + letter-spacing: 0.05em; + line-height: 19px; + font-weight: 500; + outline: none; + padding: 12px 40px; + transition: all 0.2s linear; + + &:hover { + background-color: lighten($color-gray5, 5); } - @include mq(md, max) { - margin-bottom: 40px; + &:active { + background-color: darken($color-gray5, 5); + } + } + } + + .srp-data { + width: 280px; + + @include mq(cstm, max) { + width: calc(100vw - 32px); + } + + @include mq(md, max) { + margin-bottom: 40px; + } + + .srp-pickup-my-location__button { + background-color: $color-black; + border: none; + border-radius: 5px; + color: $color-white; + outline: none; + width: 100%; + + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + letter-spacing: 0.05em; + + &:hover { + background-color: lighten($color-black, 5); } - .srp-pickup-my-location__button { + &:active { + background-color: darken($color-black, 5); + } + } + } + + .srp-toggle { + margin: 0 0 34px; + + &__wrapper { + background-color: $color-white; + border-radius: 100px; + width: 100%; + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + } + + &__current { + border: 1px solid $color-blue; + border-radius: 100px; + } + + .blue { + color: $color-blue; + } + + label { + width: 50%; + + &:active { + background-color: #f0f0f0; + } + } + } + + .srp-postal-code { + .ship-postalCode { + label { + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $color-black; + margin-bottom: 12px; + } + + input { + border: 1px solid $color-gray3; + border-radius: 5px; + box-shadow: none; + color: $color-gray3; + font-size: 12px; + height: 36px; + padding: 12px 8px; + width: 172px; + } + + & ~ button { background-color: $color-black; border: none; border-radius: 5px; color: $color-white; + font-size: 12px; + height: 36px; + letter-spacing: 1px; outline: none; - width: 100%; + position: absolute; + right: -150px; + top: 36px; + transition: all 0.2s linear; + width: 96px; + text-transform: uppercase; + &:hover { + background-color: lighten($color-black, 5); + } + + &:active { + background-color: darken($color-black, 5); + } + } + + small a { + font-family: $font-family; font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - letter-spacing: 0.05em; + font-weight: normal; + font-size: 10px; + line-height: 12px; + color: $color-blue; + margin-top: 7px; + } + + span.help.error { + color: red; + font-size: 12px; + position: absolute; + left: 0; + width: 100%; + top: 17px; + } + } + } + + .srp-result { + strong, + .srp-items { + color: #303030; + font-weight: 400; + font-size: 14px; + } + + #deliver-at-text a { + color: #303030; + font-size: 16px; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + + .srp-shipping-current-single { + border: 1px solid $color-gray4; + border-radius: 0; + color: #303030; + margin: 16px 0 0; + padding: 4px 12px; + + svg path { + fill: #d8c8ac; + } + } + + .srp-delivery-select { + border: 1px solid $color-gray4; + } + + .srp-delivery-select-container { + border: 1px solid $color-gray4; + border-radius: 0; + + .srp-shipping-current-many { + &__name { + color: #303030; + } + + &__sla { + color: #7d7d7d; + } + + &__price { + color: #7d7d7d; + font-weight: 500; + } + + &__arrow svg { + fill: $color-gray4; + } + } + } + } + } + + &-totalizers { + padding: 0; + width: 346px; + + .coupon-data { + #cart-link-coupon-add { + text-decoration: none; + + font-family: $font-family-secundary; + &:hover { + text-decoration: underline; + cursor: pointer; + } + } + span { + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: #000; + text-decoration: none; + } + } + + @include mq(md, max) { + padding: 0 16px; + width: 100%; + } + + .coupon-column { + .coupon { + margin: 0; + } + + .link-coupon-add { + color: #303030; + font-size: 12px; + text-decoration: underline; + } + + .coupon-label label { + margin-bottom: 12px; + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $color-gray2; + cursor: none; + } + + .coupon-fields { + margin-bottom: 32px; + + @include mq(sm, max) { + span { + display: flex; + flex-direction: row; + justify-content: space-between; + i { + position: absolute; + right: 91px; + opacity: 1; + } + } + } + + input { + border: 2px solid $color-gray3; + border-radius: 5px; + box-shadow: none; + color: $color-gray4; + font-size: 12px; + height: 34px; + padding: 0 12px; + max-width: 160px; + + @include mq(sm, max) { + max-width: 100%; + width: 100%; + } + } + + button { + background: $color-black; + border: none; + border-radius: 5px; + color: $color-white; + font-size: 12px; + height: 36px; + letter-spacing: 1px; + margin-left: 6px; + outline: none; + transition: all 0.2s linear; + width: 94px; + text-transform: uppercase; + + @include mq(md, max) { + width: 138px; + } &:hover { background-color: lighten($color-black, 5); @@ -427,386 +705,113 @@ } } } + } - .srp-toggle { - margin: 0 0 34px; + .accordion-group { + tr { + border-color: #e5e5e5; - &__wrapper { - background-color: $color-white; - border-radius: 100px; - width: 100%; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 16px; - text-transform: uppercase; - } - - &__current { - border: 1px solid $color-blue; - border-radius: 100px; - } - - .blue { - color: $color-blue; - } - - label { - width: 50%; - - &:active { - background-color: #f0f0f0; + td { + &.empty { + display: none; } - } - } - .srp-postal-code { - .ship-postalCode { - label { - font-family: $font-family; + &.info, + &.monetary { font-style: normal; font-weight: normal; - font-size: 12px; - line-height: 14px; + font-size: 14px; + line-height: 16px; color: $color-black; - margin-bottom: 12px; + padding: 12px 0; } - input { - border: 1px solid $color-gray3; - border-radius: 5px; - box-shadow: none; - color: $color-gray3; - font-size: 12px; - height: 36px; - padding: 12px 8px; - width: 172px; + &.info { + text-align: left; } - & ~ button { - background-color: $color-black; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - outline: none; - position: absolute; - right: -150px; - top: 36px; - transition: all 0.2s linear; - width: 96px; - text-transform: uppercase; - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 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; - } - - span.help.error { - color: red; - font-size: 12px; - position: absolute; - left: 0; - width: 100%; - top: 17px; + &.monetary { + text-align: right; } } } - .srp-result { - strong, - .srp-items { - color: #303030; - font-weight: 400; - font-size: 14px; - } - - #deliver-at-text a { - color: #303030; - font-size: 16px; - font-weight: 500; - - &:hover { - text-decoration: underline; - } - } - - .srp-shipping-current-single { - border: 1px solid $color-gray4; - border-radius: 0; - color: #303030; - margin: 16px 0 0; - padding: 4px 12px; - - svg path { - fill: #d8c8ac; - } - } - - .srp-delivery-select { - border: 1px solid $color-gray4; - } - - .srp-delivery-select-container { - border: 1px solid $color-gray4; - border-radius: 0; - - .srp-shipping-current-many { - &__name { - color: #303030; - } - - &__sla { - color: #7d7d7d; - } - - &__price { - color: #7d7d7d; - font-weight: 500; - } - - &__arrow svg { - fill: $color-gray4; - } - } - } - } - } - - &-totalizers { - padding: 0; - width: 346px; - - .coupon-data { - #cart-link-coupon-add { - text-decoration: none; - &:hover { - text-decoration: underline; - cursor: pointer; - } - } - span { - font-family: $font-family; + tfoot { + td.info, + td.monetary { font-style: normal; font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-blue; - text-decoration: none; - } - } - - @include mq(md, max) { - padding: 0 16px; - width: 100%; - } - - .coupon-column { - .coupon { - margin: 0; - } - - .link-coupon-add { - color: #303030; - font-size: 12px; - text-decoration: underline; - } - - .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-gray2; - cursor: none; - } - - .coupon-fields { - margin-bottom: 32px; - - @include mq(sm, max) { - span { - display: flex; - flex-direction: row; - justify-content: space-between; - i { - position: absolute; - right: 91px; - opacity: 1; - } - } - } - - input { - border: 2px solid $color-gray3; - border-radius: 5px; - box-shadow: none; - color: $color-gray4; - font-size: 12px; - height: 34px; - padding: 0 12px; - max-width: 160px; - - @include mq(sm, max) { - max-width: 100%; - width: 100%; - } - } - - button { - background: $color-black; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; - height: 36px; - letter-spacing: 1px; - margin-left: 6px; - outline: none; - transition: all 0.2s linear; - width: 94px; - text-transform: uppercase; - - @include mq(md, max) { - width: 138px; - } - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } - } - } - } - - .accordion-group { - tr { - border-color: #e5e5e5; - - td { - &.empty { - display: none; - } - - &.info, - &.monetary { - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 16px; - color: $color-black; - padding: 12px 0; - } - - &.info { - text-align: left; - } - - &.monetary { - text-align: right; - } - } - } - - tfoot { - td.info, - td.monetary { - font-style: normal; - font-weight: normal; - font-size: 18px; - line-height: 21px; - color: $color-black; - } - } - } - } - } - - .cart-links-bottom { - display: flex; - flex-direction: column; - width: 343px; - - @include mq(md, max) { - padding: 0 16px; - width: calc(100% - 32px); - float: none; - margin-bottom: 50px; - } - - @include mq(md, min) { - margin: 0; - padding-bottom: 50px; - } - - .link-choose-more-products-wrapper { - display: block; - text-align: center; - margin-bottom: 16px; - - @include mq(md, max) { - margin-bottom: 0px; - } - - a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 14px; - color: $color-blue; - } - } - - .btn-place-order-wrapper { - a { - background: $color-green; - border: none; - border-radius: 5px; - display: block; - font-size: 0; - transition: ease-in 0.22s all; - padding: 12px 19px; - - &:hover { - background-color: darken($color-green, 5); - } - - &:after { - content: "finalizar compra"; - font-family: $font-family; - font-weight: 500; - font-size: 13px; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; - vertical-align: middle; - line-height: 19px; - text-shadow: none; + font-size: 18px; + line-height: 21px; + color: $color-black; } } } } } + +.cart-links-bottom { + display: flex; + flex-direction: column; + width: 343px; + + @include mq(md, max) { + padding: 0 16px; + width: calc(100% - 32px); + float: none; + margin-bottom: 50px; + } + + @include mq(md, min) { + margin: 0; + padding-bottom: 50px; + } + + .link-choose-more-products-wrapper { + display: block; + text-align: center; + margin-bottom: 16px; + + @include mq(md, max) { + margin-bottom: 0px; + } + + a { + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: $color-blue; + } + } + + .btn-place-order-wrapper { + a { + background: $color-green; + border: none; + border-radius: 5px; + display: block; + font-size: 0; + transition: ease-in 0.22s all; + padding: 12px 19px; + + &:hover { + background-color: darken($color-green, 5); + } + + &:after { + content: "finalizar compra"; + font-family: $font-family; + font-weight: 500; + font-size: 13px; + letter-spacing: 0.05em; + color: $color-white; + text-transform: uppercase; + vertical-align: middle; + line-height: 19px; + text-shadow: none; + } + } + } +} diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index f1295bd..b1e7515 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -198,7 +198,27 @@ } } } - +/*Cart*/ +.cart-items th { + font-family: $font-family-secundary !important; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-black; +} +.cart-template .cart-items td.quantity .icon-plus-sign:before { + color: $color-blue-300; +} +/* +.product { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-black; +}*/ /*CSS Body*/ .container-cart { #cart-title { -- 2.34.1 From d27ef7a97c6e4edf96de65d1ce8dfb309829f944 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 16 Dec 2022 20:37:30 -0300 Subject: [PATCH 15/22] feat(body): Adicionando novos estilos no carrinho --- .../sass/checkout/_checkout-carrinho.scss | 20 ++++++++++++------- .../src/arquivos/sass/utils/_variaveis.scss | 2 +- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 65e5ce2..6578a0b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -355,12 +355,13 @@ } .srp-main-title { + font-family: $font-family; margin: 32px 0 12px; font-style: normal; font-weight: normal; font-size: 24px; line-height: 28px; - color: $color-gray2; + color: $color-black-100; @include mq(md, max) { margin-top: 0; @@ -718,6 +719,7 @@ &.info, &.monetary { + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 14px; @@ -739,10 +741,12 @@ tfoot { td.info, td.monetary { + font-family: $font-family; font-style: normal; font-weight: normal; font-size: 18px; line-height: 21px; + font-weight: 700; color: $color-black; } } @@ -777,18 +781,18 @@ } a { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black-100; } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue-300; border: none; border-radius: 5px; display: block; @@ -798,15 +802,17 @@ &:hover { background-color: darken($color-green, 5); + cursor: pointer; } &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; - font-size: 13px; + font-weight: 700; + font-size: 14px; + font-style: normal; letter-spacing: 0.05em; - color: $color-white; + color: $color-black-100; 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 dc2f354..6fc70be 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,7 +6,7 @@ $font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; - +$color-black-100: #000; $color-white: #fff; $color-gray: #6c6c6c; -- 2.34.1 From 740408faef618ae8b561e192be67c80f229dec6e Mon Sep 17 00:00:00 2001 From: Savio Date: Sat, 17 Dec 2022 01:19:39 -0300 Subject: [PATCH 16/22] feat(body): Adicionando estilos no Cupom --- checkout/src/arquivos/js/components/Footer.js | 12 +++--- .../sass/checkout/_checkout-carrinho.scss | 41 +++++++++++++------ 2 files changed, 35 insertions(+), 18 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index df64513..9431661 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -15,9 +15,9 @@ export default class Footer { await this.renderIconVtexPci(); await this.renderIconsDeveloped(); - this.trocaTitle(); - this.trocaFrete(); - this.trocaUnidade(); + await this.trocaTitle(); + await this.trocaFrete(); + await this.trocaUnidade(); } async selectors() { @@ -124,16 +124,16 @@ export default class Footer {
      • Developed By
        • `; } - trocaTitle() { + async trocaTitle() { const tituloCart = document.querySelector(".empty-cart-title"); tituloCart.innerHTML = `

        SEU CARRINHO ESTÁ VAZIO

        `; this.subTitleCart.innerHTML = `

        `; this.buttonCart.innerHTML = `Continuar comprando`; } - trocaFrete() { + async trocaFrete() { this.freteCarrinho.innerHTML = `Frete`; } - trocaUnidade() { + async trocaUnidade() { this.unidadeCarrinho.innerHTML = `Unidade`; } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 6578a0b..07589e8 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -263,6 +263,9 @@ &:before { color: $color-blue-300; font-size: 20px; + &:hover { + cursor: pointer; + } } } @@ -270,6 +273,9 @@ &:before { font-size: 20px; color: $color-blue-300; + &:hover { + cursor: pointer; + } } } @@ -296,7 +302,7 @@ } span { font-family: $font-family-secundary; - font-style: normal; + font-weight: 400; font-size: 14px; line-height: 16px; @@ -305,6 +311,8 @@ } .total-selling-price { text-transform: uppercase; + + font-weight: 700; } } @@ -410,7 +418,7 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue-300; border: none; border-radius: 5px; color: $color-white; @@ -449,12 +457,12 @@ } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black-100; border-radius: 100px; } .blue { - color: $color-blue; + color: $color-black; } label { @@ -467,6 +475,9 @@ } .srp-postal-code { + .ship-country { + display: none; + } .ship-postalCode { label { font-family: $font-family; @@ -479,7 +490,7 @@ } input { - border: 1px solid $color-gray3; + border: 1px solid #c4c4c4; border-radius: 5px; box-shadow: none; color: $color-gray3; @@ -490,7 +501,7 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue-300; border: none; border-radius: 5px; color: $color-white; @@ -515,13 +526,17 @@ } small a { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 10px; line-height: 12px; - color: $color-blue; + color: $color-black-100; margin-top: 7px; + &:hover { + text-decoration: underline; + cursor: pointer; + } } span.help.error { @@ -637,6 +652,8 @@ } .coupon-label label { + display: flex; + align-self: flex-start; margin-bottom: 12px; font-family: $font-family; font-style: normal; @@ -671,7 +688,7 @@ font-size: 12px; height: 34px; padding: 0 12px; - max-width: 160px; + width: 54%; @include mq(sm, max) { max-width: 100%; @@ -680,17 +697,17 @@ } button { - background: $color-black; + background: $color-blue-300; border: none; border-radius: 5px; - color: $color-white; + color: $color-black-100; font-size: 12px; height: 36px; letter-spacing: 1px; margin-left: 6px; outline: none; transition: all 0.2s linear; - width: 94px; + width: 35%; text-transform: uppercase; @include mq(md, max) { -- 2.34.1 From a1d383bfc711963be36416d8a747d8675471f983 Mon Sep 17 00:00:00 2001 From: Savio Date: Sat, 17 Dec 2022 02:00:47 -0300 Subject: [PATCH 17/22] feat(body):Adicionando estilos dos dados pessoais --- .../sass/checkout/_checkout-autenticacao.scss | 505 ++++++++++-------- .../src/arquivos/sass/checkout/_checkout.scss | 10 +- .../src/arquivos/sass/utils/_variaveis.scss | 2 +- 3 files changed, 274 insertions(+), 243 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..eaaeb7e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,320 @@ .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; - .link-cart { - a { - color: $color-black; - font-size: 14px; + .link-cart { + a { + font-family: $font-family-secundary; + font-weight: 400; + color: $color-black; + font-size: 14px; + 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 { + font-family: $font-family-secundary; + color: $color-black-100; + font-size: 24px; + font-weight: 400; + text-transform: uppercase; + } - span { - color: #303030; - font-size: 24px; - } + small { + font-family: $font-family-secundary; + color: $color-black-100; + font-size: 24px; + font-weight: 400; + text-transform: uppercase; + } + } + } - small { - color: $color-gray4; - } - } - } + .client-email { + margin: 0 0 16px; - .client-email { - margin: 0 0 16px; + input { + box-shadow: none; + color: $color-black-100; + font-family: $font-family; + padding: 0 16px; + font-size: 12px; + border: 1px solid $color-black-100; + border-radius: 5px 8px 8px 5px; + box-sizing: border-box; - 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; + &:placeholder { + color: $color-black-100; + } - @media (max-width: 490px) { - width: auto; - } - } + @media (max-width: 490px) { + width: auto; + } + } - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; + button { + background-color: $color-blue-300; + border-radius: 0px 8px 8px 0px; + border: none; + color: $color-black-100; + font-weight: 700; + font-family: $font-family; + height: 54px; + right: 0; + top: 0; + text-transform: uppercase; + &:hover { + cursor: pointer; + } - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } - span.help.error { - color: red; - } - } + span.help.error { + font-family: $font-family; + color: $color-red; + font-size: 12px; + font-weight: 700; + } + } - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + .emailInfo { + margin-top: 31px; + padding: 16px; + background-color: $color-white; + border: 1px solid $color-black-100; + border-radius: 5px; - h3 { - color: #303030; - margin: 0 0 8px 0; - } + h3 { + color: $color-black-100; + font-family: $font-family; + font-weight: 700; + font-size: 12px; + line-height: 16px; + margin: 0 0 8px 0; + } - ul { - margin: 0; + ul { + margin: 0; - li { - span { - color: $color-black; - } + li { + span { + color: $color-black; + font-family: $font-family; + font-weight: 700; + font-size: 12px; + } - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } + i::before { + color: $color-blue-300; + font-size: 1rem; + opacity: 1; + } + } + } - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } + i::before { + color: $color-black; + font-size: 6rem; + opacity: 0.5; + } + } + } - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; + .shipping-data, + .payment-data, + .client-profile-data { + .accordion-group { + border-radius: 0; + border: 1px solid $color-gray4; + font-family: $font-family; + padding: 16px; - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + .accordion-heading { + span { + color: #303030; + margin-bottom: 8px; + padding: 0; - i::before { - fill: #303030; - } - } + i::before { + fill: #303030; + } + } - 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; - } - } + 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; + } + } - .accordion-inner { - padding: 0; + .accordion-inner { + padding: 0; - /* General configurations */ + /* General configurations */ - .client-notice { - color: $color-black; - } + .client-notice { + color: $color-black; + } - p { - label { - color: $color-black; - font-weight: 500; - } + p { + label { + color: $color-black; + font-weight: 500; + } - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } + select, + input { + border-radius: 0; + border: 1px solid $color-gray4; + box-shadow: none; + } - .help.error { - color: red; - } - } + .help.error { + color: red; + } + } - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } + .box-client-info-pj { + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-black; + font-weight: 500; + text-decoration: underline; + } + } - .state-inscription-box span { - font-weight: 500; - } + .state-inscription-box span { + font-weight: 500; + } - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; + button.submit { + border: none; + border-radius: 5px; + background: $color-black; + margin-top: 8px; + outline: none; + transition: all 0.2s linear; - &:hover { - background: lighten($color-black, 5); - } + &:hover { + background: lighten($color-black, 5); + } - &:active { - background: darken($color-black, 5); - } - } + &:active { + background: darken($color-black, 5); + } + } - /* Shipping configurations */ + /* Shipping configurations */ - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } + .vtex-omnishipping-1-x-deliveryGroup { + p { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + .shp-lean { + border: 1px solid $color-gray4; + border-radius: 0; - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; + label { + background-color: $color-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; - svg path { - fill: #d8c8ac; - } - } - } - } + svg path { + fill: #d8c8ac; + } + } + } + } - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } + .delivery-address-title { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .shp-summary-group-info { - border-color: $color-gray4; - } + .shp-summary-group-info { + border-color: $color-gray4; + } - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + .address-summary { + background: none; + border-color: $color-gray4; + border-radius: 0; + color: #303030; + padding: 12px; - @include mq(md, max) { - background-position: 8px 9px; - } + @include mq(md, max) { + background-position: 8px 9px; + } - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } + a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + } - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } + .shp-summary-group-price, + .shp-summary-package { + color: $color-gray4; + } - .shp-summary-group-price { - padding-right: 16px; - } + .shp-summary-group-price { + padding-right: 16px; + } - .shp-summary-package { - padding-left: 16px; - } + .shp-summary-package { + padding-left: 16px; + } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + } - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } + .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); - } - } - } - } + .vtex-omnishipping-1-x-deliveryOptionActive { + text-shadow: 1.3px 1px lighten($color-black, 50); + } + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..2fd65f5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -68,13 +68,13 @@ body { #cart-title, #orderform-title { - color: $color-gray2; + color: $color-black-100; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; + font-weight: 700; + font-size: 24px; + line-height: 33px; margin: 40px 0 30px; - letter-spacing: 0.1em; + text-transform: uppercase; @include mq(md, max) { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 6fc70be..e8c4844 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -14,7 +14,7 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; - +$color-red: #ff0000; $color-blue: #4267b2; $color-blue-300: #00c8ff; -- 2.34.1 From 4ff5d83af271dd3d663ef76da018134168b11afd Mon Sep 17 00:00:00 2001 From: Savio Date: Sat, 17 Dec 2022 11:13:33 -0300 Subject: [PATCH 18/22] =?UTF-8?q?feat(body):=20Adicionando=20os=20estilos?= =?UTF-8?q?=20da=20Identifica=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 23 ++++++++++++++++ .../sass/checkout/_checkout-autenticacao.scss | 27 +++++++++++++------ 2 files changed, 42 insertions(+), 8 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 9431661..fa5e938 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -18,6 +18,9 @@ export default class Footer { await this.trocaTitle(); await this.trocaFrete(); await this.trocaUnidade(); + await this.trocaNotiCliente(); + /*await this.trocaNoCep();*/ + await this.trocaIdentificao(); } async selectors() { @@ -33,6 +36,15 @@ export default class Footer { this.prateleiraInfoCards = await waitElement(".footerCheckout__prateleira"); this.freteCarrinho = await waitElement(".shipping-date"); this.unidadeCarrinho = await waitElement(".product-price"); + this.notiCliente = await waitElement(".client-notice"); + this.identificacaoUser = await waitElement( + "#client-profile-data > div > div.accordion-heading > span > span", + 0 + ); /* + this.noCep = await waitElement( + "#shipping-preview-container > div > div > div.vtex-shipping-preview-0-x-pc.srp-postal-code > form > div > p > small > a", + 0 + );*/ } onUpdate() { @@ -136,4 +148,15 @@ export default class Footer { async trocaUnidade() { this.unidadeCarrinho.innerHTML = `Unidade`; } + + async trocaNotiCliente() { + this.notiCliente.innerHTML = ``; + } + /* + async trocaNoCep() { + this.noCep.innerHTML = `Não sei meu código postal`; + }*/ + async trocaIdentificao() { + this.identificacaoUser.innerHTML = `Identificação`; + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index eaaeb7e..e9d0385 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -143,8 +143,8 @@ .payment-data, .client-profile-data { .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 8px; + border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; @@ -155,6 +155,7 @@ padding: 0; i::before { + display: none; fill: #303030; } } @@ -182,15 +183,18 @@ p { label { - color: $color-black; - font-weight: 500; + color: $color-gray2; + font-family: $font-family; + font-weight: 400; + font-size: 14px; } select, input { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 5px; + border: 1px solid $color-gray3; box-shadow: none; + height: 42px; } .help.error { @@ -201,6 +205,7 @@ .box-client-info-pj { .link a#is-corporate-client, .link a#not-corporate-client { + display: none; color: $color-black; font-weight: 500; text-decoration: underline; @@ -212,12 +217,18 @@ } button.submit { + width: 100%; border: none; - border-radius: 5px; - background: $color-black; + font-family: $font-family; + font-size: 14px; + font-weight: 700; + color: $color-white; + border-radius: 8px; + background: $color-blue-300; margin-top: 8px; outline: none; transition: all 0.2s linear; + text-transform: uppercase; &:hover { background: lighten($color-black, 5); -- 2.34.1 From ccd3c8632a68f4a465aa24753b489cbc0c74efba Mon Sep 17 00:00:00 2001 From: Savio Date: Sat, 17 Dec 2022 16:49:53 -0300 Subject: [PATCH 19/22] feat(body): Adicionando estilos da forma de entrega --- .../sass/checkout/_checkout-autenticacao.scss | 49 ++++++++++++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 1 + 2 files changed, 43 insertions(+), 7 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index e9d0385..8acd078 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -150,33 +150,60 @@ .accordion-heading { span { - color: #303030; + font-family: $font-family-secundary; + color: $color-black; margin-bottom: 8px; + font-size: 16px; + font-weight: 400; padding: 0; i::before { display: none; - fill: #303030; + fill: white; } } a { align-items: center; - background-color: #303030; + background-color: $color-white; border-radius: 8px; border: none; color: $color-white; display: flex; justify-content: center; padding: 6px 5px 6px 8px; + .icon-edit { + width: 20px; + height: 20px; + background-color: white; + color: white; + content: url(" https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + } } } .accordion-inner { - padding: 0; - + padding: 0; /* + #opt-in-newsletter { + right: 200px; + }*/ /* General configurations */ - + .newsletter { + margin-bottom: 35px; + #opt-in-newsletter { + width: 18px; + height: 20px; + margin-right: 8px; + position: relative; + top: -5px; + } + .newsletter-text { + font-family: $font-family; + font-style: normal; + font-size: 12px; + color: $color-gray100; + } + } .client-notice { color: $color-black; } @@ -191,6 +218,7 @@ select, input { + max-width: 100%; border-radius: 5px; border: 1px solid $color-gray3; box-shadow: none; @@ -318,12 +346,19 @@ } .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; + background-color: #41115d; border: 1px solid #d8c8ac; } .vtex-omnishipping-1-x-deliveryOptionActive { + background: $color-white; + font-family: $font-family; + color: #41115d; + border: 1px solid $color-black; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + border-radius: 100px; text-shadow: 1.3px 1px lighten($color-black, 50); + text-transform: uppercase; } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index e8c4844..377a536 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -14,6 +14,7 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray100: #808080; $color-red: #ff0000; $color-blue: #4267b2; $color-blue-300: #00c8ff; -- 2.34.1 From 1badd9c8289639822671d42e6a2476cebc426890 Mon Sep 17 00:00:00 2001 From: Savio Date: Sat, 17 Dec 2022 19:14:41 -0300 Subject: [PATCH 20/22] =?UTF-8?q?fix(observer):=20O=20observer=20agora=20e?= =?UTF-8?q?st=C3=A1=20funcionando?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 53 +++++++++++++++++-- .../src/arquivos/sass/partials/_footer.scss | 5 +- 2 files changed, 51 insertions(+), 7 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index fa5e938..0577374 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,10 +7,10 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); - await this.pegarInfo( + this.onUpdate(); + /*await this.pegarInfo( "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" - ); + );*/ await this.renderIconCreditCards(); await this.renderIconVtexPci(); await this.renderIconsDeveloped(); @@ -21,12 +21,14 @@ export default class Footer { await this.trocaNotiCliente(); /*await this.trocaNoCep();*/ await this.trocaIdentificao(); + this.events(); } 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.tituloCarrinho = await waitElement("#cart-title"); this.footerIconsCreditCards = await waitElement(".footerCheckout__payments"); this.footerIconVtexPci = await waitElement(".footerCheckout__vtexpci"); this.footerIconsDeveloped = await waitElement(".footerCheckout__developedBy"); @@ -46,21 +48,62 @@ export default class Footer { 0 );*/ } - + events() { + window.addEventListener("hashchange", () => { + this.onUpdate(); + if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { + this.listaInfocards.style.display = "flex"; + } + if (window.location.hash != "#/cart") { + this.listaInfocards.style.display = "none"; + } + }); + } 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 prateleiraItens = this.prateleiraInfoCards; + let titulo = this.tituloCarrinho; + if (target.style.display == "none") { + titulo.style.display = "block"; + this.pegarInfo( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ); + prateleiraItens.style.display = "flex"; + } else { + titulo.style.display = "none"; + prateleiraItens.style.display = "none"; + } + let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { + this.pegarInfo( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ); + //console.log("oi", mutations); mutations.forEach(function (mutation) { - console.log(mutation.type); + console.log("oi", mutation); + if (target.style.display != "none") { + prateleiraItens.style.display = "none"; + titulo.style.display = "none"; + } else { + prateleiraItens.style.display = "flex"; + titulo.style.display = "block"; + } }); }); observer.observe(target, config); } + ligaDesligaElementos(observado) { + if (observado.style.display === "none") { + observado.style.display = "block"; + } else { + observado.style.display = "none"; + } + } async addCarrossel() { const elemento = await waitElement("#my-element"); $(elemento).slick({ diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index b1e7515..d899791 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -23,6 +23,7 @@ margin: 0 !important; } &__prateleira { + //display: none; margin: 0 !important; width: 100% !important; display: flex; @@ -222,7 +223,7 @@ /*CSS Body*/ .container-cart { #cart-title { - display: none !important; + display: none; } .empty-cart-content { @@ -248,7 +249,7 @@ font-family: $font-family-secundary; font-weight: 400; font-size: 14px; - &::hover { + &:hover { cursor: pointer; } } -- 2.34.1 From ffb5a8a59d35d6948e923aada40d938993e6bafe Mon Sep 17 00:00:00 2001 From: Savio Date: Sun, 18 Dec 2022 18:17:03 -0300 Subject: [PATCH 21/22] fix(footer): Slick funcionando --- checkout/src/arquivos/js/components/Footer.js | 30 +++++++++++++---- .../src/arquivos/sass/checkout/_checkout.scss | 3 +- .../src/arquivos/sass/partials/_footer.scss | 32 +++++++++++++------ .../src/arquivos/sass/partials/_header.scss | 16 +++++++--- 4 files changed, 59 insertions(+), 22 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 0577374..7fb2a36 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -53,6 +53,7 @@ export default class Footer { this.onUpdate(); if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { this.listaInfocards.style.display = "flex"; + //this.slickOn(); } if (window.location.hash != "#/cart") { this.listaInfocards.style.display = "none"; @@ -66,12 +67,13 @@ export default class Footer { let target = this.checkoutVazio; let prateleiraItens = this.prateleiraInfoCards; let titulo = this.tituloCarrinho; - if (target.style.display == "none") { + if (target.style.display == "none" && window.location.hash == "#/cart") { titulo.style.display = "block"; this.pegarInfo( "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" ); prateleiraItens.style.display = "flex"; + this.slickOn(); } else { titulo.style.display = "none"; prateleiraItens.style.display = "none"; @@ -86,10 +88,12 @@ export default class Footer { mutations.forEach(function (mutation) { console.log("oi", mutation); if (target.style.display != "none") { + //this.slickOff(); prateleiraItens.style.display = "none"; titulo.style.display = "none"; } else { prateleiraItens.style.display = "flex"; + //this.slickOn(); titulo.style.display = "block"; } }); @@ -156,6 +160,7 @@ export default class Footer { this.prateleiraInfoCards.innerHTML = `

        Você também pode gostar:

          ${this.estruturaInfoCard( Items )}
        `; + this.slickOn(); } renderIconCreditCards() { @@ -179,27 +184,40 @@ export default class Footer {
      • Developed By
        • `; } - async trocaTitle() { + trocaTitle() { const tituloCart = document.querySelector(".empty-cart-title"); tituloCart.innerHTML = `

        SEU CARRINHO ESTÁ VAZIO

        `; this.subTitleCart.innerHTML = `

        `; this.buttonCart.innerHTML = `Continuar comprando`; } - async trocaFrete() { + trocaFrete() { this.freteCarrinho.innerHTML = `Frete`; } - async trocaUnidade() { + trocaUnidade() { this.unidadeCarrinho.innerHTML = `Unidade`; } - async trocaNotiCliente() { + trocaNotiCliente() { this.notiCliente.innerHTML = ``; } /* async trocaNoCep() { this.noCep.innerHTML = `Não sei meu código postal`; }*/ - async trocaIdentificao() { + + trocaIdentificao() { this.identificacaoUser.innerHTML = `Identificação`; } + //slick + slickOn() { + $(".infoCards").slick({ + dots: false, + infinite: true, + slidesToShow: 3, + slidesToScroll: 1, + }); + } + slickOff() { + $(".infoCards").slick("unslick"); + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 2fd65f5..0f7c0e6 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, @@ -74,6 +74,7 @@ body { font-size: 24px; line-height: 33px; margin: 40px 0 30px; + letter-spacing: 0.05em; text-transform: uppercase; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index d899791..460bec6 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -5,7 +5,7 @@ width: 100% !important; display: flex; flex-direction: column; - border-top: 1px solid #000000; + color: $color-gray2; &__wrapper { @@ -13,14 +13,16 @@ display: flex; justify-content: space-between; margin: 50px 0 0 0 !important; + border-top: 1px solid #000000; } .container { + padding: 27px 32px 24px 32px; width: 100%; display: flex; flex-direction: row; align-items: center; - justify-content: center; - margin: 0 !important; + + //margin: 0 0 0 16px !important; } &__prateleira { //display: none; @@ -125,7 +127,11 @@ font-size: 10px; line-height: 12px; text-transform: capitalize; - max-width: 40%; + width: 269px; + margin-right: 45px; + &:span { + width: 269px; + } @include mq(md, max) { margin-bottom: 24px; @@ -139,11 +145,16 @@ display: flex; justify-self: center; list-style: none; + margin-right: 166px; flex-direction: row; - margin: 0; + //margin-right: 189px; + + ul { + margin: 0 0 0 0 !important; + } @include mq(md, max) { align-self: center; - margin-bottom: 12px; + //margin-bottom: 12px; } &__divider { @@ -166,17 +177,18 @@ } &__developedBy { - width: 18.6%; + width: 26.6%; align-items: center; display: flex; list-style-type: none; margin: 0; li:last-child { - margin-left: 16px; + margin-left: 5px; } a { + width: 120px; align-items: center; color: $color-gray2; display: flex; @@ -191,10 +203,10 @@ margin-right: 8px; } .iconDevV { - width: 19.65%; + width: 30.65%; } .iconDeveLM3 { - width: 15.65%; + width: 30.65%; } } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 5a7de07..647d5ed 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -72,22 +72,28 @@ } li .progress-bar-line-1 { position: absolute; - left: 57%; + left: 58%; transform: translateY(-50%); bottom: 4px; - width: 212%; + width: 176px; height: 1px; border-top: 1px solid #000; } li .progress-bar-line-2 { position: absolute; - right: 59%; + right: 60%; transform: translateY(-50%); - bottom: 5px; - width: 242%; + bottom: 4px; + width: 171px; height: 1px; border-top: 1px solid #000; } + p { + font-family: $font-family-secundary; + font-weight: 400; + font-size: 12px; + color: $color-black-100; + } } } &__wrapper { -- 2.34.1 From a938b03d0c2068a95d7e89dacb2b31827a625f06 Mon Sep 17 00:00:00 2001 From: Savio Date: Sun, 18 Dec 2022 19:30:32 -0300 Subject: [PATCH 22/22] =?UTF-8?q?fix(footer):=20Conserto=20da=20estiliza?= =?UTF-8?q?=C3=A7=C3=A3o=20do=20carrossel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 4 +++- checkout/src/arquivos/sass/lib/_slick.scss | 12 +++++++--- .../src/arquivos/sass/partials/_footer.scss | 22 +++++++++++-------- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 7fb2a36..1832739 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -42,7 +42,9 @@ export default class Footer { this.identificacaoUser = await waitElement( "#client-profile-data > div > div.accordion-heading > span > span", 0 - ); /* + ); + /* + Cep bugou o programa, não tem nada de diferente que fiz dos outros métodos. this.noCep = await waitElement( "#shipping-preview-container > div > div > div.vtex-shipping-preview-0-x-pc.srp-postal-code > form > div > p > small > a", 0 diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..0a26e48 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -43,9 +43,10 @@ position: relative; left: 0; top: 0; - display: block; + display: flex; margin-left: auto; margin-right: auto; + gap: 16px; &:before, &:after { @@ -104,11 +105,16 @@ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center; z-index: 4; - left: 10px; + left: 23px; + line-height: 27px; + border: none; } .slick-next { z-index: 4; - right: 10px; + right: 17px; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg"); + line-height: 27px; + border: none; } .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 460bec6..42d5a69 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -5,8 +5,9 @@ width: 100% !important; display: flex; flex-direction: column; - + margin-top: 100%; color: $color-gray2; + margin-top: auto; &__wrapper { align-items: center; @@ -39,21 +40,23 @@ line-height: 38px; } .infoCards { - width: 100%; + width: 80%; display: flex; + height: 390px; align-items: center; gap: 16px; + margin-bottom: 54px; .infoCard { - width: 242px; + width: 100%; height: 390px; - border: 1px solid #000; + //border: 1px solid #000; display: flex; flex-direction: column; align-items: center; &__image { - max-width: 100%; + min-width: 100%; height: 242px; - object-fit: cover; + object-fit: fit; border-radius: 8px; } @@ -101,9 +104,9 @@ padding: 12px 0; display: flex; justify-content: center; - width: 242px; - height: 42px; - margin-top: 32px; + width: 100%; + height: 17px; + margin-top: 17px; font-family: $font-family; font-weight: 700; font-size: 13px; @@ -111,6 +114,7 @@ color: $color-white; background-color: $color-blue-300; border-radius: 8px; + &::hoover { cursor: pointer; } -- 2.34.1