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

98
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,56 +30,51 @@ 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();
})
.then(function (data) {
const slickItems = data.map((item) => {
const div = document.createElement("div");
const ul = document.createElement("ul"); const responseJsonData = await response.json().then(function (data) {
return data;
});
const items = item.items; const buildSlickItems = async function (data) {
const slickItems = data.map((item) => {
const div = document.createElement("div");
items.forEach((item) => { const ul = document.createElement("ul");
const li = document.createElement("li");
li.classList.add("prateleira__option");
li.innerHTML = item.name; const items = item.items;
ul.appendChild(li);
});
div.classList.add("prateleira__item");
const jpg = item.items[0].images[0].imageUrl;
div.innerHTML = `
<img class="prateleira__image" src="${jpg}" />
<h2 class="prateleira__product-name">${item.productName}</h2>
<ul class="prateleira__options">
${ul.innerHTML}
</ul>
<button class="prateleira__button">VER PRODUTO</button>
`;
return div;
});
return slickItems;
});
const buildSlickItems = () => {
slickItems.then((items) => {
items.forEach((item) => { items.forEach((item) => {
this.footerPrateleira.appendChild(item); const li = document.createElement("li");
}); li.classList.add("prateleira__option");
});
};
buildSlickItems(); li.innerHTML = item.name;
ul.appendChild(li);
});
div.classList.add("prateleira__item");
const jpg = item.items[0].images[0].imageUrl;
div.innerHTML = `
<img class="prateleira__image" src="${jpg}" />
<h2 class="prateleira__product-name">${item.productName}</h2>
<ul class="prateleira__options">
${ul.innerHTML}
</ul>
<button class="prateleira__button">VER PRODUTO</button>
`;
return div;
});
await slickItems.forEach((item) => {
this.footerPrateleira.appendChild(item);
});
}.bind(this);
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: [