diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 0740de4..7848c54 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -9,6 +9,7 @@ export default class Footer { await this.selectors(); this.PaymentsIconsHTML(); this.VtexPciIconHTML(); + this.developedByLogoHTML(); // this.onUpdate(); } @@ -16,13 +17,14 @@ 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.paymentsIcons = await waitElement(".footerCheckout__payments"); - this.vtexpciIcon = await waitElement(".footerCheckout__vtexpci"); + this.payments = await waitElement(".footerCheckout__payments"); + this.vtexPCI = await waitElement(".footerCheckout__vtexpci"); + this.developedBy = await waitElement(".footerCheckout__developedBy"); } PaymentsIconsHTML() { - if (this.paymentsIcons) { - this.paymentsIcons.innerHTML = ` + if (this.payments) { + this.payments.innerHTML = ` Logo Mastercard Logo Visa @@ -37,8 +39,8 @@ export default class Footer { } VtexPciIconHTML() { - if (this.vtexpciIcon) { - this.vtexpciIcon.innerHTML = ` + if (this.vtexPCI) { + this.vtexPCI.innerHTML = ` Ícone Vtex PCI @@ -46,6 +48,30 @@ export default class Footer { } } + developedByLogoHTML() { + if (this.developedBy) { + this.developedBy.innerHTML = ` +
  • + + Powered By + + +
  • + +
  • + + Developed By + + +
  • + `; + } + } + 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 @@ -60,6 +86,7 @@ export default class Footer { observer.observe(target, config); } + 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 4d21745..35721bf 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -25,11 +25,12 @@ line-height: 14px; text-transform: capitalize; max-width: 40%; + margin-right: auto; - @include mq(md, max) { + /*@include mq(md, max) { margin-bottom: 24px; max-width: 100%; - } + }*/ } &__stamps { @@ -39,10 +40,10 @@ list-style: none; margin: 0; - @include mq(md, max) { + /*@include mq(md, max) { align-self: center; margin-bottom: 12px; - } + }*/ .payments-icons { display: flex; @@ -76,9 +77,10 @@ display: flex; list-style-type: none; margin: 0; + margin-left: auto; li:last-child { - margin-left: 16px; + margin-left: 10px; } a { @@ -93,7 +95,22 @@ text-decoration: none; span { - margin-right: 8px; + margin-right: 10px; + } + } + + .vtex-logo { + &__img { + width: 44px; + height: auto; + } + } + + .m3-logo { + &__img { + width: 12.3809%; + width: 26px; + height: auto; } } }