forked from M3-Academy/m3-academy-template-checkout
develop #11
@ -1,5 +1,11 @@
|
||||
import { waitElement } from "m3-utils";
|
||||
|
||||
const insertImage = (name, options) => {
|
||||
const domain = "https://agenciamagma.vteximg.com.br";
|
||||
|
||||
return `<img ${options} src="${domain}/arquivos/${name}M3Academy.png"/>`;
|
||||
};
|
||||
|
||||
export default class Footer {
|
||||
constructor() {
|
||||
this.init();
|
||||
@ -7,6 +13,8 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.innerToPayments();
|
||||
this.innerDevelopedBy();
|
||||
// this.onUpdate();
|
||||
}
|
||||
|
||||
@ -14,6 +22,61 @@ export default class Footer {
|
||||
//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.paymentContainer = await waitElement(".footerCheckout__stamps");
|
||||
this.developedByContainer = await waitElement(".footerCheckout__developedBy");
|
||||
}
|
||||
|
||||
innerToPayments() {
|
||||
if (this.paymentContainer) {
|
||||
const payments = this.paymentContainer.children[0].children[0];
|
||||
const vericatedVtex = this.paymentContainer.children[2].children[0];
|
||||
|
||||
if (payments && vericatedVtex) {
|
||||
let structure = "";
|
||||
const paymentsTypes = [
|
||||
"masterCard",
|
||||
"visa",
|
||||
"amex",
|
||||
"elo",
|
||||
"hiperCard",
|
||||
"payPal",
|
||||
"boleto",
|
||||
];
|
||||
|
||||
paymentsTypes.forEach(
|
||||
(payment) =>
|
||||
(structure += `<li class="footerCheckout__creditItem" >${insertImage(
|
||||
payment,
|
||||
'class="footerCheckout__creditImage"'
|
||||
)}</li>`)
|
||||
);
|
||||
|
||||
payments.innerHTML = `<ul class="footerCheckout__creditList">${structure}</ul>`;
|
||||
|
||||
vericatedVtex.innerHTML = insertImage(
|
||||
"vtexPCI",
|
||||
'class="footerCheckout__verificatedVtex"'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
innerDevelopedBy() {
|
||||
if (this.developedByContainer) {
|
||||
const poweredBy = this.developedByContainer.children[0].children[0];
|
||||
const developedBy = this.developedByContainer.children[1].children[0];
|
||||
|
||||
if (poweredBy && developedBy) {
|
||||
poweredBy.innerHTML = `<span>Powered By</span>${insertImage(
|
||||
"logoVTEX",
|
||||
'class="footerCheckout__logo footerCheckout__logo--vtex"'
|
||||
)}`;
|
||||
developedBy.innerHTML = `<span>Developed By</span>${insertImage(
|
||||
"logoM3",
|
||||
'class="footerCheckout__logo footerCheckout__logo--m3"'
|
||||
)}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
@import "./checkout-pagamento";
|
||||
@import "./checkout-autenticacao";
|
||||
|
||||
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -1,41 +1,149 @@
|
||||
/* _footer.scss */
|
||||
.footerCheckout {
|
||||
border-top: none;
|
||||
padding: 16px 25px 18.88px 8px;
|
||||
|
||||
@include mq("md", min) {
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout {
|
||||
border-top: 1px solid $clr-common-black;
|
||||
color: $clr-gray-400;
|
||||
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&__stamps {
|
||||
order: 0;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
&__address {
|
||||
color: $clr-gray-400;
|
||||
font-family: $font-family-100;
|
||||
order: 1;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
&__developedBy {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout {
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout {
|
||||
@include mq("md", min) {
|
||||
&__stamps {
|
||||
width: 34.510595358%;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
.container {
|
||||
width: 94.9734%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mq("lg", min) {
|
||||
.container {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&__address {
|
||||
order: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
width: 33.223684211%;
|
||||
order: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__developedBy {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq("xxl", min) {
|
||||
&__address {
|
||||
span {
|
||||
font-size: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
width: 29.074771156%;
|
||||
}
|
||||
|
||||
&__developedBy {
|
||||
span {
|
||||
font-size: 180%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout {
|
||||
&__developedBy a,
|
||||
&__developedBy,
|
||||
&__wrapper,
|
||||
&__stamps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&__wrapper {
|
||||
justify-content: space-between;
|
||||
|
||||
@include mq("lg", min) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout {
|
||||
&__creditList {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&__creditItem,
|
||||
&__verificatedVtex {
|
||||
max-width: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout {
|
||||
&__address {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
font-family: $font-family-100;
|
||||
text-transform: capitalize;
|
||||
max-width: 40%;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
}
|
||||
color: $clr-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout {
|
||||
&__stamps {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background-color: $clr-gray-300;
|
||||
display: inline-block;
|
||||
@ -44,11 +152,10 @@
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout {
|
||||
&__developedBy {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
||||
li:last-child {
|
||||
@ -56,19 +163,22 @@
|
||||
}
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
color: $clr-gray-400;
|
||||
display: flex;
|
||||
font-family: $font-family-100;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
font-family: $font-family-100;
|
||||
line-height: 12px;
|
||||
text-decoration: none;
|
||||
color: $clr-gray-400;
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
/* _header.scss */
|
||||
body :where(ul, li, ol) {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@function fluid($width, $design-width) {
|
||||
$width: calc($width / $design-width * 100);
|
||||
|
||||
|
||||
@ -15,26 +15,7 @@
|
||||
</div>
|
||||
|
||||
<div id="progressBar w-DEFINE-FIXED" class="progress-bar">
|
||||
<ul class="progress-list w-100 pos-relative d-flex jus-between">
|
||||
<div class="bar pos-absolute">
|
||||
<div class="bar-fill"></div>
|
||||
</div>
|
||||
|
||||
<li class="progress-item">
|
||||
<p class="progress-title"></p>
|
||||
<span class="progress-bullet pos-relative"></span>
|
||||
</li>
|
||||
|
||||
<li class="progress-item">
|
||||
<p class="progress-title"></p>
|
||||
<span class="progress-bullet pos-relative"></span>
|
||||
</li>
|
||||
|
||||
<li class="progress-item">
|
||||
<p class="progress-title"></p>
|
||||
<span class="progress-bullet pos-relative"></span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="progress-list w-100 pos-relative d-flex jus-between"></ul>
|
||||
</div>
|
||||
|
||||
<div class="headerCheckout__safeBuy w-PERCENT">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user