diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index d03b99f..5c481f5 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,10 +7,25 @@ export default class Footer {
async init() {
await this.selectors();
+ this.events();
this.createFooter();
this.addCarrossel();
this.createPrateleira();
this.onUpdate();
+ this.createMainBtn();
+ }
+ events() {
+ window.addEventListener("hashchange", () => {
+ if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
+ this.footerCheckoutPrateleira.style.display = "flex";
+ }
+ if (window.location.hash != "#/cart") {
+ this.footerCheckoutPrateleira.style.display = "none";
+ }
+ });
+ addEventListener("resize", () => {
+ this.addCarrossel();
+ });
}
async selectors() {
@@ -74,7 +89,7 @@ export default class Footer {
`;
}
- createPrateleira() {
+ async createPrateleira() {
const slickPrat = this.footerCheckoutPrateleira;
slickPrat.innerHTML = `
Você também pode gostar:
`;
@@ -102,30 +117,51 @@ export default class Footer {
item.link
}">Ver Produto`;
slickPrat.children[1].appendChild(li);
+ this.footerCheckoutPrateleira.classList.add("fetch");
});
+ })
+ .then(() => {
+ this.addCarrossel();
});
}
+ createMainBtn() {
+ const btnMainEmpty = document.querySelector("#cart-choose-products");
+ const h2Empty = this.checkoutVazio.children[0];
+ btnMainEmpty.textContent = `CONTINUAR COMPRANDO`;
+ h2Empty.textContent = `SEU CARRINHO ESTÁ VAZIO`;
+ }
+
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 list = this.footerCheckoutPrateleira;
+
+ if (target.style.display == "none" && window.location.hash == "#/cart") {
+ list.style.display = "flex";
+ this.createPrateleira();
+ } else {
+ list.style.display = "none";
+ }
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
+ if (this.footerCheckoutPrateleira.classList.contains("fetch")) {
+ this.createPrateleira();
+ }
mutations.forEach(function (mutation) {
- if (
- mutation.target.style.display === "none" &&
- window.location.href === "https://m3academy.myvtex.com/checkout/#/cart"
- ) {
+ if (mutation.target.style.display != "none") {
+ list.style.display = "none";
} else {
- console.log("block");
+ list.style.display = "flex";
}
});
});
observer.observe(target, config);
}
+
async addCarrossel() {
const elemento = await waitElement(".container-carrossel");
$(elemento).slick({