forked from M3-Academy/m3-academy-template-checkout
feature/footer #2
@ -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();
|
||||
|
||||
16
checkout/src/arquivos/js/components/Body.js
Normal file
16
checkout/src/arquivos/js/components/Body.js
Normal 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 = ``;
|
||||
}
|
||||
}
|
||||
@ -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>`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@import "./utils/all";
|
||||
@import "./lib/slick";
|
||||
@import "./partials/header";
|
||||
@import "./partials/body";
|
||||
@import "./partials/footer";
|
||||
@import "./checkout/checkout.scss";
|
||||
|
||||
11
checkout/src/arquivos/sass/partials/_body.scss
Normal file
11
checkout/src/arquivos/sass/partials/_body.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user