forked from M3-Academy/m3-academy-template-checkout
feature(Footer.js): observer prateleira não funcional, prateleira não some com mudança do checkout
This commit is contained in:
parent
2346a5f5e6
commit
62be124c6d
@ -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({
|
||||
|
@ -8,6 +8,9 @@
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
&-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 20px;
|
||||
|
Loading…
Reference in New Issue
Block a user