forked from M3-Academy/m3-academy-template-checkout
feat: footer
This commit is contained in:
parent
3d9e69b2a4
commit
286c2a7318
@ -15,9 +15,9 @@ export default class Footer {
|
||||
//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
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
this.divprateleira = await waitElement(".footerCheckout__prateleira");
|
||||
this.divFooter = await waitElement(".footerCheckout__wrapper");
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
//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
|
||||
@ -33,7 +33,7 @@ export default class Footer {
|
||||
observer.observe(target, config);
|
||||
}
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
const elemento = await waitElement(".slick");
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
@ -44,46 +44,70 @@ export default class Footer {
|
||||
<hr></hr>
|
||||
<div class="conteiner_footer">
|
||||
<div class="footerCheckout__address">
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
</div>
|
||||
|
||||
<ul class="footerCheckout__stamps">
|
||||
<li>
|
||||
<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/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/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/payPalM3Academy.png" alt="paypal" style="width: 35px; margin-right: 13px;">
|
||||
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="boleto" style="width: 35px; margin-right: 13px;">
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="footerCheckout__stamps__divider"></span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="footerCheckout__payments">
|
||||
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="logoCertificado" style="width: 53px; margin-right: 90px;">
|
||||
</span>
|
||||
<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/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/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/payPalM3Academy.png" alt="paypal" style="width: 35px; margin-right: 13px;">
|
||||
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="boleto" style="width: 35px; margin-right: 13px;">
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<li>
|
||||
<span class="footerCheckout__stamps__divider"></span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="footerCheckout__payments">
|
||||
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="logoCertificado" style="width: 53px; margin-right: 90px;">
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="footerCheckout__developedBy">
|
||||
<li>
|
||||
<a href="https://vtex.com/br-pt/">
|
||||
<span>Powered By</span>
|
||||
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="logoVTEX" style="width: 45px;">
|
||||
<span>Powered By</span>
|
||||
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="logoVTEX" style="width: 45px;">
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li style="width: 217px; >
|
||||
<li style="width: 217px; >
|
||||
<a href="https://agenciam3.com/">
|
||||
<span>Developed By</span>
|
||||
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="logoM3" style="width: 29px; margin-left: 10px;">
|
||||
<span>Developed By</span>
|
||||
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="logoM3" style="width: 29px; margin-left: 10px;">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
</li>
|
||||
</ul>
|
||||
</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);
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user