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 #5

Merged
emmanuelvitor merged 1 commits from feature/mutation into development 2022-12-22 01:07:21 +00:00
Conversation 0 Commits 1 Files Changed 1 +33 -4
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() { async init() {
await this.selectors(); await this.selectors();
// this.onUpdate(); this.onUpdate();
this.createfooterShelf(); this.createfooterShelf();
this.insertImagesPayments(); this.insertImagesPayments();
this.insertImagesDevelopedBy(); this.insertImagesDevelopedBy();
@ -25,18 +25,47 @@ export default class Footer {
} }
onUpdate() { 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 // 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 // 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 target = this.checkoutVazio;
let shelf = this.footerCheckoutShelf;
let config = { childList: true, attributes: true }; 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) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) { mutations.forEach((mutation) => {
console.log(mutation.type); if (target.style.display == "none" && window.location.hash == "#/cart") {
shelf.classList.remove("none");
this.footerShelf();
} else {
shelf.classList.add("none");
}
}); });
}); });
observer.observe(target, config); observer.observe(target, config);
} }
insertImagesPayments() { insertImagesPayments() {
this.footerCheckoutPayments.innerHTML = ` this.footerCheckoutPayments.innerHTML = `