Merge pull request 'feature/footer' (#2) from feature/footer into development

Reviewed-on: #2
This commit is contained in:
Savio Carvalho Moraes 2022-12-14 22:32:01 +00:00
commit e1b34faaf8
8 changed files with 126 additions and 10 deletions

View File

@ -2,11 +2,12 @@ import CheckoutUI from "./components/CheckoutUI";
import { Container } from "m3-utils";
import "slick-carousel";
import Header from "./components/Header";
import Body from "./components/Body";
import Footer from "./components/Footer";
const m3Checkout = new Container({
appName: "m3-checkout",
components: [CheckoutUI, Header, Footer],
components: [CheckoutUI, Header, Body, Footer],
});
m3Checkout.start();

View File

@ -0,0 +1,16 @@
export default class Body {
constructor() {
this.init();
}
async init() {
await this.selectors();
}
async selectors() {
this.titleCart = await waitElement(".empty-cart-title");
}
trocaTitle() {
this.titleCart.innerHTML = ``;
}
}

View File

@ -8,12 +8,21 @@ export default class Footer {
async init() {
await this.selectors();
// this.onUpdate();
await this.pegarInfo(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
);
await this.renderIconCreditCards();
await this.renderIconVtexPci();
await this.renderIconsDeveloped();
}
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.footerIconsCreditCards = await waitElement(".footerCheckout__payments");
this.footerIconVtexPci = await waitElement(".footerCheckout__vtexpci");
this.footerIconsDeveloped = await waitElement(".footerCheckout__developedBy");
}
onUpdate() {
@ -37,4 +46,41 @@ export default class Footer {
slidesToScroll: 1,
});
}
produtos(data) {
return {
imagem: data["items"][0]["images"][0]["imageUrl"],
nome: data["productName"],
tamanho: data["items"].map((val) => val["name"]),
};
}
async pegarInfo(url) {
const response = await fetch(url);
//console.log(response);
const data = await response.json();
//console.log(data);
const Items = data.map((val) => this.produtos(val));
console.log(Items);
}
renderIconCreditCards() {
this.footerIconsCreditCards.innerHTML = `
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" />
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" />
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" />
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" />
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" />
<img class="IconCredImg" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" />`;
}
renderIconVtexPci() {
this.footerIconVtexPci.innerHTML = `<img class="IconVtexImg" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" />`;
}
renderIconsDeveloped() {
this.footerIconsDeveloped.innerHTML = `
<li><a href="https://vtex.com/br-pt/"><span>Powered By</span><img class="iconDevV" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"/> </a></li>
<li><a href="https://vtex.com/br-pt/"><span>Developed By</span><img class="iconDeveLM3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/> </a></li>`;
}
}

View File

@ -32,7 +32,9 @@ export default class Header {
<li>
<div class="containerLi"><div><p class="progress-bar-text">Dados Pessoais</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div></li>
<li><div class="containerLi><div><p class="progress-bar-text">Pagamento</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p><p id="progress-bar-line-2" class="progress-bar-line-2"></p></div></div></li>
<li>
<div class="containerLi"><div><p class="progress-bar-text">Pagamento</p><p id="progress-bar-circle-3" class="progress-bar-circle-3"></p><p id="progress-bar-line-2" class="progress-bar-line-2"></p></div></div> </li>
</ul>
`;
}

View File

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

View File

@ -0,0 +1,11 @@
/*#checkoutMainContainer {
width: 100%;
transform: translateY(-50%);
height: 1px;
border-bottom: 1px solid #000000;
}*/
.container-cart {
#cart-title {
display: none !important;
}
}

View File

@ -1,5 +1,8 @@
/* _footer.scss */
.footerCheckout {
width: 100%;
display: flex;
flex-direction: column;
border-top: none;
color: $color-gray2;
@ -8,7 +11,12 @@
display: flex;
justify-content: space-between;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
&__address {
color: $color-gray2;
font-family: $font-family;
@ -26,11 +34,13 @@
}
&__stamps {
width: 31.56%;
align-items: center;
display: flex;
justify-self: center;
list-style: none;
flex-direction: row;
margin: 0;
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
@ -43,9 +53,20 @@
margin: 0 8px;
width: 1px;
}
&__payments {
display: flex;
flex-direction: row;
}
.IconCredImg {
width: 12.25%;
}
.IconVtexImg {
width: 87%;
}
}
&__developedBy {
width: 18.6%;
align-items: center;
display: flex;
list-style-type: none;
@ -69,6 +90,12 @@
span {
margin-right: 8px;
}
.iconDevV {
width: 19.65%;
}
.iconDeveLM3 {
width: 15.65%;
}
}
}
}

View File

@ -1,6 +1,14 @@
/* _header.scss */
.headerCheckout {
.container {
&::after {
margin-top: 30px;
width: 100%;
transform: translateY(-50%);
height: 1px;
border-bottom: 1px solid #000000;
}
width: auto !important;
#progressBar {
width: 446px;
@ -60,25 +68,26 @@
}
li .progress-bar-line-1 {
position: absolute;
left: 25%;
left: 57%;
transform: translateY(-50%);
bottom: 5px;
width: 100%;
bottom: 4px;
width: 212%;
height: 1px;
border-top: 1px solid #000;
}
li .progress-bar-line-2 {
position: absolute;
right: 21%;
right: 59%;
transform: translateY(-50%);
bottom: 5px;
width: 100%;
width: 242%;
height: 1px;
border-top: 1px solid #000;
}
}
}
&__wrapper {
margin-top: 30px;
align-items: center;
display: flex;
justify-content: space-between;
@ -92,9 +101,11 @@
}
&__safeBuy {
display: flex;
span {
align-items: center;
display: flex;
flex-direction: row;
text-transform: uppercase;
font-family: $font-family;
font-style: normal;
@ -104,7 +115,8 @@
color: $color-gray;
}
i {
img {
width: 10%;
margin-right: 8px;
}
}