forked from M3-Academy/m3-academy-template-checkout
feat: Adiciona footer
This commit is contained in:
parent
1eaba388f1
commit
e3ddf58ccd
@ -2,7 +2,7 @@ Stack trace:
|
||||
Frame Function Args
|
||||
000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
|
||||
000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
|
||||
000FFFFCD30 002100484A2 (000006E0000, 000006FF401, 00000000001, 87FE80A61CA3)
|
||||
000FFFFCD30 002100484A2 (00000690000, 00000690101, 00000000001, 726D3BFB8C2D)
|
||||
000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D)
|
||||
000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
|
||||
000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)
|
||||
|
||||
@ -15,6 +15,7 @@ export default class Footer {
|
||||
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.title = await waitElement("#cart-title");
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
//CARRINHO VAZIO
|
||||
this.fraseCarrinhoVazio = await waitElement(".empty-cart-title");
|
||||
@ -25,12 +26,18 @@ export default class Footer {
|
||||
this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
|
||||
//pagamento
|
||||
this.notification = await waitElement(".notification");
|
||||
//footer
|
||||
this.creditcards = await waitElement(".footerCheckout__payments");
|
||||
this.vtex = await waitElement(".footerCheckout__vtexpci");
|
||||
this.developed = await waitElement(".footerCheckout__developedBy");
|
||||
}
|
||||
|
||||
async prateleira() {
|
||||
if (this.checkoutVazio.style.display == "none") {
|
||||
this.title.innerHTML = `MEU CARRINHO`;
|
||||
this.requestApi();
|
||||
this.addCarrossel();
|
||||
|
||||
window.addEventListener("hashchange", () => {
|
||||
if (window.location.hash !== "#/cart") {
|
||||
this.removePrateleira();
|
||||
@ -105,6 +112,7 @@ export default class Footer {
|
||||
if (display == "display: none;") {
|
||||
this.prateleira();
|
||||
} else if (display == "display: block;") {
|
||||
this.title.innerHTML = ``;
|
||||
this.removePrateleira();
|
||||
}
|
||||
});
|
||||
@ -114,9 +122,47 @@ export default class Footer {
|
||||
}
|
||||
|
||||
carrinho() {
|
||||
this.title.innerHTML = ``;
|
||||
this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
|
||||
this.continuarCompra.innerHTML = `continuar comprando`;
|
||||
this.frete.innerHTML = `Frete`;
|
||||
this.unidade.innerHTML = `Unidade`;
|
||||
//footer
|
||||
this.creditcards.innerHTML = `<figure>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="MasterCard" />
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard" />
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="America Express" />
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo" />
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard" />
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Paypal" />
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto" />
|
||||
</figure>`;
|
||||
this.vtex.innerHTML = `<figure>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="VTEX" />
|
||||
</figure>`;
|
||||
this.developed.innerHTML = `<li>
|
||||
<a href="https://vtex.com/br-pt/">
|
||||
<span>Powered By</span>
|
||||
<figure><img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" /></figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://agenciam3.com/">
|
||||
<span>Developed By</span>
|
||||
<figure><img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" /></figure>
|
||||
</a>
|
||||
</li>`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,6 +21,35 @@
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
//CARRINHO VAZIO
|
||||
.empty-cart-content {
|
||||
margin-top: 100px;
|
||||
|
||||
.empty-cart-title {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
|
||||
.empty-cart-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#cart-choose-products {
|
||||
color: $color-black-500;
|
||||
border: 1px solid $color-black-500;
|
||||
background: $color-white;
|
||||
font-family: $font-family-secundary;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
border-radius: 0%;
|
||||
padding: 15px 64px 17px 65px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.empty-cart-title {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
|
||||
@ -1,38 +1,39 @@
|
||||
.empty-cart {
|
||||
font-family: $font-family;
|
||||
&-content {
|
||||
color: $color-black;
|
||||
text-align: center;
|
||||
font-family: $font-family;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
color: $color-black;
|
||||
text-align: center;
|
||||
|
||||
&-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-links {
|
||||
.link-choose-products {
|
||||
background: $color-black;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
transition: ease-in 0.22s all;
|
||||
outline: none;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
&-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
&-links {
|
||||
.link-choose-products {
|
||||
background: $color-black;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
transition: ease-in 0.22s all;
|
||||
outline: none;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,18 +4,29 @@
|
||||
color: $color-gray2;
|
||||
|
||||
&__wrapper {
|
||||
border-top: 1px solid $color-black-500;
|
||||
width: 100% !important;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.container {
|
||||
/*width: 91.40625%;*/
|
||||
width: 100%;
|
||||
margin: 16px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__address {
|
||||
color: $color-gray2;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-black;
|
||||
text-transform: capitalize;
|
||||
max-width: 40%;
|
||||
|
||||
@ -30,6 +41,42 @@
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
|
||||
.footerCheckout__payments {
|
||||
display: flex;
|
||||
column-gap: 13px;
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
vertical-align: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout__vtexpci {
|
||||
display: flex;
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
width: 53px;
|
||||
height: 33px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
vertical-align: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
@ -37,10 +84,10 @@
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background-color: $color-gray4;
|
||||
background-color: $color-gray7;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin: 0 8px;
|
||||
margin: 0 10px 0 13px;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
@ -52,7 +99,11 @@
|
||||
margin: 0;
|
||||
|
||||
li:last-child {
|
||||
margin-left: 16px;
|
||||
margin-left: 10.73px;
|
||||
figure {
|
||||
width: 28.66px;
|
||||
height: 15.65px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@ -67,7 +118,18 @@
|
||||
text-decoration: none;
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
width: 44.92px;
|
||||
height: 16px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
vertical-align: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,6 +32,11 @@
|
||||
|
||||
&__safeBuy {
|
||||
display: flex;
|
||||
width: 15.2829%;
|
||||
|
||||
@include mq(tablet, max) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 12px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user