Rafael_Sampaio_de_Oliveira/m3-academy-template-checkout-rafael-sampaio
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: altera codigo footer

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2022-12-12 17:22:09 -03:00
parent f1892966b8
commit bd94315736
1 changed files with 21 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
checkout/src/arquivos/js/components/Footer.js
View File

@ -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 {