anacarolinaduartecavalcante/m3-academy-template-checkout-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Footer.js): add conexão com api e carrossel

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-14 06:11:56 -03:00
parent a94be38164
commit f237cb0395
1 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,19 +7,21 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
// this.onUpdate(); this.onUpdate();
this.footerCheckoutStamps(); this.footerCheckoutPayments();
this.footerCheckoutDevelopedBy(); this.footerCheckoutDevelopedBy();
await this.ListProducts();
} }
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");
this.Stamps = await waitElement(".footerCheckout__payments"); this.Payments = await waitElement(".footerCheckout__payments");
this.Vtexpci = await waitElement(".footerCheckout__vtexpci"); this.Vtexpci = await waitElement(".footerCheckout__vtexpci");
this.DevelopedBy = await waitElement(".footerCheckout__developedBy"); this.DevelopedBy = await waitElement(".footerCheckout__developedBy");
this.sliderProducts = await waitElement(".footerCheckout__prateleira"); this.sliderProducts = await waitElement(".footerCheckout__prateleira");
} }
onUpdate() { onUpdate() {
@ -36,16 +38,41 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
async ListProducts() {
const response = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
.then((response) => response.json());
response.forEach((produto) => {
const image = produto.items[0].images[0].imageUrl;
const name = produto.productName;
this.sliderProducts.innerHTML += `
<li class="cards">
<img src="${image}" alt="" class="footerCheckout__product__img"/>
<h3 class="footerCheckout__product__name">${name}</h3>
<ul class="footerCheckout__sizes">
${produto.items.map((name) => {return `<li>${name.name}</li>`;}).join("")}
</ul>
<a href="${produto.link}">Ver produto</a>
</li>
`;
});
this.addCarrossel();
}
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement("#my-element"); const elemento = await waitElement(".footerCheckout__prateleira");
$(elemento).slick({ $(elemento).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
}); });
} }
footerCheckoutStamps() { footerCheckoutPayments() {
this.Stamps.innerHTML = ` this.Payments.innerHTML = `
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="ícone do cartão master card"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="ícone do cartão master card"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="ícone do cartão visa"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="ícone do cartão visa"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="ícone do cartão american express"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="ícone do cartão american express"/>
@ -78,4 +105,3 @@ export default class Footer {
`; `;
} }
} }