ueberjames/m3-academy-template-checkout-ueber-james
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

estrutura para add slick

Browse Source
This commit is contained in:
Ueber James Santos 2022-12-14 14:52:03 -03:00
parent 9321f02bf5
commit 84adf68984
2 changed files with 96 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,27 @@
/* eslint-disable prettier/prettier */
import { waitElement } from "m3-utils";
export default class Footer {
constructor() {
this.init();
this.mostraFooter();
this.addCarrossel();
}
async init() {
await this.selectors();
this.mostraFooter();
this.addCarrossel();
// this.onUpdate();
}
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.footerAddress = await waitElement(".footerCheckout__address");
this.footerStamps = await waitElement(".footerCheckout__stamps");
this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
this.checkoutVazio = await waitElement(".empty-cart-content");
}
@ -30,8 +39,90 @@ export default class Footer {
observer.observe(target, config);
}
mostraFooter(){
let pratileira = this.footerPratileira;
// let adress = this.footerAddress;
// let developedBy = this.footerDevelopedBy;
// let icon = this.footerStamps;
pratileira.innerHTML = `
<h2> 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 = `
<figure>
<img src = " ${produto.items[0].images[0].imageUrl }" alt = Imagem "${produto.productName}" />
</figure>
<div class ="container-tamanho-cores">
<input name="tamanho" type-"radio"/>
${produto.items.map((name)=> {return `<label name="tamanho"> ${name.name}
</label>` })}
</div>
<div>
<button></button>
</div>
`
pratileira.children[1].appendChild(li)
console.log(pratileira)
});
});
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/masterCardM3Academy.png">
</li>
<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/masterCardM3Academy.png">
</li>
<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/masterCardM3Academy.png">
</li>
<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/masterCardM3Academy.png">
</li>
<li class="footerCheckout__listImage">
<img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
</li>
`
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
const elemento = await waitElement(".container-carrossel-item");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,

7
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -2,14 +2,15 @@
.footerCheckout {
border-top: none;
color: $color-gray2;
margin-top: auto;
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
position: fixed;
bottom: 0;
left: 0;
// position: fixed;
// bottom: 0;
// left: 0;
}
&__address {