Vitor_soares/m3-academy-template-checkout-vitor-soares
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona prateleira no slick

Browse Source
This commit is contained in:
Vitor Soares 2022-12-18 18:56:55 -03:00
parent d08b6b6f9a
commit 89d1e71ba9
1 changed files with 118 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,17 +3,26 @@ import { waitElement } from "m3-utils";
export default class Footer {
constructor() {
this.init();
}
async init() {
await this.selectors();
// this.onUpdate();
this.onUpdate();
this.showPrateleira();
this.addCarrossel();
}
async selectors() {
//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.footerPratileira = await waitElement(".footerCheckout__prateleira");
this.footerStamps = await waitElement(".footerCheckout__stamps");
this.footerAddress = await waitElement(".footerCheckout__address");
this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
this.checkoutVazio = await waitElement(".empty-cart-content");
this.cartTitulo = await waitElement("#cart-title");
}
onUpdate() {
@ -30,11 +39,118 @@ export default class Footer {
observer.observe(target, config);
}
showPrateleira() {
let pratileira = this.footerPratileira;
pratileira.innerHTML = `
<h2 class="text-foot"> Você Também pode gosta:</h2>
<ul class=" container-carrossel-item"></ul>
`
fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
.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}" alt = Imagem "${produto.productName}" />
<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();});
this.footerStamps.innerHTML = `
<li class="footerCheckout__listImage ">
<img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
</li>
<li class="footerCheckout__listImage">
<img src =" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png">
</li>
<li class="footerCheckout__listImage">
<img src =" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png">
</li>
<li class="footerCheckout__listImage">
<img src =" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png">
</li>
<li class="footerCheckout__listImage">
<img src =" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png">
</li>
<li class="footerCheckout__listImage">
<img src =" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png">
</li>
<li class="footerCheckout__listImage">
<img src =" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png">
</li>
<li><span class=" footerCheckout__stamps__divider"></span></li>
<li class="footerCheckout__listImage">
<img src =" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png">
</li>
`;
this.footerDevelopedBy.innerHTML = `
<li class=" list ">
<span>Power By</span>
<img class="vtex-rigth1" src=" https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" />
<span>Developed By</span>
<img class="vtex-rigth2" src=" https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" />
</li>
`;
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
const elemento = await waitElement(".container-carrossel-item");
$(elemento).slick({
infinite: false,
arrows: true,
variabreWidth: true,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1025,
settings:
{slidesToShow: 3,
slidesToScroll: 1,}
},
{
breakpoint:376,
settings:
{slidesToShow: 2,
slidesToScroll: 1,}
}
]
});
}
}