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

86
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,
@ -44,46 +44,70 @@ export default class Footer {
<hr></hr> <hr></hr>
<div class="conteiner_footer"> <div class="conteiner_footer">
<div class="footerCheckout__address"> <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> </div>
<ul class="footerCheckout__stamps"> <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> <li>
<span class="footerCheckout__payments"> <span class="footerCheckout__payments">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="logoCertificado" style="width: 53px; margin-right: 90px;"> <img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="mastercard" style="width: 35px; margin-right: 13px; margin-left: 137px;">
</span> <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>
</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"> <ul class="footerCheckout__developedBy">
<li> <li>
<a href="https://vtex.com/br-pt/"> <a href="https://vtex.com/br-pt/">
<span>Powered By</span> <span>Powered By</span>
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="logoVTEX" style="width: 45px;"> <img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="logoVTEX" style="width: 45px;">
</a> </a>
</li> </li>
<li style="width: 217px; > <li style="width: 217px; >
<a href="https://agenciam3.com/"> <a href="https://agenciam3.com/">
<span>Developed By</span> <span>Developed By</span>
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="logoM3" style="width: 29px; margin-left: 10px;"> <img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="logoM3" style="width: 29px; margin-left: 10px;">
</a> </a>
</li> </li>
</ul> </ul>
</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);
// });
// });
// }
} }