refactor: altera codigo footer

This commit is contained in:
Rafael Sampaio de Oliveira 2022-12-12 17:22:09 -03:00
parent f1892966b8
commit bd94315736

View File

@ -10,10 +10,7 @@ export default class Footer {
await this.selectors();
this.events();
this.cartUpdate();
this.items = await waitElement(".footerCheckout__prateleira-container", {
timeout: 5000,
interval: 1,
});
this.items = await waitElement(".footerCheckout__prateleira-container");
console.log(this.items, "console de items");
this.renderItems();
await this.addCarrossel();
@ -22,38 +19,15 @@ export default class Footer {
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", {
timeout: 5000,
interval: 1,
});
this.checkoutVazio = await waitElement(".empty-cart-content");
this.cartTitle = await waitElement("#cart-title");
this.prateleira = await waitElement(".footerCheckout__prateleira", {
timeout: 5000,
interval: 1,
});
this.prateleira = await waitElement(".footerCheckout__prateleira");
}
events() {
window.addEventListener("hashchange", this.outPrateleira.bind(this));
}
async fetchApiData() {
return fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
)
.then((resp) => resp.json())
.then((data) => {
const products = data.map((prod) => ({
name: prod.productName,
skus: prod.items.map((item) => item.name),
image: prod.items[0].images[0].imageUrl,
link: prod.link,
}));
return products;
});
}
cartUpdate() {
console.log("cartUpdate");
//Função que fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
@ -80,6 +54,23 @@ export default class Footer {
observer.observe(target, config);
}
async fetchApiData() {
return fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
)
.then((resp) => resp.json())
.then((data) => {
const products = data.map((prod) => ({
name: prod.productName,
skus: prod.items.map((item) => item.name),
image: prod.items[0].images[0].imageUrl,
link: prod.link,
}));
return products;
});
}
renderPrateleira() {
let itemsStructure = `
<div class="footerCheckout__prateleira__title">
@ -94,7 +85,7 @@ export default class Footer {
this.prateleira.innerHTML = itemsStructure;
}
async renderItems() {
renderItems() {
let itemsCards = ``;
this.list.forEach((item) => {
const sku = item.skus.map((resp) => `<li>${resp}</li>`);
@ -129,7 +120,6 @@ export default class Footer {
}
outPrateleira(e) {
console.log(e, "outPrateleira");
if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") {
this.prateleira.classList.add("inactive");
} else {