diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..a1c360e 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,34 +7,113 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + this.onUpdate(); + this.checkoutPayments = await waitElement(".footerCheckout__payments"); + this.checkoutVtexPci = await waitElement(".footerCheckout__vtexpci"); + await this.footerPayments(); + await this.vtexPci(); } 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.footerContainerPrateleira = await waitElement(".footerCheckout__prateleira"); this.checkoutVazio = await waitElement(".empty-cart-content"); } 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); + console.log("oioioio"); + mutations.forEach((mutationRecord) => { + console.log(mutationRecord); + if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" && + this.checkoutVazio.style.display == "none" + ) { + this.prateleiraHTML(); + } + if (this.checkoutVazio.style.display == "block") { + this.footerContainerPrateleira.innerHTML = ""; + } + window.addEventListener("hashchange", () => { + if ( + window.location.hash == "#/cart" && + this.checkoutVazio.style.display === "none" + ) { + this.prateleiraHTML(); + } + if ( + window.location.hash !== "#/cart" && + this.checkoutVazio.style.display === "none" + ) { + this.footerContainerPrateleira.innerHTML = ""; + } + }); }); }); - observer.observe(target, config); + observer.observe(this.checkoutVazio, { attributes: true, attributeFilter: ["style"] }); } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, + prateleiraHTML() { + this.footerContainerPrateleira.innerHTML = `

Você também pode gostar:

`; + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ).then((response) => { + if (response.ok) { + response.json().then((res) => { + res.map((prod) => { + const skus = document.createElement("ul"); + prod.items.map((item) => { + const sku = document.createElement("li"); + sku.innerHTML = `${item.name}`; + skus.append(sku); + }); + const produto = document.createElement("li"); + produto.classList.add("footerCheckout__prateleira__produto"); + produto.innerHTML = ``; + produto.children[0].children["skus"].innerHTML = skus.innerHTML; + this.footerContainerPrateleira.children["prateleiraCheckout"].append( + produto + ); + }); + this.addCarrossel(); + }); + } else { + console.log("algo deu errado"); + } }); } + async addCarrossel() { + const prateleira = await waitElement("#prateleiraCheckout"); + if ($(prateleira)) { + $(prateleira).slick({ + slidesToShow: 4, + slidesToScroll: 1, + arrows: true, + infinite: false, + variableWidth: true, + }); + } + } + + async footerPayments() { + if (this.checkoutPayments) { + this.checkoutPayments.innerHTML = ` +
+ + + + + + + +
`; + } + } + async vtexPci() { + if (this.checkoutVtexPci) { + this.checkoutVtexPci.innerHTML = ` +
+ +
`; + } + } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..6afefe1 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -62,6 +62,7 @@ } } .slick-slide { + margin: 0 8px; float: left; height: 100%; min-height: 1px; @@ -99,6 +100,7 @@ .slick-arrow { font-size: 0; position: absolute; + border: none; } .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") @@ -107,13 +109,20 @@ left: 10px; } .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; z-index: 4; right: 10px; } .slick-arrow.slick-hidden { - display: none; + display: none !important; } .slick-dots { + display: flex; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); li { margin: 0.5em; button { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..0ffb8c8 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -2,11 +2,77 @@ .footerCheckout { border-top: none; color: $color-gray2; + &__prateleira { + align-items: center; + display: flex; + justify-content: center; + flex-direction: column; + h3 { + font-size: 32px; + } + ul { + margin: 0; + } + &__wrapper { + align-items: center; + display: flex; + justify-content: space-between; + width: 100%; + padding: 50px 0; + li { + list-style-type: none; + } + img { + width: 100%; + background-color: #ededed; + } + } + &__produto { + width: 242px !important; + ul { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 20px; + .skus { + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + li { + padding: 5px; + } + } + .skus li, + .verProdBtn a { + color: #fff; + font-weight: 500; + } + .skus li, + .verProdBtn { + background: #00c8ff; + border-radius: 8px; + } + .verProdBtn { + width: 100%; + text-align: center; + text-transform: uppercase; + padding: 12px 0; + } + } + } + } &__wrapper { align-items: center; display: flex; justify-content: space-between; + .container { + align-items: center; + display: flex; + justify-content: space-between; + } } &__address { @@ -44,6 +110,13 @@ width: 1px; } } + &__vtexpci, + &__payments { + font-size: 0; + img { + width: 35.65px; + } + } &__developedBy { align-items: center; @@ -51,8 +124,38 @@ list-style-type: none; margin: 0; + li:first-child { + // margin-left: 16px; + a { + span { + display: flex; + &::after { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png") + no-repeat center center; + display: block; + width: 16px; + height: 16px; + } + } + } + } + li:last-child { - margin-left: 16px; + // margin-left: 16px; + a { + span { + display: flex; + &::after { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png") + no-repeat center center; + display: block; + width: 16px; + height: 16px; + } + } + } } a { @@ -62,12 +165,26 @@ font-family: $font-family; font-style: normal; font-weight: normal; - font-size: 10px; + font-size: 0px; line-height: 12px; text-decoration: none; span { margin-right: 8px; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 9px; + line-height: 12px; + color: #292929; + &::after { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png") + no-repeat center center; + display: block; + width: 44.92px; + height: auto; + } } } }