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: footer

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2022-12-17 11:40:16 -03:00
parent 3d9e69b2a4
commit 286c2a7318
1 changed files with 55 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,9 +15,9 @@ export default class Footer {
//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.divFooter = await waitElement(".footerCheckout__wrapper"); this.divFooter = await waitElement(".footerCheckout__wrapper");
} }
onUpdate() { onUpdate() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //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 // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
@ -33,7 +33,7 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement("#my-element"); const elemento = await waitElement(".slick");
$(elemento).slick({ $(elemento).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
@ -50,8 +50,8 @@ export default class Footer {
<ul class="footerCheckout__stamps"> <ul class="footerCheckout__stamps">
<li> <li>
<span class="footerCheckout__payments"> <span class="footerCheckout__payments">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="mastercard" style="width: 35px; margin-right: 13px; margin-left: 137px; "> <img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="mastercard" style="width: 35px; margin-right: 13px; margin-left: 137px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="visa" style="width: 35px; margin-right: 13px"> <img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="visa" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="american" style="width: 35px; margin-right: 13px;"> <img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="american" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="elo" style="width: 35px; margin-right: 13px;"> <img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="elo" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="hipercard" style="width: 35px; margin-right: 13px;"> <img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="hipercard" style="width: 35px; margin-right: 13px;">
@ -86,4 +86,28 @@ 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);
// });
// });
// }
} }