From 3dc506b33ca425ca28b2d8ae4e10b73a578816f7 Mon Sep 17 00:00:00 2001 From: Savio Date: Tue, 13 Dec 2022 21:41:36 -0300 Subject: [PATCH 1/4] 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 2/4] 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 3/4] 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 4/4] 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