forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'refactor: altera codigo footer' (#6) from refactor/altera-codigo-footer into development
Reviewed-on: #6
This commit is contained in:
commit
fd3bebd3c9
@ -10,10 +10,7 @@ export default class Footer {
|
|||||||
await this.selectors();
|
await this.selectors();
|
||||||
this.events();
|
this.events();
|
||||||
this.cartUpdate();
|
this.cartUpdate();
|
||||||
this.items = await waitElement(".footerCheckout__prateleira-container", {
|
this.items = await waitElement(".footerCheckout__prateleira-container");
|
||||||
timeout: 5000,
|
|
||||||
interval: 1,
|
|
||||||
});
|
|
||||||
console.log(this.items, "console de items");
|
console.log(this.items, "console de items");
|
||||||
this.renderItems();
|
this.renderItems();
|
||||||
await this.addCarrossel();
|
await this.addCarrossel();
|
||||||
@ -22,38 +19,15 @@ export default class Footer {
|
|||||||
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");
|
||||||
timeout: 5000,
|
|
||||||
interval: 1,
|
|
||||||
});
|
|
||||||
this.cartTitle = await waitElement("#cart-title");
|
this.cartTitle = await waitElement("#cart-title");
|
||||||
this.prateleira = await waitElement(".footerCheckout__prateleira", {
|
this.prateleira = await waitElement(".footerCheckout__prateleira");
|
||||||
timeout: 5000,
|
|
||||||
interval: 1,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
events() {
|
events() {
|
||||||
window.addEventListener("hashchange", this.outPrateleira.bind(this));
|
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() {
|
cartUpdate() {
|
||||||
console.log("cartUpdate");
|
console.log("cartUpdate");
|
||||||
//Função que fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
|
//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);
|
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() {
|
renderPrateleira() {
|
||||||
let itemsStructure = `
|
let itemsStructure = `
|
||||||
<div class="footerCheckout__prateleira__title">
|
<div class="footerCheckout__prateleira__title">
|
||||||
@ -94,7 +85,7 @@ export default class Footer {
|
|||||||
this.prateleira.innerHTML = itemsStructure;
|
this.prateleira.innerHTML = itemsStructure;
|
||||||
}
|
}
|
||||||
|
|
||||||
async renderItems() {
|
renderItems() {
|
||||||
let itemsCards = ``;
|
let itemsCards = ``;
|
||||||
this.list.forEach((item) => {
|
this.list.forEach((item) => {
|
||||||
const sku = item.skus.map((resp) => `<li>${resp}</li>`);
|
const sku = item.skus.map((resp) => `<li>${resp}</li>`);
|
||||||
@ -129,7 +120,6 @@ export default class Footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
outPrateleira(e) {
|
outPrateleira(e) {
|
||||||
console.log(e, "outPrateleira");
|
|
||||||
if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") {
|
if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") {
|
||||||
this.prateleira.classList.add("inactive");
|
this.prateleira.classList.add("inactive");
|
||||||
} else {
|
} else {
|
||||||
|
Loading…
Reference in New Issue
Block a user