AdilsonFernandoNevesOrnellas/m3-academy-template-checkout-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: css 1 parte

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2022-12-18 19:16:21 -03:00
parent 286c2a7318
commit 03993e0462
1 changed files with 48 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,15 +7,16 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.footerFlex(); this.onUpdate();
// this.onUpdate(); // this.apiFetch();
this.footer();
} }
async selectors() { async selectors() {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //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 // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
this.divprateleira = await waitElement(".footerCheckout__prateleira"); this.divPrateleira = await waitElement(".footerCheckout__prateleira");
this.divFooter = await waitElement(".footerCheckout__wrapper"); this.divFooter = await waitElement(".footerCheckout__wrapper");
} }
onUpdate() { onUpdate() {
@ -32,14 +33,56 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
// apiFetch() {
// let pratileira = this.divPrateleira;
// pratileira.innerHTML = `
// <h2 class="text-foot"> Você Também pode gosta:</h2>
// <ul class="ulSlick"></ul>`;
// fetch(
// "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319%22"
// )
// .then((Response) => Response.json())
// .then(function (data) {
// return data.map(function (produto) {
// let li = document.createElement("li");
// li.setAttribute("id", produto.productId);
// li.innerHTML = `
// <img class="color-img" src = " ${produto.items[0].images[0].imageUrl}"/>
// <><p class="numeProduct">${
// produto.productName
// }</p><div class="container-tamanho-cores">
// ${produto.items
// .map((name) => {
// return `<a name="tamanho" class="tamanho"> ${name.name}
// </a>`;
// })
// .join(" ")}
// </div><button class="bottons"> ver produto</button></>`;
// pratileira.children[1].appendChild(li);
// console.log(pratileira);
// });
// })
// .then(() => {
// this.addCarrossel();
// });
// }
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement(".slick"); const elemento = await waitElement(".ulSlick");
$(elemento).slick({ $(elemento).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
}); });
} }
footerFlex() { footer() {
this.divFooter.innerHTML = ` this.divFooter.innerHTML = `
<hr></hr> <hr></hr>
<div class="conteiner_footer"> <div class="conteiner_footer">
@ -86,28 +129,4 @@ export default class Footer {
</div> </div>
`; `;
} }
// fetch() {
// this.divprateleira.innerHTML = `
// <h2>Você também pode gostar </h2>
// <ul class="slick"></ul>
// `;
// const api = `https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`;
// this.fetch(api)
// .then((responsive) => Response.json())
// .then(function(data){
// return data.map(function(product){
// let cadaCard = document.createElement("li")
// cadaCard.setAttribute("class", card)
// cadaCard.innerHTML = `
// <img src="${product.itens[0].images[0].imageUrl}"></img>
// <p class="nome">${product.productName}</p>
// <div clas = "tamanhos">${product.itens.map((name) => {
// return `<a name = "tamanho" class = "tamanho">$(name.name)</a>`;
// }).join(**)} </div>;
// <button class="opção">Ver produtos</button>
// `;
// divprateleira.children[1].appendChild(cadaCard);
// });
// });
// }
} }