forked from M3-Academy/m3-academy-template-checkout
feat: cria js prateleira
This commit is contained in:
parent
ffa3756bc7
commit
43eceebee2
@ -7,10 +7,25 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.events();
|
||||
this.createFooter();
|
||||
this.addCarrossel();
|
||||
this.createPrateleira();
|
||||
this.onUpdate();
|
||||
this.createMainBtn();
|
||||
}
|
||||
events() {
|
||||
window.addEventListener("hashchange", () => {
|
||||
if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
|
||||
this.footerCheckoutPrateleira.style.display = "flex";
|
||||
}
|
||||
if (window.location.hash != "#/cart") {
|
||||
this.footerCheckoutPrateleira.style.display = "none";
|
||||
}
|
||||
});
|
||||
addEventListener("resize", () => {
|
||||
this.addCarrossel();
|
||||
});
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
@ -74,7 +89,7 @@ export default class Footer {
|
||||
`;
|
||||
}
|
||||
|
||||
createPrateleira() {
|
||||
async createPrateleira() {
|
||||
const slickPrat = this.footerCheckoutPrateleira;
|
||||
slickPrat.innerHTML = `<h2>Você também pode gostar:</h2>
|
||||
<ul class="container-carrossel"></ul>`;
|
||||
@ -102,30 +117,51 @@ export default class Footer {
|
||||
item.link
|
||||
}">Ver Produto</button>`;
|
||||
slickPrat.children[1].appendChild(li);
|
||||
this.footerCheckoutPrateleira.classList.add("fetch");
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
this.addCarrossel();
|
||||
});
|
||||
}
|
||||
|
||||
createMainBtn() {
|
||||
const btnMainEmpty = document.querySelector("#cart-choose-products");
|
||||
const h2Empty = this.checkoutVazio.children[0];
|
||||
btnMainEmpty.textContent = `CONTINUAR COMPRANDO`;
|
||||
h2Empty.textContent = `SEU CARRINHO ESTÁ VAZIO`;
|
||||
}
|
||||
|
||||
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 list = this.footerCheckoutPrateleira;
|
||||
|
||||
if (target.style.display == "none" && window.location.hash == "#/cart") {
|
||||
list.style.display = "flex";
|
||||
this.createPrateleira();
|
||||
} else {
|
||||
list.style.display = "none";
|
||||
}
|
||||
let config = { childList: true, attributes: true };
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
if (this.footerCheckoutPrateleira.classList.contains("fetch")) {
|
||||
this.createPrateleira();
|
||||
}
|
||||
mutations.forEach(function (mutation) {
|
||||
if (
|
||||
mutation.target.style.display === "none" &&
|
||||
window.location.href === "https://m3academy.myvtex.com/checkout/#/cart"
|
||||
) {
|
||||
if (mutation.target.style.display != "none") {
|
||||
list.style.display = "none";
|
||||
} else {
|
||||
console.log("block");
|
||||
list.style.display = "flex";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement(".container-carrossel");
|
||||
$(elemento).slick({
|
||||
|
Loading…
Reference in New Issue
Block a user