fix(prateleira): Concerta prateleira que estava aparecendo nas paginas fora de cart e checkout vazio #13

Merged
ManuelaLuanaSchumackerTavares merged 1 commits from hotfix/prateleira-slick into develop 2022-12-18 21:44:42 +00:00
2 changed files with 34 additions and 35 deletions

View File

@ -9,17 +9,13 @@ export default class Footer {
this.list = await this.apiRequest();
await this.selectors();
this.footerIcons();
this.onUpdate();
if (window.location.hash === "#/cart") {
await this.createContainerShelf();
}
if (window.location.hash !== "#/cart") {
await this.removeShelf();
await this.onUpdate();
}
this.shelfItem = await waitElement(".footerCheckout__shelfList");
await this.createShelf();
this.events();
this.addCarrossel();
console.log(this.list);
}
async selectors() {
@ -31,23 +27,23 @@ export default class Footer {
this.checkoutVazio = await waitElement(".empty-cart-content");
}
onUpdate() {
events() {
window.addEventListener("hashchange", this.hashChange.bind(this));
}
async 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.type);
console.log(mutation);
const footer = document.querySelector(".footerCheckout");
console.log(footer);
if (target.attributes.style.nodeValue == "display: none;") {
footer.children[0].classList.remove("ativado");
} else {
footer.children[0].classList.add("ativado");
console.log("ndidubazsbf");
mutations.map((mutation) => {
if (mutation.target.attributes.style.nodeValue == "display: none;") {
this.createContainerShelf();
} else if (mutation.target.attributes.style.nodeValue == "display: block;") {
this.removeShelf();
}
});
});
@ -55,8 +51,7 @@ export default class Footer {
observer.observe(target, config);
}
async createContainerShelf() {
if (this.shelf) {
createContainerShelf() {
this.shelf.innerHTML = `
<div class="footerCheckout__prateleira-title">
<h2>Você também pode gostar:</h2>
@ -66,15 +61,17 @@ export default class Footer {
`;
}
}
async removeShelf() {
if (this.shelf) {
this.shelf.innerHTML = "";
hashChange(e) {
console.log(e);
if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") {
this.shelf.classList.add("desativado");
} else {
this.shelf.classList.remove("desativado");
}
}
async createShelf() {
createShelf() {
let structure = "";
this.list.forEach((resp) => {
@ -91,7 +88,10 @@ export default class Footer {
});
this.shelfItem.innerHTML = structure;
// console.log("ioaioaioiaoioa");
}
removeShelf() {
this.shelf.innerHTML = "";
}
async apiRequest() {
@ -171,7 +171,6 @@ export default class Footer {
}
const footerDevelopedBy = document.getElementsByClassName("footerCheckout__developedBy");
// console.log(footerDevelopedBy);
if (footerDevelopedBy) {
const vtexIcon = footerDevelopedBy[0].children[0].children[0];

View File

@ -346,7 +346,7 @@
}
}
.ativado {
.desativado {
display: none !important;
}
}