forked from M3-Academy/m3-academy-template-checkout
refactor: altera codigo footer
This commit is contained in:
parent
f1892966b8
commit
bd94315736
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user