anacarolinaduartecavalcante/m3-academy-template-checkout-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adicionando função de remover e adicionar slick

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-18 18:11:42 -03:00
parent 904d0b98d8
commit 76a058a0e5
2 changed files with 73 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,13 +7,12 @@ export default class Footer {
async init() {
await this.selectors();
this.onUpdate();
// this.ListProducts();
await this.onUpdate();
this.footerCheckoutPayments();
this.footerCheckoutDevelopedBy();
await this.ListProducts();
}
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
@ -22,53 +21,41 @@ export default class Footer {
this.Vtexpci = await waitElement(".footerCheckout__vtexpci");
this.DevelopedBy = await waitElement(".footerCheckout__developedBy");
this.sliderProducts = 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.type);
});
});
observer.observe(target, config);
}
async ListProducts() {
this.sliderProducts.innerHTML += `<h2>Você também pode gostar:</h2>
this.sliderProducts.innerHTML += `<h2>Você também pode gostar:</h2>
<ul class="footerCheckout__plateleira__list"></ul>`;
const response = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
.then((response) => response.json());
const response = await fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
).then((response) => response.json());
response.forEach((produto) => {
const image = produto.items[0].images[0].imageUrl;
const name = produto.productName;
const footerCheckoutPrateleiraList = document.querySelector(".footerCheckout__plateleira__list");
response.forEach((produto) => {
const image = produto.items[0].images[0].imageUrl;
const name = produto.productName;
const footerCheckoutPrateleiraList = document.querySelector(
".footerCheckout__plateleira__list"
);
footerCheckoutPrateleiraList.innerHTML += `
footerCheckoutPrateleiraList.innerHTML += `
<li class="cards">
<img src="${image}" alt="" class="cards__product__img"/>
<h3 class="cards__product__name">${name}</h3>
<ul class="cards__product__sizes">
${produto.items.map((name) => {return `<li>${name.name}</li>`;}).join("")}
${produto.items
.map((name) => {
return `<li>${name.name}</li>`;
})
.join("")}
</ul>
<a href="${produto.link}">Ver produto</a>
</li>
`;
});
this.addCarrossel();
});
this.addCarrossel();
}
async addCarrossel() {
const elemento = await waitElement(".footerCheckout__plateleira__list");
$(elemento).slick({
@ -77,20 +64,20 @@ export default class Footer {
arrows: true,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToShow: 3
}
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToShow: 3,
},
},
{
breakpoint: 377,
settings: {
slidesToShow: 2,
slidesToShow: 2
}
}
]
breakpoint: 377,
settings: {
slidesToShow: 2,
slidesToShow: 2,
},
},
],
});
}
@ -126,6 +113,42 @@ export default class Footer {
`;
}
async 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 myCart = document.querySelector("#cart-title");
let target = this.checkoutVazio;
let observer = new MutationObserver((mutations) => {
mutations.forEach(() => {
if (target.style.display == "none") {
this.sliderProducts.classList.remove("disable");
myCart.classList.remove("disable");
this.ListProducts();
} else {
this.sliderProducts.classList.add("disable");
myCart.classList.add("disable");
this.sliderProducts.innerHTML = "";
}
});
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
if (target.style.display == "none") {
this.sliderProducts.classList.remove("disable");
this.sliderProducts.innerHTML = "";
this.ListProducts();
}
} else {
this.sliderProducts.classList.add("disable");
this.sliderProducts.innerHTML = "";
}
});
});
observer.observe(this.checkoutVazio, {
attributes: true,
});
}
}

5
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -443,4 +443,7 @@
}
}
// slick
.disable {
display: none !important;
}