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

feat(Footer): Adiciona elementos e cria function add Api

Browse Source
This commit is contained in:
William Simão Cavalcante 2022-12-14 22:20:46 -03:00
parent 5eca10c679
commit 0467829c3f
5 changed files with 116 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,19 +7,22 @@ export default class Footer {
async init() {
await this.selectors();
// this.onUpdate();
// this.requestApi();
this.creatPaymentsIcons();
this.creatVtexIconPci();
this.creatDevIconsM3();
}
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.checkoutVazio = await waitElement(".empty-cart-content");
this.divPrateleira = await waitElement('.footerCheckout__prateleira');
this.payments = await waitElement('.footerCheckout__payments');
this.vtexIconPci = await waitElement('.footerCheckout__vtexpci');
this.devIcons = await waitElement('.footerCheckout__developedBy');
}
onUpdate() {
//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;
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
@ -37,4 +40,76 @@ export default class Footer {
slidesToScroll: 1,
});
}
requestApi () {
this.divPrateleira.innerHTML =
`<h3>Você também pode gostar:</h3>
<ul class="ulProduct"></ul>
`
const api = 'https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319';
let itemStrutucture = '';
const ulProdut = document.querySelectorAll('.ulProdut');
fetch(api)
.then((response) => {
return response.json();
})
.then((data) => {
data.forEach((prod) => {
itemStrutucture += `
`
})
});
ulProdut = itemStrutucture;
};
creatPaymentsIcons () {
this.payments.innerHTML = `
<ul class="footerCheckout__container-ul">
<li class="footerCheckout__wrapper-li">
<figure class="footerCheckout__figure-img-tickets">
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="MasterCard"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="AmericaExpress"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="VisaCard"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"/>
</figure>
</li>
</ul>`;
}
creatVtexIconPci () {
this.vtexIconPci.innerHTML = `
<ul class="footerCheckout__container-ul">
<li class="footerCheckout__wrapper-li">
<figure class="footerCheckout__figure-img-vtex">
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo Vtex"/>
</figure>
</li>
</ul>`
}
creatDevIconsM3 () {
this.devIcons.innerHTML = `
<li class="footerCheckout__container-li-m3Icon">
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<figure class="footerCheckout__figure-img-vtexIcon">
<img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="LogoVTEX">
</figure>
</a>
</li>
<li class="footerCheckout__container-li-m3Icon">
<a href="https://agenciam3.com/">
<span>Developed By</span>
<figure class="footerCheckout__figure-img-m3Icon">
<img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="LogoM3">
</figure>
</a>
</li>`
}
}

1
checkout/src/arquivos/sass/checkout.scss
View File

@ -1,5 +1,6 @@
@import "./utils/all";
@import "./lib/slick";
@import "./partials/header";
@import "./partials/prateleira.scss";
@import "./partials/footer";
@import "./checkout/checkout.scss";

1
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -34,5 +34,6 @@
background: lighten($color-black, 5);
}
}
}
}

5
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -8,8 +8,11 @@ html {
min-height: 100%;
}
footer {
margin-top: auto;
}
footer .footerCheckout__wrapper {
width: 94.9734%;
margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,

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

@ -7,6 +7,8 @@
align-items: center;
display: flex;
justify-content: space-between;
border-top: 1px solid $color-black-500;
padding: 18px 32px 16px;
}
&__address {
@ -71,4 +73,31 @@
}
}
}
.container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
&__container-ul {
list-style-type: none;
}
&__figure-img-tickets img {
width: 35.65px;
height: 20px;
}
&__figure-img-vtex img {
width: 53px;
}
&__figure-img-vtexIcon img {
width: 44.92px;
}
&__figure-img-m3Icon img {
width: 28.66px;
}
}