SauloKleinNery/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

fix: Ajusta forma de adicionar o slick

Browse Source
This commit is contained in:
Saulo Klein Nery 2022-12-26 17:55:11 -03:00
parent af34814021
commit 7e74180095
1 changed files with 43 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,8 @@ export default class Footer {
this.events(); this.events();
this.buildIconList(); this.buildIconList();
this.buildDevelopedByList(); this.buildDevelopedByList();
this.buildSlickItems(); await this.buildSlickItems();
await this.addCarrossel();
this.onUpdate(); this.onUpdate();
} }
@ -29,14 +30,16 @@ export default class Footer {
window.addEventListener("hashchange", this.onUpdate.bind(this)); window.addEventListener("hashchange", this.onUpdate.bind(this));
} }
buildSlickItems() { async buildSlickItems() {
const slickItems = fetch( const response = await fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
) );
.then(function (response) {
return response.json(); const responseJsonData = await response.json().then(function (data) {
}) return data;
.then(function (data) { });
const buildSlickItems = async function (data) {
const slickItems = data.map((item) => { const slickItems = data.map((item) => {
const div = document.createElement("div"); const div = document.createElement("div");
@ -66,19 +69,12 @@ export default class Footer {
return div; return div;
}); });
await slickItems.forEach((item) => {
return slickItems;
});
const buildSlickItems = () => {
slickItems.then((items) => {
items.forEach((item) => {
this.footerPrateleira.appendChild(item); this.footerPrateleira.appendChild(item);
}); });
}); }.bind(this);
};
buildSlickItems(); await buildSlickItems(responseJsonData);
} }
buildIconList() { buildIconList() {
@ -164,18 +160,10 @@ export default class Footer {
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
mutations.forEach( mutations.forEach(
function (mutation) { function (mutation) {
console.log(mutation);
if (mutation.type === "attributes" && mutation.attributeName === "style") { if (mutation.type === "attributes" && mutation.attributeName === "style") {
if (target.style.display === "none") { if (target.style.display === "none")
console.log("carrinho cheio");
this.footerPrateleira.style.display = ""; this.footerPrateleira.style.display = "";
else this.footerPrateleira.style.display = "none";
if (!this.footerPrateleira.classList.contains("slick-initialized"))
this.addCarrossel();
} else {
this.footerPrateleira.style.display = "none";
console.log("carrinho vazio");
}
} }
}.bind(this) }.bind(this)
); );
@ -184,9 +172,9 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
addCarrossel() { async addCarrossel() {
const elemento = this.footerPrateleira; const elemento = this.footerPrateleira;
$(elemento).slick({ await $(elemento).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
responsive: [ responsive: [