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/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..00b47af 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,12 +8,21 @@ 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" + ); + 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() { @@ -37,4 +46,41 @@ export default class Footer { slidesToScroll: 1, }); } + produtos(data) { + return { + imagem: data["items"][0]["images"][0]["imageUrl"], + nome: data["productName"], + tamanho: data["items"].map((val) => val["name"]), + }; + } + + 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.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..fd2d3fb 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -32,7 +32,9 @@ export default class Header {

  • Dados Pessoais

    • -
  • Pagamento

    • + +
  • +

    Pagamento

    • `; } 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 c7c65c2..2e4d3be 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,12 @@ display: flex; justify-content: space-between; } - + .container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } &__address { color: $color-gray2; font-family: $font-family; @@ -26,11 +34,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 +53,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 +90,12 @@ span { margin-right: 8px; } + .iconDevV { + width: 19.65%; + } + .iconDeveLM3 { + width: 15.65%; + } } } } 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; } }