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

Merge pull request 'feat: cria logica para fazer o mutation observar mudancas de quando a prateleira deve ou nao aparecer' (#5) from feature/mutation into development

Browse Source 
Reviewed-on: EmmanuelVitor/m3-academy-template-checkout-EmmanuelVitor#5
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2022-12-22 01:07:20 +00:00
commit 004346414e
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 = `