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): ajustando css e function para remover title da page inicial #5

Merged
BernardoWaldhelm merged 1 commits from feature/challenge into main 2022-12-22 13:35:48 +00:00
Conversation 0 Commits 1 Files Changed 3 +17 -14
3 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f763e56594 - Show all commits

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

@ -19,6 +19,7 @@ export default class Footer {
this.footerCheckoutVtexPci = await waitElement(".footerCheckout__vtexpci");
this.footerCheckoutDeveloped = await waitElement(".footerCheckout__developedBy");
this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
this.myCart = await waitElement("#cart-title");
}
async prateleiraFooterHTML() {
@ -154,18 +155,21 @@ export default class Footer {
// 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 myCart = document.querySelector("#cart-title");
let target = this.checkoutVazio;
if (window.location.hash == "#/cart") {
this.myCart.classList.add("inactive");
}
//monitorar display none -> target.style.display === "none"
let target = this.checkoutVazio;
let observer = new MutationObserver((mutations) => {
mutations.forEach(() => {
if (target.style.display == "none") {
this.footerPrateleira.classList.remove("desable");
myCart.classList.remove("desable");
this.footerPrateleira.classList.remove("inactive");
this.myCart.classList.remove("inactive");
this.prateleiraFooterHTML();
} else {
this.footerPrateleira.classList.add("desable");
myCart.classList.add("desable");
this.footerPrateleira.classList.add("inactive");
this.myCart.classList.add("inactive");
this.footerPrateleira.innerHTML = "";
}
});
@ -173,20 +177,19 @@ export default class Footer {
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
if (target.style.display == "none") {
myCart.classList.remove("desable");
this.footerPrateleira.classList.remove("desable");
this.myCart.classList.remove("inactive");
this.footerPrateleira.classList.remove("inactive");
this.footerPrateleira.innerHTML = "";
this.prateleiraFooterHTML();
} else {
myCart.classList.add("desable");
this.myCart.classList.add("inactive");
}
} else {
this.footerPrateleira.classList.add("desable");
myCart.classList.add("desable");
this.footerPrateleira.classList.add("inactive");
this.myCart.classList.add("inactive");
this.footerPrateleira.innerHTML = "";
}
});
//monitorar display none -> target.style.display === "none"
});
observer.observe(this.checkoutVazio, {
attributes: true,

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

@ -222,7 +222,7 @@
}
.desable {
.inactive {
display: none;
}
}

2
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -245,4 +245,4 @@
}
.desable {display: none !important;}
.inactive {display: none !important;}