feat: adiciona função remove slick carrinho vazio

This commit is contained in:
Vitor Soares 2022-12-19 00:21:19 -03:00
parent b09f8ba7a0
commit ad706045a6

View File

@ -3,21 +3,20 @@ import { waitElement } from "m3-utils";
export default class Footer {
constructor() {
this.init();
}
async init() {
await this.selectors();
this.onUpdate();
// this.onUpdate();
this.showPrateleira();
this.addCarrossel();
// this.addCarrossel();
this.displaySlick();
}
async selectors() {
//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.footerPratileira = await waitElement(".footerCheckout__prateleira");
this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
this.footerStamps = await waitElement(".footerCheckout__stamps");
this.footerAddress = await waitElement(".footerCheckout__address");
this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
@ -40,16 +39,13 @@ export default class Footer {
observer.observe(target, config);
}
showPrateleira() {
let pratileira = this.footerPratileira;
pratileira.innerHTML = `
let prateleira = this.footerPrateleira;
prateleira.innerHTML = `
<h2 class="prateleira-title"> Você também pode gostar:</h2>
<ul class=" container-carrossel-item"></ul>
`
`;
fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
@ -74,11 +70,8 @@ export default class Footer {
</div>
<button class="prateleira-button"> ver produto</button>
`
pratileira.children[1].appendChild(li)
// console.log(pratileira)
prateleira.children[1].appendChild(li)
});
@ -127,6 +120,27 @@ export default class Footer {
`;
}
async displaySlick() {
const orderForm = await window.vtexjs.checkout.getOrderForm();
const items = orderForm.items.length;
$(window).on("orderFormUpdated.vtex", (evt, oF) => {
if (oF.items.length <= 0) {
this.footerPrateleira.style.display = "none";
} else {
this.addCarrossel();
this.footerPrateleira.style.display = "block";
}
if (window.location.hash === "#/shipping" || window.location.hash === "#/payment") {
this.footerPrateleira.style.display = "none";
}
});
if (items === 0) {
this.footerPrateleira.style.display = "none";
}
}
async addCarrossel() {
const elemento = await waitElement(".container-carrossel-item");
$(elemento).slick({