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.vtexPciIconHTML();
this.developedByLogoHTML();
this.temptyCartTextBtn();
// this.onUpdate();
}
@ -21,7 +20,6 @@ export default class Footer {
this.payments = await waitElement(".footerCheckout__payments");
this.vtexPCI = await waitElement(".footerCheckout__vtexpci");
this.developedBy = await waitElement(".footerCheckout__developedBy");
this.textBtn = await waitElement("#cart-choose-products");
}
paymentsIconsHTML() {
@ -74,12 +72,6 @@ export default class Footer {
}
}
temptyCartTextBtn() {
if (this.textBtn) {
this.textBtn.textContent = "Continuar comprando";
}
}
onUpdate() {
//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

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

@ -48,8 +48,15 @@
background: transparent;
border: 1px solid $color-black2;
border-radius: 0px;
transition: ease-in 0.22s all;
outline: none;
transition: ease-in 0.22s all;
margin: 22px 0 262px 0;
padding: 16px 26px;
cursor: pointer;
font-size: 0;
&::after {
content: "Continuar comprando";
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
@ -59,13 +66,20 @@
letter-spacing: 0.05em;
color: $color-black2;
text-transform: uppercase;
padding: 16px 26px;
cursor: pointer;
margin: 22px 0 262px 0;
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) {
padding: 16px 121px;
}
@ -75,8 +89,6 @@
}
@include mq(xsp, max) {
font-size: 12px;
line-height: 14px;
padding: 16px 20px;
}