affonso_kopmann/m3-academy-template-checkout-affonso-kopmann
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 função que monitora se o carrinho está vazio

Browse Source
This commit is contained in:
Caroline Moran 2022-12-08 11:01:04 -04:00
parent b00b7b8594
commit 2dab582c69
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,15 +7,28 @@ export default class Footer {
async init() {
await this.selectors();
console.log(this.item);
// this.onUpdate();
}
async selectors() {
this.item = await waitElement("#my-element", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
//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");
}
onUpdate() {
//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
// 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 config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
console.log(mutation.type);
});
});
observer.observe(target, config);
}
async addCarrossel() {
const elemento = await waitElement("#my-element");