SavioCarvalhoMoraes/m3-academy-template-checkout-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/footer #2

Merged
SavioCarvalhoMoraes merged 4 commits from feature/footer into development 2022-12-14 22:32:01 +00:00
Conversation 0 Commits 4 Files Changed 8 +32 -3
2 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 007cf8b13c - Show all commits

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

@ -11,12 +11,18 @@ export default class Footer {
await this.pegarInfo(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
);
await this.renderIconCreditCards();
await this.renderIconVtexPci();
await this.renderIconsDeveloped();
}
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");
this.footerIconsCreditCards = await waitElement(".footerCheckout__payments");
this.footerIconVtexPci = await waitElement(".footerCheckout__vtexpci");
this.footerIconsDeveloped = await waitElement(".footerCheckout__developedBy");
}
onUpdate() {
@ -40,19 +46,41 @@ export default class Footer {
slidesToScroll: 1,
});
}
produto(data) {
produtos(data) {
return {
imagem: data["items"][0]["images"][0]["imageUrl"],
nome: data["productName"],
tamanho: data["items"].map((val) => val["name"]),
};
}
async pegarInfo(url, tratamento) {
async pegarInfo(url) {
const response = await fetch(url);
//console.log(response);
const data = await response.json();
//console.log(data);
const Items = data.map((val) => this.produto(val));
const Items = data.map((val) => this.produtos(val));
console.log(Items);
}
renderIconCreditCards() {
this.footerIconsCreditCards.innerHTML = `
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" /></span>
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" /></span>
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" /></span>
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" /></span>
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" /></span>
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" /></span>
<span><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" /></span>`;
}
renderIconVtexPci() {
this.footerIconVtexPci.innerHTML = `<span><img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" /></span>`;
}
renderIconsDeveloped() {
this.footerIconsDeveloped.innerHTML = `
<li><a href="https://vtex.com/br-pt/"><span>Powered By</span><img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"/> </a></li>
<li><a href="https://vtex.com/br-pt/"><span>Developed By</span><img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/> </a></li>`;
}
}

1
checkout/src/arquivos/js/components/Header.js
View File

@ -22,6 +22,7 @@ export default class Header {
});*/
this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
this.footerIconsCreditCard = await waitElement(".footerCheckout__payments");
}
progressBarHTML() {
if (this.progressBar && window.innerWidth > 1024) {