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

feat: adiciona css carrinho vazio

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2022-12-13 09:47:19 -03:00
parent 090761d06d
commit 8dd7e1f349
3 changed files with 48 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,11 @@ export default class Footer {
async init() { async init() {
this.list = await this.fetchApiData(); this.list = await this.fetchApiData();
this.cartTitle = await waitElement("#cart-title");
this.emptyTitle = await waitElement(".empty-cart-title");
this.emptyButton = await waitElement(".link-choose-products");
this.emptyCartTitle();
this.emptyCartButton();
await this.selectors(); await this.selectors();
this.events(); this.events();
this.cartUpdate(); this.cartUpdate();
@ -20,7 +25,6 @@ export default class Footer {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //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 // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
this.cartTitle = await waitElement("#cart-title");
this.prateleira = await waitElement(".footerCheckout__prateleira"); this.prateleira = await waitElement(".footerCheckout__prateleira");
} }
@ -127,6 +131,14 @@ export default class Footer {
} }
} }
emptyCartTitle() {
this.emptyTitle.innerHTML = `Seu Carrinho está Vazio`;
}
emptyCartButton() {
this.emptyButton.innerHTML = `Continuar Comprando`;
}
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement(".footerCheckout__prateleira-container"); const elemento = await waitElement(".footerCheckout__prateleira-container");
$(elemento).slick({ $(elemento).slick({

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

@ -3,6 +3,7 @@
&-content { &-content {
color: $color-black; color: $color-black;
text-align: center; text-align: center;
margin-top: 150px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
@ -10,28 +11,49 @@
} }
&-title { &-title {
font-size: 20px; font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
text-transform: uppercase;
}
&-message {
p {
display: none;
}
} }
&-links { &-links {
display: flex;
justify-content: center;
.link-choose-products { .link-choose-products {
background: $color-black; display: flex;
border: none; align-items: center;
border-radius: 5px; justify-content: center;
background: $color-white;
border: 1px solid $color-black;
border-radius: 0;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
outline: none; outline: none;
font-family: $font-family; font-family: "Tenor Sans";
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
letter-spacing: 0.05em;
color: $color-white;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em;
color: $color-black;
width: 31.739%;
height: 46px;
padding: 0;
&:hover { &:hover {
background: lighten($color-black, 5); // cursor: pointer;
background: $color-white !important;
} }
} }
} }

4
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -48,6 +48,10 @@
border: none; border: none;
background: transparent; background: transparent;
padding: 0; padding: 0;
button {
cursor: pointer;
}
} }
} }