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

feat(home): adicionando prateleira só quando o carrinho não está vazio

Browse Source 
home
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2022-12-15 10:40:44 -03:00
parent c8df2d9a0d
commit 6d2904fe25
2 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,6 @@ export default class Footer {
await this.selectors();
this.onUpdate();
this.footerList();
await this.prateleiraFooterHTML();
}
async selectors() {
@ -22,23 +21,6 @@ export default class Footer {
this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
}
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
let target = this.checkoutVazio;
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
// console.log(mutation);
// console.log(mutation.target);
});
//monitorar display none -> target.style.display === "none"
});
observer.observe(target, config);
}
async prateleiraFooterHTML() {
this.footerPrateleira.innerHTML += `
<h2 class="footerCheckout__prateleira__title"> Você também pode gostar: </h2>
@ -158,4 +140,30 @@ export default class Footer {
`;
}
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
const footerPrateleiraList = document.querySelector(".footerCheckout__prateleira__list");
let target = this.checkoutVazio;
let observer = new MutationObserver((mutations) => {
mutations.forEach(() => {
if (target.style.display == "none") {
this.footerPrateleira.classList.remove("desable");
this.prateleiraFooterHTML();
} else {
this.footerPrateleira.classList.add("desable");
this.footerPrateleira.innerHTML = "";
footerPrateleiraList.innerHTML = "";
}
});
//monitorar display none -> target.style.display === "none"
});
observer.observe(this.checkoutVazio, {
attributes: true,
});
}
}

7
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -184,8 +184,15 @@
}
}
.desable {
display: none;
}
&__prateleira {
&__item {
display: flex !important;
flex-direction: column;