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.buildIconList();
this.buildDevelopedByList();
this.buildSlickItems();
await this.buildSlickItems();
await this.addCarrossel();
this.onUpdate();
}
@ -29,56 +30,51 @@ export default class Footer {
window.addEventListener("hashchange", this.onUpdate.bind(this));
}
buildSlickItems() {
const slickItems = fetch(
async buildSlickItems() {
const response = await fetch(
"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 li = document.createElement("li");
li.classList.add("prateleira__option");
const ul = document.createElement("ul");
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) => {
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() {
@ -164,18 +160,10 @@ export default class Footer {
let observer = new MutationObserver((mutations) => {
mutations.forEach(
function (mutation) {
console.log(mutation);
if (mutation.type === "attributes" && mutation.attributeName === "style") {
if (target.style.display === "none") {
console.log("carrinho cheio");
if (target.style.display === "none")
this.footerPrateleira.style.display = "";
if (!this.footerPrateleira.classList.contains("slick-initialized"))
this.addCarrossel();
} else {
this.footerPrateleira.style.display = "none";
console.log("carrinho vazio");
}
else this.footerPrateleira.style.display = "none";
}
}.bind(this)
);
@ -184,9 +172,9 @@ export default class Footer {
observer.observe(target, config);
}
addCarrossel() {
async addCarrossel() {
const elemento = this.footerPrateleira;
$(elemento).slick({
await $(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
responsive: [