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

refactor(checkout vazio): Aplica mudança na forma de alterar o texto do botão

Browse Source
This commit is contained in:
Sabrina Miranda 2022-12-17 10:11:32 -03:00
parent 658c84d02b
commit 332e0d88d6
2 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,6 @@ export default class Footer {
this.paymentsIconsHTML(); this.paymentsIconsHTML();
this.vtexPciIconHTML(); this.vtexPciIconHTML();
this.developedByLogoHTML(); this.developedByLogoHTML();
this.temptyCartTextBtn();
// this.onUpdate(); // this.onUpdate();
} }
@ -21,7 +20,6 @@ export default class Footer {
this.payments = await waitElement(".footerCheckout__payments"); this.payments = await waitElement(".footerCheckout__payments");
this.vtexPCI = await waitElement(".footerCheckout__vtexpci"); this.vtexPCI = await waitElement(".footerCheckout__vtexpci");
this.developedBy = await waitElement(".footerCheckout__developedBy"); this.developedBy = await waitElement(".footerCheckout__developedBy");
this.textBtn = await waitElement("#cart-choose-products");
} }
paymentsIconsHTML() { paymentsIconsHTML() {
@ -74,12 +72,6 @@ export default class Footer {
} }
} }
temptyCartTextBtn() {
if (this.textBtn) {
this.textBtn.textContent = "Continuar comprando";
}
}
onUpdate() { onUpdate() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver

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

@ -48,24 +48,38 @@
background: transparent; background: transparent;
border: 1px solid $color-black2; border: 1px solid $color-black2;
border-radius: 0px; border-radius: 0px;
transition: ease-in 0.22s all;
outline: none; outline: none;
font-family: $font-family-secundary; transition: ease-in 0.22s all;
font-style: normal; margin: 22px 0 262px 0;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
letter-spacing: 0.05em;
color: $color-black2;
text-transform: uppercase;
padding: 16px 26px; padding: 16px 26px;
cursor: pointer; cursor: pointer;
margin: 22px 0 262px 0; font-size: 0;
&::after {
content: "Continuar comprando";
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
letter-spacing: 0.05em;
color: $color-black2;
text-transform: uppercase;
vertical-align: top;
vertical-align: bottom;
@include mq(xg, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(xsp, max) {
font-size: 12px;
}
}
@include mq(xg, min) { @include mq(xg, min) {
font-size: 28px;
line-height: 33px;
padding: 16px 121px; padding: 16px 121px;
} }
@ -75,12 +89,10 @@
} }
@include mq(xsp, max) { @include mq(xsp, max) {
font-size: 12px;
line-height: 14px;
padding: 16px 20px; padding: 16px 20px;
} }
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-black, 5);
} }
} }