forked from M3-Academy/m3-academy-template-checkout
feat(footer): adicionei as imagens de pagamento
This commit is contained in:
parent
30555d9098
commit
b780c5d4bd
@ -5,19 +5,41 @@ export default class Footer {
|
|||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
payments() {
|
||||||
|
this.paymentTypesIconsContainer.innerHTML = "";
|
||||||
|
const paymentTypes = [
|
||||||
|
"masterCardM3Academy",
|
||||||
|
"visaM3Academy",
|
||||||
|
"amexM3Academy",
|
||||||
|
"eloM3Academy",
|
||||||
|
"hiperCardM3Academy",
|
||||||
|
"paypalM3Academy",
|
||||||
|
"boletoM3Academy",
|
||||||
|
];
|
||||||
|
paymentTypes.forEach((paymentType) => {
|
||||||
|
const image = document.createElement("img");
|
||||||
|
image.src = `https://agenciamagma.vteximg.com.br/arquivos/${paymentType}.png`;
|
||||||
|
this.paymentTypesIconsContainer.appendChild(image);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
async init() {
|
async init() {
|
||||||
await this.selectors();
|
await this.selectors();
|
||||||
|
this.payments();
|
||||||
// this.onUpdate();
|
// this.onUpdate();
|
||||||
}
|
}
|
||||||
|
|
||||||
async selectors() {
|
async selectors() {
|
||||||
|
this.paymentTypesIconsContainer = await waitElement(
|
||||||
|
".footerCheckout__stamps li:first-of-type"
|
||||||
|
);
|
||||||
//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");
|
||||||
}
|
}
|
||||||
|
|
||||||
onUpdate() {
|
onUpdate() {
|
||||||
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
|
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos
|
||||||
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
|
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
|
||||||
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
|
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
|
||||||
let target = this.checkoutVazio;
|
let target = this.checkoutVazio;
|
||||||
@ -38,3 +60,5 @@ export default class Footer {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// final
|
||||||
|
Loading…
Reference in New Issue
Block a user