Gabriel_Lehmann/m3-academy-template-checkout-gabriel-lehmann
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() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); // this.onUpdate();
} }
async selectors() { async selectors() {
this.item = await waitElement("#my-element", { //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise this.checkoutVazio = await waitElement(".empty-cart-content");
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }
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() { async addCarrossel() {
const elemento = await waitElement("#my-element"); const elemento = await waitElement("#my-element");