From e22c02cd40dc1a9c75921631bf1cbb94c9c39268 Mon Sep 17 00:00:00 2001 From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com> Date: Tue, 13 Dec 2022 20:20:41 -0300 Subject: [PATCH] feat: adiciona footer e chamada de api para patreleira de produtos --- checkout/src/arquivos/js/components/Footer.js | 79 +++++++++++- checkout/src/arquivos/js/components/Header.js | 3 +- .../src/arquivos/sass/partials/_footer.scss | 113 +++++++++++------- 3 files changed, 148 insertions(+), 47 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..0276a4a 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -3,21 +3,94 @@ import { waitElement } from "m3-utils"; export default class Footer { constructor() { this.init(); + this.footerHTML(); + this.addCarrossel(); + } async init() { await this.selectors(); + this.footerHTML(); + this.addCarrossel(); // this.onUpdate(); } 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.footerPrateleira = await waitElement(".footerCheckout__prateleira"); + this.footerAdress = await waitElement(".footerCheckout__address"); + this.footerStamps = await waitElement(".footerCheckout__stamps"); + this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy"); + + this.checkoutVazio = await waitElement(".empty-cart-content"); + console.log(this.checkoutVazio) + } + footerHTML() { + const footerPrat = this.footerPrateleira + const textAdress = this.footerAdress; + const iconCard = this.footerStamps; + const developedBy = this.footerDevelopedBy; + + + footerPrat.innerHTML = ` +

Você Também pode gostar:

+ + ` + + fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319") + .then((resp) => resp.json()) + .then(function (data) { + + return data.map(function (product) { + const li = document.createElement("li") + li.setAttribute("id", product.productId) + li.innerHTML = ` +
+ Imagem ${product.productName} +
${product.productName}
+
+
+ + +
+
+ +
+ ` + footerPrat.children[1].appendChild(li) + console.log(footerPrat.children[1]) + }) + }) + + + textAdress.innerHTML = ` +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. .

+ ` + + iconCard.innerHTML = ` +
  • Imagem Master Card
    • +
  • Imagem Visa Card
    • +
  • Imagem American Express
    • +
  • Imagem Elo Card
    • +
  • Imagem Hiper Card
    • +
  • Imagem PayPal
    • +
  • Imagem Boleto
    • +
    • +
  • Imagem Vtex
    • + ` + developedBy.innerHTML = ` +

  • Powered By

    Imagem VTEX
    • +

  • Developed By

    • + ` } + onUpdate() { - //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: + // 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; @@ -30,11 +103,13 @@ export default class Footer { observer.observe(target, config); } + async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".container-carousel-item"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, + arrows: true, }); } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 418e99f..6fd8a5c 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -30,12 +30,11 @@ export default class Header {
  • - ` } if (this.progressBar && window.innerWidth <= 1024) { this.progressBar.innerHTML = ``; } - } + }; } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..1b300ab 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,73 +1,100 @@ -/* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; + padding: 0 16px; + position: relative; + + .container { + display: flex; + margin: 16px 0; + width: 100% !important; + } &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + width: 100% !important; + border-top: solid 1px $black-padrao; + position: fixed; + bottom: 0; + left: 0; } &__address { - color: $color-gray2; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - text-transform: capitalize; - max-width: 40%; - - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; + display: flex; + align-items: center; + padding-left: 16px; + p { + margin: 0; + height: 14px; + font-weight: 400; + font-size: 10px; + line-height: 14px; + text-transform: capitalize; + color: $color-black; + font-family: $font-family; } } &__stamps { - align-items: center; + margin: 0 auto; display: flex; - justify-self: center; + align-items: center; list-style: none; + width: 32.4%; - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; + &__item { + margin-right: 13px; + + img { + width: 100%; + height: 20px; + object-fit: cover; + } + } + + .iconVtex { + height: 33px; } &__divider { - background-color: $color-gray4; - display: inline-block; - height: 24px; - margin: 0 8px; width: 1px; + height: 24px; + margin: 0 10px 0 0; + border: 1px solid $color-gray-100; } } &__developedBy { - align-items: center; - display: flex; - list-style-type: none; margin: 0; + display: flex; + list-style: none; + padding-right: 16px; - li:last-child { - margin-left: 16px; + &__item-Vtex { + display: flex; + align-items: center; + margin-right: 16.75px; + p { + margin: 0 10.1px 0 0; + font-weight: 400; + font-size: 9px; + line-height: 12px; + color: $color-black; + font-family: $font-family; + } + + img { + height: 16px; + } } - a { - align-items: center; - color: $color-gray2; + &__item-M3 { display: flex; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - text-decoration: none; + align-items: center; + p { + margin: 0 11px 0 0; + font-size: 9px; + } - span { - margin-right: 8px; + img { + height: 16px; } } }