diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..2f38895 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,34 +7,205 @@ export default class Footer {
async init() {
await this.selectors();
- // this.onUpdate();
+
+ /*if (window.location.hash === "#/cart") {
+ this.onUpdate();
+ }*/
+
+ this.requestAPI();
+ this.prateleiraItem = await waitElement(".prateleira__ul");
+ this.events();
+ this.onUpdate();
+ //await this.addCarrossel();
+ this.paymentsIconsHTML();
+ this.vtexPciIconHTML();
+ this.developedByLogoHTML();
}
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.checkoutVazio = await waitElement(".empty-cart-content");
+ this.payments = await waitElement(".footerCheckout__payments");
+ this.vtexPCI = await waitElement(".footerCheckout__vtexpci");
+ this.developedBy = await waitElement(".footerCheckout__developedBy");
+ this.cartTitle = await waitElement("#cart-title");
+
+ this.prateleira = await waitElement(".footerCheckout__prateleira", {
+ timeout: 5000,
+ interval: 1,
+ });
+ }
+
+ paymentsIconsHTML() {
+ if (this.payments) {
+ this.payments.innerHTML = `
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ `;
+ }
+ }
+
+ vtexPciIconHTML() {
+ if (this.vtexPCI) {
+ this.vtexPCI.innerHTML = `
+
+ 
+
+ `;
+ }
+ }
+
+ developedByLogoHTML() {
+ if (this.developedBy) {
+ this.developedBy.innerHTML = `
+
+
+ Powered By
+
+ 
+
+
+
+
+
+
+ Developed By
+
+ 
+
+
+
+ `;
+ }
+ }
+
+ hashCgange(e) {
+ if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") {
+ this.prateleira.classList.add("desativado");
+ }else {
+ this.prateleira.classList.remove("desativado");
+ }
+ }
+
+ events() {
+ window.addEventListener("hashchange", this.hashCgange.bind(this));
}
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);
- });
- });
+ mutations.map((mutation) => {
- observer.observe(target, config);
+ const status = mutation.target.attributes.style.nodeValue;
+
+ if (status == "display:none;") {
+ this.requestAPI();
+ } else if (status == "display:block;") {
+ this.removePrateleira();
+ }
+
+ });
+
+ observer.observe(target, config);
+ });
}
+
+ requestAPI() {
+ this.prateleira.innerHTML = `
+ Você também pode gostar:
+
+ `;
+
+ const api =
+ "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
+ const products = document.querySelector(".prateleira__ul");
+
+ fetch(api)
+ .then((response) => {
+ return response.json();
+ })
+
+ .then((data) => {
+ data.forEach((item) => {
+ const imgProduct = item.items[0].images[0].imageUrl;
+ const nameProduct = item.productName;
+ const linkProduct = item.link;
+
+ products.innerHTML += `
+
+
+ 
+
+
+
+
${nameProduct}
+
+
+ ${item.items.map((name) => `- ${name.name}
`).join("")}
+
+
+
+ Ver Produto
+
+