diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..91e4707 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,6 +7,9 @@ export default class Footer { async init() { await this.selectors(); + this.icons(); + this.vtexIcon(); + this.poweredDevelopeIcon(); // this.onUpdate(); } @@ -14,27 +17,85 @@ export default class Footer { //Para verificar se o carrinho está vazio e remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement this.checkoutVazio = await waitElement(".empty-cart-content"); + this.payments = await waitElement(".footerCheckout__payments"); + this.vtexpci = await waitElement(".footerCheckout__vtexpci"); + this.devIncons = await waitElement(".footerCheckout__developedBy"); } - onUpdate() { - //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: - // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver - // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver - let target = this.checkoutVazio; - let config = { childList: true, attributes: true }; - let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); - }); - }); - - observer.observe(target, config); + icons() { + this.payments.innerHTML = ` + + + `; } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + + vtexIcon() { + this.vtexpci.innerHTML = ` + + `; + } + + poweredDevelopeIcon() { + this.devIncons.innerHTML = ` +
  • + + PoweredBy + + +
  • + +
  • + + DevelopedBy + + +
  • + `; } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..2524c33 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,59 +1,82 @@ /* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; - - &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + // width: 1280px; + // height: 65px; + border-top: 1px solid #292929; + // position: relative; + // display: flex; + // top: 800px; + .container{ + position: relative; + display: flex; + max-width: max-content; + justify-content: space-between; + margin-top: 22px; } + &__wrapper { + align-items: center; + display: flex; + justify-content: space-between; + } - &__address { + &__address { color: $color-gray2; - font-family: $font-family; + font-family: "Open Sans",sans-serif; font-style: normal; font-weight: normal; font-size: 10px; line-height: 12px; text-transform: capitalize; - max-width: 40%; + min-width: 40%; + margin-left: -80px; + margin-right: -45px; + margin-top: 10px; - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; - } - } - - &__stamps { - align-items: center; - display: flex; - justify-self: center; - list-style: none; - - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; + @include mq(md, max) { + margin-bottom: 24px; + max-width: 100%; + } } - &__divider { - background-color: $color-gray4; - display: inline-block; - height: 24px; - margin: 0 8px; - width: 1px; + .payments-icons-wrapper{ + display: flex; + list-style: none; } + + img { + max-width: 100%; + min-width: 36px; + min-height: 20px; + vertical-align: middle; + border: 0; + } + + &__stamps { + align-items: center; + display: flex; + list-style: none; + margin-right: 30px; + + @include mq(md, max) { + align-self: center; + margin-bottom: 12px; + } + + &__divider { + background-color: $color-gray4; + display: inline-block; + height: 24px; + margin: 0 8px; + width: 1px; + } } &__developedBy { align-items: center; display: flex; list-style-type: none; - margin: 0; - - li:last-child { - margin-left: 16px; - } + margin-left: -1px; +} a { align-items: center; @@ -70,5 +93,8 @@ margin-right: 8px; } } + .li-2{ + margin-left: 35px; + } } -} + diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html index 6246210..8c79f0c 100644 --- a/checkout/src/template-checkout/checkout-footer.html +++ b/checkout/src/template-checkout/checkout-footer.html @@ -23,14 +23,13 @@
  • Powered By - @TODO: vtex icon +
  • Developed By - @TODO: m3 icon