feature(Footer.js): observer prateleira não funcional, prateleira não some com mudança do checkout

This commit is contained in:
Ramon Dias Ferreira 2022-12-16 20:52:42 -03:00
parent 2346a5f5e6
commit 62be124c6d
2 changed files with 25 additions and 14 deletions

View File

@ -8,15 +8,14 @@ export default class Footer {
async init() {
this.list = await this.requestApi();
await this.selectors();
this.creditCardIconsHTML();
this.developedByIconsHTML();
// this.onUpdate();
this.createShelf();
this.shelfList = await waitElement(".footerCheckout__shelfList");
this.shelfItens();
await this.shelfUpdate();
this.addCarrossel();
this.creditCardIconsHTML();
this.developedByIconsHTML();
}
async selectors() {
@ -78,21 +77,30 @@ export default class Footer {
});
}
events() {
window.addEventListener("hashchange", () =>{})
}
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
async shelfUpdate() {
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("observer");
mutations.map((mutation) => {
const status = mutation.target.attributes.style.nodeValue;
console.log(status);
if(status === "display: none") {
this.renderShelf();
this.shelfList.classList.remove("inactive");
} else if (status === "display: block") {
this.removeShelf();
this.shelfList.classList.add("inactive");
}
})
})
observer.observe(target, config);
}
async addCarrossel() {
const elemento = await waitElement(".footerCheckout__shelfList");
$(elemento).slick({

View File

@ -8,6 +8,9 @@
padding: 0 16px;
}
}
&-message {
display: none;
}
&-title {
font-size: 20px;