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

feat: Cria e estiliza a parte debaixo do footer

Browse Source
This commit is contained in:
Nicolly Vieira Santos Costa 2022-12-14 08:19:43 -03:00
parent 318c3efcb4
commit 63a40064df
5 changed files with 399 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,8 +9,11 @@ export default class Footer {
this.productList = [];
this.carregaProdutos();
await this.selectors();
await this.criaStamps();
await this.criaDevelopedBy();
// this.onUpdate();
await this.criaProduto();
// await this.criaProduto();
}
async selectors() {
@ -18,6 +21,10 @@ export default class Footer {
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.prateleira = await waitElement(".footerCheckout__prateleira");
this.checkoutVazio = await waitElement(".empty-cart-content");
this.stamps = await waitElement(".footerCheckout__stamps");
this.developedBy = await waitElement(".footerCheckout__developedBy");
this.footer = await waitElement(".footerCheckout__wrapper");
}
onUpdate() {
@ -40,24 +47,21 @@ export default class Footer {
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
});
}
async criaProduto() {
let estrutura = ""
let estruturaSkus = ""
if(this.prateleira) {
console.log(this.productList, "Cria HTMl");
let estrutura = "";
let estruturaSkus = "";
if (this.prateleira) {
this.productList.forEach((product) => {
estruturaSkus = ""
product.skus.forEach(name => {
estruturaSkus += `<span class="prateleira__name">${name}</span>`
})
estruturaSkus = "";
product.skus.forEach((name) => {
estruturaSkus += `<span class="prateleira__name">${name}</span>`;
});
console.log(product.skus);
estrutura +=`
estrutura += `
<div class="prateleira__container">
<figure class="prateleira__image-wrapper">
<img src=${product.image}>
@ -69,38 +73,88 @@ export default class Footer {
<a class="prateleira__button" href=${product.link}>Ver Produto</a>
</div>
</figure>
</div>`
})
</div>`;
});
this.prateleira.innerHTML = estrutura;
}
this.addCarrossel();
}
carregaProdutos() {
fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
.then(response => response.json())
.then(data => {
data.forEach(item => {
fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
)
.then((response) => response.json())
.then((data) => {
data.forEach((item) => {
const arraySKU = [];
item.items.forEach(sku => {
item.items.forEach((sku) => {
arraySKU.push(sku.name);
})
});
const product = {
image: item.items[0].images[0].imageUrl,
productName: item.productName,
link: item.link,
skus: arraySKU
skus: arraySKU,
};
this.productList.push(product);
})
console.log(this.productList, "Carrega Lista");
});
})
.catch(err => log(err));
.catch((err) => log(err));
}
async criaStamps() {
if (this.stamps) {
this.stamps.innerHTML = `<li class="footerCheckout__li masterCard">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="lodo da MasterCard" />
</li>
<li class="footerCheckout__li visa">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="logo da Visa" />
</li>
<li class="footerCheckout__li amex">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="logo da Amex" />
</li>
<li class="footerCheckout__li elo">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="logo da Elo" />
</li>
<li class="footerCheckout__li hiperCard">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="logo da HiperCard" />
</li>
<li class="footerCheckout__li payPal">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="logo do PayPal" />
</li>
<li class="footerCheckout__li boleto">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="logo Boleto" />
</li>
<li class="divider">
</li>
<li class="footerCheckout__li vtexPCI">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="logo da Vtex PCI" />
</li>`;
}
}
async criaDevelopedBy() {
if(this.developedBy) {
this.developedBy.innerHTML = `
<li>
<a href="https://vtex.com/br-pt">
<span>Powered by</span>
<img class="vtex" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"/>
</a>
</li>
<li>
<a href="https://m3.com/">
<span>Developed by</span>
<img class="m3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/>
</a>
</li>
`;
}
}
}

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

@ -9,9 +9,23 @@ html {
}
footer .footerCheckout__wrapper {
width: 94.9734%;
margin: auto auto 0 auto;
border-top: 1px solid $black-500;
.container {
width: 94.9734%;
margin: 16px auto 16px auto;
@include mq(tablet, max) {
margin: 0;
width: 100%;
}
@include mq(desktop4K, min) {
margin: 14px auto 16.54px auto;
}
}
}
footer .prateleira,
header {
width: 79.53125%;

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

@ -1,74 +1,288 @@
/* _footer.scss */
.footerCheckout {
border-top: none;
color: $color-gray2;
&__prateleira {
display: none;
}
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
.container {
display: flex;
align-items: center;
justify-content: center;
@include mq(tablet, max) {
flex-direction: column;
align-items: flex-start;
}
}
}
&__address {
color: $color-gray2;
font-family: $font-family;
font-family: "Open Sans";
font-style: normal;
font-weight: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
line-height: 14px;
text-transform: capitalize;
max-width: 40%;
color: $black-300;
@include mq(md, max) {
margin-bottom: 24px;
max-width: 100%;
@include mq(tablet, max) {
order: 2;
margin: 0 16px 16px;
}
@include mq(desktop4K, min) {
font-size: 20px;
line-height: 27px;
}
}
&__stamps {
align-items: center;
display: flex;
justify-self: center;
list-style: none;
box-sizing: border-box;
width: 33.234%;
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
margin: 0 auto;
@include mq(tablet, max) {
order: 1;
margin: 0;
width: 100%;
padding: 16px 8px;
justify-content: flex-start;
}
&__divider {
background-color: $color-gray4;
display: inline-block;
@include mq(desktop4K, min) {
width: 29.0827%;
}
.divider {
height: 24px;
margin: 0 8px;
width: 1px;
background-color: $gray-500;
@include mq(desktop4K, min) {
height: 43px;
}
}
}
&__li {
&.masterCard {
margin-right: 13.35px;
@include mq(tablet, max) {
margin-right: 4.35px;
width: 3.536%;
}
@include mq(celular, max) {
width: 9.930%;
}
@include mq(desktop4K, min) {
margin-right: 13.37px;
}
}
&.visa {
margin-right: 13.22px;
@include mq(tablet, max) {
margin-right: 5.22px;
width: 3.451%;
}
@include mq(celular, max) {
width: 9.688%;
}
@include mq(desktop4K, min) {
margin-right: 13.07px;
}
}
&.amex {
margin-right: 13.22px;
@include mq(tablet, max) {
margin-right: 4.22px;
width: 3.451%;
}
@include mq(celular, max) {
width: 9.688%;
}
@include mq(desktop4K, min) {
margin-right: 13.07px;
}
}
&.elo {
margin-right: 13.38px;
@include mq(tablet, max) {
margin-right: 4.48px;
width: 3.623%;
}
@include mq(celular, max) {
width: 10.1727%;
}
@include mq(desktop4K, min) {
margin-right: 13.67px;
}
}
&.hiperCard {
margin-right: 13.22px;
@include mq(tablet, max) {
margin-right: 4.22px;
width: 3.451%;
}
@include mq(celular, max) {
width: 9.688%;
}
@include mq(desktop4K, min) {
margin-right: 13.07px;
}
}
&.payPal {
margin-right: 13.35px;
@include mq(tablet, max) {
margin-right: 4.35px;
width: 3.536%;
}
@include mq(celular, max) {
width: 9.930%;
}
@include mq(desktop4K, min) {
margin-right: 13.37px;
}
}
&.boleto {
margin-right: 13.35px;
@include mq(tablet, max) {
margin-right: 4.35px;
width: 3.536%;
}
@include mq(celular, max) {
width: 9.930%;
}
@include mq(desktop4K, min) {
margin-right: 13.37px;
}
}
&.vtexPCI {
margin-left: 10px;
@include mq(tablet, max) {
width: 5.593%;
}
@include mq(celular, max) {
width: 14.76323%;
}
}
}
&__developedBy {
align-items: center;
display: flex;
list-style-type: none;
margin: 0;
display: flex;
gap: 10.73px;
li:last-child {
margin-left: 16px;
@include mq(tablet, max) {
order: 3;
// width: 21.527777%;
margin: 0 16px 16px;
justify-content: flex-start;
}
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;
align-items: center;
flex-wrap: wrap;
span {
margin-right: 8px;
font-family: "Open Sans";
font-weight: 400;
font-size: 9px;
line-height: 12px;
color: $black-300;
.vtex {
width: 44.92px;
margin-left: 10.12px;
}
.m3 {
width: 28.66px;
margin-left: 10.97px;
}
}
}
// &__developedBy {
// box-sizing: border-box;
// display: flex;
// align-items: center;
// justify-content: space-between;
// list-style-type: none;
// margin: 0;
// width: 17.851%;
// min-width: 205px;
// @include mq(tablet, max) {
// order: 3;
// width: 21.527777%;
// margin: 0 16px 16px;
// justify-content: flex-start;
// }
// li {
// width: 50%;
// @include mq(tablet, max) {
// width: auto;
// }
// }
// a {
// display: flex;
// align-items: center;
// justify-content: flex-end;
// gap: 10px;
// font-family: "Open Sans";
// font-weight: 400;
// font-size: 9px;
// line-height: 12px;
// color: $black-300;
// img {
// width: 20px;
// }
// .vtex {
// width: 36.3%;
// }
// .m3 {
// width: 30.75%;
// }
// }
// }
}

2
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -23,6 +23,8 @@ $color-green: #4caf50;
$black-500: #000;
$black-300: #292929;
$gray-500: #C4C4C4;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,

49
checkout/src/template-checkout/templates.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li class="footerCheckout__li">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="" />
</li>
<li class="footerCheckout__li">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="" />
</li>
<li class="footerCheckout__li">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="" />
</li>
<li class="footerCheckout__li">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="" />
</li>
<li class="footerCheckout__li">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="" />
</li>
<li class="footerCheckout__li">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="" />
</li>
<li class="footerCheckout__li">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="" />
</li>
<li class="divider">
</li>
<li class="footerCheckout__li">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="" />
</li>
</ul>
<div>
<li>
<a href="https://vtex.com/br-pt">Powered by <img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt=""></a>
</li>
<li>
<a href="https://agenciam3.com/">Developed by <img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt=""></a>
</li>
</div>
</body>
</html>