emmanuelvitor/m3-academy-template-checkout-EmmanuelVitor
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: cria logica para fazer o mutation observar mudancas de quando a prateleira deve ou nao aparecer

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2022-12-21 14:07:22 -03:00
parent 8e3aae3c91
commit 9f0ce180d2
1 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
checkout/src/arquivos/js/components/Footer.js
View File

@ -7,7 +7,7 @@ export default class Footer {
async init() {
await this.selectors();
// this.onUpdate();
this.onUpdate();
this.createfooterShelf();
this.insertImagesPayments();
this.insertImagesDevelopedBy();
@ -25,18 +25,47 @@ export default class Footer {
}
onUpdate() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
//Função qu 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 shelf = this.footerCheckoutShelf;
let config = { childList: true, attributes: true };
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" && this.checkoutVazio.style.display == "none") {
shelf.classList.remove("none");
this.createfooterShelf();
} else {
shelf.classList.add("none");
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
shelf.classList.remove("none")
this.createfooterShelf();
} else if (window.location.hash != "#/cart") {
shelf.classList.add("none");
}
});
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
console.log(mutation.type);
mutations.forEach((mutation) => {
if (target.style.display == "none" && window.location.hash == "#/cart") {
shelf.classList.remove("none");
this.footerShelf();
} else {
shelf.classList.add("none");
}
});
});
observer.observe(target, config);
}
insertImagesPayments() {
this.footerCheckoutPayments.innerHTML = `