From e3ddf58ccd4fc681ffb4c1e1b159ef5d50c31061 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Sat, 17 Dec 2022 18:17:28 -0300 Subject: [PATCH] feat: Adiciona footer --- bash.exe.stackdump | 2 +- checkout/src/arquivos/js/components/Footer.js | 46 +++++++++++ .../sass/checkout/_checkout-carrinho.scss | 29 +++++++ .../sass/checkout/_checkout-vazio.scss | 65 ++++++++-------- .../src/arquivos/sass/partials/_footer.scss | 76 +++++++++++++++++-- .../src/arquivos/sass/partials/_header.scss | 5 ++ 6 files changed, 183 insertions(+), 40 deletions(-) diff --git a/bash.exe.stackdump b/bash.exe.stackdump index 0dbf51a..7c1d816 100644 --- a/bash.exe.stackdump +++ b/bash.exe.stackdump @@ -2,7 +2,7 @@ Stack trace: Frame Function Args 000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) 000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) -000FFFFCD30 002100484A2 (000006E0000, 000006FF401, 00000000001, 87FE80A61CA3) +000FFFFCD30 002100484A2 (00000690000, 00000690101, 00000000001, 726D3BFB8C2D) 000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) 000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) 000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 5e34d3a..7de11ff 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -15,6 +15,7 @@ export default class Footer { 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.title = await waitElement("#cart-title"); this.checkoutVazio = await waitElement(".empty-cart-content"); //CARRINHO VAZIO this.fraseCarrinhoVazio = await waitElement(".empty-cart-title"); @@ -25,12 +26,18 @@ export default class Footer { this.footerPrateleira = await waitElement(".footerCheckout__prateleira"); //pagamento this.notification = await waitElement(".notification"); + //footer + this.creditcards = await waitElement(".footerCheckout__payments"); + this.vtex = await waitElement(".footerCheckout__vtexpci"); + this.developed = await waitElement(".footerCheckout__developedBy"); } async prateleira() { if (this.checkoutVazio.style.display == "none") { + this.title.innerHTML = `MEU CARRINHO`; this.requestApi(); this.addCarrossel(); + window.addEventListener("hashchange", () => { if (window.location.hash !== "#/cart") { this.removePrateleira(); @@ -105,6 +112,7 @@ export default class Footer { if (display == "display: none;") { this.prateleira(); } else if (display == "display: block;") { + this.title.innerHTML = ``; this.removePrateleira(); } }); @@ -114,9 +122,47 @@ export default class Footer { } carrinho() { + this.title.innerHTML = ``; this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; this.continuarCompra.innerHTML = `continuar comprando`; this.frete.innerHTML = `Frete`; this.unidade.innerHTML = `Unidade`; + //footer + this.creditcards.innerHTML = `
+ MasterCard +
+
+ VisaCard +
+
+ America Express +
+
+ Elo +
+
+ HiperCard +
+
+ Paypal +
+
+ Boleto +
`; + this.vtex.innerHTML = `
+ VTEX +
`; + this.developed.innerHTML = `
  • + + Powered By +
    VTEX
    +     +
    • +
  • + + Developed By +
    M3
    +     +
    • `; } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index b299a40..787e2a5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -21,6 +21,35 @@ } .cart-template { + //CARRINHO VAZIO + .empty-cart-content { + margin-top: 100px; + + .empty-cart-title { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + margin: 0 0 32px; + } + + .empty-cart-message { + display: none; + } + + #cart-choose-products { + color: $color-black-500; + border: 1px solid $color-black-500; + background: $color-white; + font-family: $font-family-secundary; + font-weight: 400; + letter-spacing: normal; + border-radius: 0%; + padding: 15px 64px 17px 65px; + margin: 0; + } + } .empty-cart-title { font-weight: 700; font-size: 24px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..0e231bd 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,38 +1,39 @@ .empty-cart { - font-family: $font-family; - &-content { - color: $color-black; - text-align: center; + font-family: $font-family; - @include mq(md, max) { - padding: 0 16px; - } - } + &-content { + color: $color-black; + text-align: center; - &-title { - font-size: 20px; - } + @include mq(md, max) { + padding: 0 16px; + } + } - &-links { - .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; - transition: ease-in 0.22s all; - outline: none; - font-family: $font-family; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - text-align: center; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; + &-title { + font-size: 20px; + } - &:hover { - background: lighten($color-black, 5); - } - } - } + &-links { + .link-choose-products { + background: $color-black; + border: none; + border-radius: 5px; + transition: ease-in 0.22s all; + outline: none; + font-family: $font-family; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-align: center; + letter-spacing: 0.05em; + color: $color-white; + text-transform: uppercase; + + &:hover { + background: lighten($color-black, 5); + } + } + } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..2423195 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -4,18 +4,29 @@ color: $color-gray2; &__wrapper { + border-top: 1px solid $color-black-500; + width: 100% !important; align-items: center; display: flex; justify-content: space-between; + + .container { + /*width: 91.40625%;*/ + width: 100%; + margin: 16px 32px; + display: flex; + align-items: center; + justify-content: space-between; + } } &__address { - color: $color-gray2; font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 10px; - line-height: 12px; + line-height: 14px; + color: $color-black; text-transform: capitalize; max-width: 40%; @@ -30,6 +41,42 @@ display: flex; justify-self: center; list-style: none; + margin: 0; + + li { + display: flex; + + .footerCheckout__payments { + display: flex; + column-gap: 13px; + + figure { + margin: 0; + width: 35px; + height: 20px; + + img { + width: 100%; + vertical-align: unset; + } + } + } + + .footerCheckout__vtexpci { + display: flex; + + figure { + margin: 0; + width: 53px; + height: 33px; + + img { + width: 100%; + vertical-align: unset; + } + } + } + } @include mq(md, max) { align-self: center; @@ -37,10 +84,10 @@ } &__divider { - background-color: $color-gray4; + background-color: $color-gray7; display: inline-block; height: 24px; - margin: 0 8px; + margin: 0 10px 0 13px; width: 1px; } } @@ -52,7 +99,11 @@ margin: 0; li:last-child { - margin-left: 16px; + margin-left: 10.73px; + figure { + width: 28.66px; + height: 15.65px; + } } a { @@ -67,7 +118,18 @@ text-decoration: none; span { - margin-right: 8px; + margin-right: 10px; + } + + figure { + margin: 0; + width: 44.92px; + height: 16px; + + img { + width: 100%; + vertical-align: unset; + } } } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 81acfde..17b8961 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -32,6 +32,11 @@ &__safeBuy { display: flex; + width: 15.2829%; + + @include mq(tablet, max) { + width: auto; + } img { width: 12px;