diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 0ad751e..5aeb264 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -9,7 +9,6 @@ export default class Footer {
await this.selectors();
this.onUpdate();
this.footerList();
- await this.prateleiraFooterHTML();
}
async selectors() {
@@ -22,23 +21,6 @@ export default class Footer {
this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
}
- 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);
- // console.log(mutation.target);
- });
-
- //monitorar display none -> target.style.display === "none"
- });
- observer.observe(target, config);
- }
-
async prateleiraFooterHTML() {
this.footerPrateleira.innerHTML += `
@@ -158,4 +140,30 @@ export default class Footer {
`;
}
+
+ 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
+
+ const footerPrateleiraList = document.querySelector(".footerCheckout__prateleira__list");
+ let target = this.checkoutVazio;
+ let observer = new MutationObserver((mutations) => {
+ mutations.forEach(() => {
+ if (target.style.display == "none") {
+ this.footerPrateleira.classList.remove("desable");
+ this.prateleiraFooterHTML();
+ } else {
+ this.footerPrateleira.classList.add("desable");
+ this.footerPrateleira.innerHTML = "";
+ footerPrateleiraList.innerHTML = "";
+ }
+ });
+
+ //monitorar display none -> target.style.display === "none"
+ });
+ observer.observe(this.checkoutVazio, {
+ attributes: true,
+ });
+ }
}
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 5c9484b..7f83a06 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -184,8 +184,15 @@
}
}
+ .desable {
+ display: none;
+ }
+
&__prateleira {
+
+
+
&__item {
display: flex !important;
flex-direction: column;