SavioCarvalhoMoraes/m3-academy-template-checkout-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(observer): O observer agora está funcionando

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2022-12-17 19:14:41 -03:00
parent ccd3c8632a
commit 1badd9c828
2 changed files with 51 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,10 +7,10 @@ export default class Footer {
async init() {
await this.selectors();
// this.onUpdate();
await this.pegarInfo(
this.onUpdate();
/*await this.pegarInfo(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
);
);*/
await this.renderIconCreditCards();
await this.renderIconVtexPci();
await this.renderIconsDeveloped();
@ -21,12 +21,14 @@ export default class Footer {
await this.trocaNotiCliente();
/*await this.trocaNoCep();*/
await this.trocaIdentificao();
this.events();
}
async selectors() {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content");
this.tituloCarrinho = await waitElement("#cart-title");
this.footerIconsCreditCards = await waitElement(".footerCheckout__payments");
this.footerIconVtexPci = await waitElement(".footerCheckout__vtexpci");
this.footerIconsDeveloped = await waitElement(".footerCheckout__developedBy");
@ -46,21 +48,62 @@ export default class Footer {
0
);*/
}
events() {
window.addEventListener("hashchange", () => {
this.onUpdate();
if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
this.listaInfocards.style.display = "flex";
}
if (window.location.hash != "#/cart") {
this.listaInfocards.style.display = "none";
}
});
}
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 prateleiraItens = this.prateleiraInfoCards;
let titulo = this.tituloCarrinho;
if (target.style.display == "none") {
titulo.style.display = "block";
this.pegarInfo(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
);
prateleiraItens.style.display = "flex";
} else {
titulo.style.display = "none";
prateleiraItens.style.display = "none";
}
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
this.pegarInfo(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
);
//console.log("oi", mutations);
mutations.forEach(function (mutation) {
console.log(mutation.type);
console.log("oi", mutation);
if (target.style.display != "none") {
prateleiraItens.style.display = "none";
titulo.style.display = "none";
} else {
prateleiraItens.style.display = "flex";
titulo.style.display = "block";
}
});
});
observer.observe(target, config);
}
ligaDesligaElementos(observado) {
if (observado.style.display === "none") {
observado.style.display = "block";
} else {
observado.style.display = "none";
}
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
$(elemento).slick({

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

@ -23,6 +23,7 @@
margin: 0 !important;
}
&__prateleira {
//display: none;
margin: 0 !important;
width: 100% !important;
display: flex;
@ -222,7 +223,7 @@
/*CSS Body*/
.container-cart {
#cart-title {
display: none !important;
display: none;
}
.empty-cart-content {
@ -248,7 +249,7 @@
font-family: $font-family-secundary;
font-weight: 400;
font-size: 14px;
&::hover {
&:hover {
cursor: pointer;
}
}