forked from M3-Academy/m3-academy-template-checkout
feat: adiciona footer e chamada de api para patreleira de produtos #2
@ -3,21 +3,94 @@ import { waitElement } from "m3-utils";
|
||||
export default class Footer {
|
||||
constructor() {
|
||||
this.init();
|
||||
this.footerHTML();
|
||||
this.addCarrossel();
|
||||
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.footerHTML();
|
||||
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.footerPrateleira = await waitElement(".footerCheckout__prateleira");
|
||||
this.footerAdress = await waitElement(".footerCheckout__address");
|
||||
this.footerStamps = await waitElement(".footerCheckout__stamps");
|
||||
this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
|
||||
|
||||
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
console.log(this.checkoutVazio)
|
||||
}
|
||||
footerHTML() {
|
||||
const footerPrat = this.footerPrateleira
|
||||
const textAdress = this.footerAdress;
|
||||
const iconCard = this.footerStamps;
|
||||
const developedBy = this.footerDevelopedBy;
|
||||
|
||||
|
||||
footerPrat.innerHTML = `
|
||||
<h2>Você Também pode gostar:</h2>
|
||||
<ul class="container-carousel-item"></ul>
|
||||
`
|
||||
|
||||
fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
|
||||
.then((resp) => resp.json())
|
||||
.then(function (data) {
|
||||
|
||||
return data.map(function (product) {
|
||||
const li = document.createElement("li")
|
||||
li.setAttribute("id", product.productId)
|
||||
li.innerHTML = `
|
||||
<figure>
|
||||
<img src="${product.items[0].images[0].imageUrl}" alt="Imagem ${product.productName}" />
|
||||
<figcaption>${product.productName}</figcaption>
|
||||
</figure>
|
||||
<div>
|
||||
<label name="tamanho">
|
||||
${product.items.name}
|
||||
</label>
|
||||
<input name="tamanho" type="radio"/>
|
||||
</div>
|
||||
<div>
|
||||
<button> </button>
|
||||
</div>
|
||||
`
|
||||
footerPrat.children[1].appendChild(li)
|
||||
console.log(footerPrat.children[1])
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
textAdress.innerHTML = `
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
|
||||
`
|
||||
|
||||
iconCard.innerHTML = `
|
||||
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Imagem Master Card"/></li>
|
||||
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Imagem Visa Card"/></li>
|
||||
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Imagem American Express"/></li>
|
||||
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Imagem Elo Card"/></li>
|
||||
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Imagem Hiper Card"/></li>
|
||||
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Imagem PayPal"/></li>
|
||||
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Imagem Boleto"/></li>
|
||||
<li><span class="footerCheckout__stamps__divider"> </span></li>
|
||||
<li class="footerCheckout__stamps__item"><img class="iconVtex" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Imagem Vtex" /></li>
|
||||
`
|
||||
developedBy.innerHTML = `
|
||||
<li class="footerCheckout__developedBy__item-Vtex"><p>Powered By</p><img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Imagem VTEX"/> </li>
|
||||
<li class= "footerCheckout__developedBy__item-M3"><p>Developed By</p><img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt"Imagem M3"/> </li>
|
||||
`
|
||||
}
|
||||
|
||||
|
||||
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
|
||||
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
|
||||
let target = this.checkoutVazio;
|
||||
@ -30,11 +103,13 @@ export default class Footer {
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
const elemento = await waitElement(".container-carousel-item");
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,12 +30,11 @@ export default class Header {
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
|
||||
`
|
||||
}
|
||||
if (this.progressBar && window.innerWidth <= 1024) {
|
||||
this.progressBar.innerHTML = ``;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
@ -1,73 +1,100 @@
|
||||
/* _footer.scss */
|
||||
.footerCheckout {
|
||||
border-top: none;
|
||||
color: $color-gray2;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
margin: 16px 0;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100% !important;
|
||||
border-top: solid 1px $black-padrao;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__address {
|
||||
color: $color-gray2;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 16px;
|
||||
p {
|
||||
margin: 0;
|
||||
height: 14px;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
max-width: 40%;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
color: $color-black;
|
||||
font-family: $font-family;
|
||||
}
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
width: 32.4%;
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
margin-bottom: 12px;
|
||||
&__item {
|
||||
margin-right: 13px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.iconVtex {
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background-color: $color-gray4;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin: 0 8px;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
margin: 0 10px 0 0;
|
||||
border: 1px solid $color-gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
&__developedBy {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding-right: 16px;
|
||||
|
||||
li:last-child {
|
||||
margin-left: 16px;
|
||||
&__item-Vtex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 16.75px;
|
||||
p {
|
||||
margin: 0 10.1px 0 0;
|
||||
font-weight: 400;
|
||||
font-size: 9px;
|
||||
line-height: 12px;
|
||||
color: $color-black;
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
color: $color-gray2;
|
||||
display: flex;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-decoration: none;
|
||||
img {
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
&__item-M3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
p {
|
||||
margin: 0 11px 0 0;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user