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

Merge branch 'carrinho-vazio-feature' into devoloper-feature

Browse Source
This commit is contained in:
Nathalia Sardou 2022-12-16 21:04:21 -03:00
commit 6da1f234b9
2 changed files with 40 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,101 +0,0 @@
import { waitElement } from "m3-utils";
export default class Footer {
constructor() {
this.init();
}
async init() {
await this.selectors();
this.icons();
this.vtexIcon();
this.poweredDevelopeIcon();
// this.onUpdate();
}
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.payments = await waitElement(".footerCheckout__payments");
this.vtexpci = await waitElement(".footerCheckout__vtexpci");
this.devIncons = await waitElement(".footerCheckout__developedBy");
}
icons() {
this.payments.innerHTML = `
<ul class="payments-icons-wrapper">
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
alt=""
/>
</li>
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
alt=""
/>
</li>
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
alt=""
/>
</li>
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
alt=""
/>
</li>
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"
alt=""
/>
</li>
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
alt=""
/>
</li>
<li>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
alt=""
/>
</li>
</ul>
</div>
`;
}
vtexIcon() {
this.vtexpci.innerHTML = `
<img class="vtex-icon"
src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
alt=""
/>
`;
}
poweredDevelopeIcon() {
this.devIncons.innerHTML = `
<li class="li">
<a href="https://vtex.com/br-pt/">
<span>PoweredBy</span>
<img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="">
</a>
</li>
<li class="li-2">
<a href="https://agenciam3.com/">
<span>DevelopedBy</span>
<img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="">
</a>
</li>
`;
}
}

47
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -4,30 +4,63 @@
color: $color-black; color: $color-black;
text-align: center; text-align: center;
p{
display: none;
}
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
} }
} }
.cart-title{
display: none;
}
&-title { &-title {
font-size: 20px; font-size: 24px;
text-transform: uppercase;
font-weight: 700;
width: auto;
} }
&-links { &-links {
a {
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
color: transparent;
}
a::after {
content: 'Continuar comprando';
color: $color-black;
position: absolute;
left: 0;
right: 0;
bottom: 80px;
}
.link-choose-products { .link-choose-products {
background: $color-black; width: 327px;
border: none; height: 48px;
border-radius: 5px; background: transparent;
border: 1px solid $color-black;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
outline: none; outline: none;
font-family: $font-family; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 400;
cursor: pointer;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-white; color: transparent;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {