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

Merge pull request 'feature/adiciona-css-carrinho-vazio' (#9) from feature/adiciona-css-carrinho-vazio into development

Browse Source 
Reviewed-on: #9
This commit is contained in:
Rafael Sampaio de Oliveira 2022-12-13 12:50:58 +00:00
commit e0ad9dc347
3 changed files with 47 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() {
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();
this.events();
this.cartUpdate();
@ -20,7 +25,6 @@ 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.cartTitle = await waitElement("#cart-title");
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() {
const elemento = await waitElement(".footerCheckout__prateleira-container");
$(elemento).slick({

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

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

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

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