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

feat(footer):adiciona funcao footer

Browse Source
This commit is contained in:
Vinicius 2022-12-19 00:33:15 -02:00
parent 29509d938a
commit fb3b5ddb5b
1 changed files with 23 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,14 +5,16 @@ export default class Footer {
this.init();
}
async Init() {
this.list = await this.fetchPrat();
async init() {
this.list = await this.fetchPrateleira();
await this.selectors();
// this.onUpdate();
this.createPrat();
this.createPrateleira();
this.prateleira = await waitElement(".footerCheckout__carrossel-itens");
this.itensPrat();
this.itensPrateleira();
this.addCarrossel();
this.creditCardIconsHTML();
this.developedByIconsHTML();
}
@ -26,29 +28,22 @@ export default class Footer {
this.developedByIcons = await waitElement(".footerCheckout__developedBy");
}
// onUpdate() {
// let target = this.checkoutVazio;
// let config = { childList: true, attributes: true };
// let observer = new MutationObserver((mutations) => {
// let removeClassh3 = document.getElementById("removeClassh3");
// let removeClassul = document.getElementById("removeClassul");
// mutations.forEach(function (mutation) {
// const checkoutTarget = mutation.target.attributes.style.nodeValue;
// console.log(checkoutTarget);
// if (checkoutTarget === "display: none;") {
// removeClassh3.classList.remove("displayNone");
// removeClassul.classList.remove("displayNone");
// } else if (checkoutTarget === "display: block;") {
// removeClassh3.classList.add("displayNone");
// removeClassul.classList.add("displayNone");
// }
// });
// });
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;
letconfig = { childList: true, attributes: true };
letobserver = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
console.log(mutation.type);
});
});
// observer.observe(target, config);
// }
observer.observe(target, config);
}
createPrat() {
createPrateleira() {
if (this.itensShelf) {
this.itensShelf.innerHTML = `
<div class="footerCheckout__prateleira-title">
@ -59,7 +54,7 @@ export default class Footer {
}
}
async itensPrat() {
async itensPrateleira() {
letstructure = "";
this.list.forEach((response) => {
@ -77,7 +72,7 @@ export default class Footer {
this.prateleira.innerHTML = structure;
}
async fetchPrat() {
async fetchPrateleira() {
constapi =
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
return fetch(api)