feat: adiciona footer e chamada de api para patreleira de produtos #2

Merged
Thiago.bronisio merged 1 commits from feature/footer-desktop into main 2022-12-13 23:28:37 +00:00
3 changed files with 148 additions and 47 deletions

View File

@ -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,
});
}
}

View File

@ -30,12 +30,11 @@ export default class Header {
<li></li>
<li></li>
</ul>
`
}
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``;
}
}
};
}

View File

@ -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;
}
}
}