Vitor_soares/m3-academy-template-checkout-vitor-soares
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona função remove slick carrinho vazio

Browse Source
This commit is contained in:
Vitor Soares 2022-12-19 00:21:19 -03:00
parent b09f8ba7a0
commit ad706045a6
1 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,21 +3,20 @@ import { waitElement } from "m3-utils";
export default class Footer { export default class Footer {
constructor() { constructor() {
this.init(); this.init();
} }
async init() { async init() {
await this.selectors(); await this.selectors();
this.onUpdate(); // this.onUpdate();
this.showPrateleira(); this.showPrateleira();
this.addCarrossel(); // this.addCarrossel();
this.displaySlick();
} }
async selectors() { async selectors() {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //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 // 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.footerStamps = await waitElement(".footerCheckout__stamps");
this.footerAddress = await waitElement(".footerCheckout__address"); this.footerAddress = await waitElement(".footerCheckout__address");
this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy"); this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
@ -40,16 +39,13 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
showPrateleira() { showPrateleira() {
let pratileira = this.footerPratileira; let prateleira = this.footerPrateleira;
pratileira.innerHTML = ` prateleira.innerHTML = `
<h2 class="prateleira-title"> Você também pode gostar:</h2> <h2 class="prateleira-title"> Você também pode gostar:</h2>
<ul class=" container-carrossel-item"></ul> <ul class=" container-carrossel-item"></ul>
`;
`
fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319") fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
@ -74,11 +70,8 @@ export default class Footer {
</div> </div>
<button class="prateleira-button"> ver produto</button> <button class="prateleira-button"> ver produto</button>
` `
pratileira.children[1].appendChild(li) prateleira.children[1].appendChild(li)
// console.log(pratileira)
}); });
@ -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() { async addCarrossel() {
const elemento = await waitElement(".container-carrossel-item"); const elemento = await waitElement(".container-carrossel-item");
$(elemento).slick({ $(elemento).slick({