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

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

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