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

Feat(Chekout): Cria barra de progresso, e finaliza a estilização de elementos da pagina de carrinho vazio

Browse Source
This commit is contained in:
Rhayllon Daudt 2022-12-13 02:53:45 -03:00
parent 9244276d1f
commit a2665465a4
4 changed files with 128 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
checkout/src/arquivos/js/components/Header.js
View File

@ -8,20 +8,53 @@ export default class Header {
async init() {
await this.selectors();
console.log(this.item);
// console.log(this.item);
this.progressBarCronstructor();
}
async selectors() {
this.item = await waitElement("#my-element", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
this.progressBar = await waitElement("#progressBar");
// this.item = await waitElement("#my-element", {
// //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
// timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
// interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
// });
this.progressBar = await waitElement(".progress-bar");
}
progressBarCronstructor (){
progressBarCronstructor() {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<ul class="container-total">
<li class="li-volta-borda-1">
<div class="div-flex1">
<div class="div-itens">
<p class="p-text">Meu Carrinho</p>
<p class="p-bola"></p>
<p class="p-borda-1"></p>
</div>
</div>
</li>
<li class="li-volta-centro">
<div class="div-flex2">
<div class="div-itens">
<p class="p-text">Dados Pessoais</p>
<p class="p-bola"></p>
<p class="p-borda-meio"></p>
</div>
</div>
</li>
<li class="li-volta-borda-2">
<div class="div-flex3">
<div class="div-itens">
<p class="p-text">Pagamento</p>
<p class="p-bola"></p>
<p class="p-borda-2"></p>
</div>
</div>
</li>
</ul>
`;
}
}
}

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

@ -15,8 +15,14 @@
&-title {
margin: 170px 0 32px 0;
font-size: 24px;
line-height: 33px;
font-size: 0px;
line-height: 0px;
&::after{
content: "SEU CARRINHO ESTÁ VAZIO";
font-size: 24px;
line-height: 33px;
}
}
&-links {

1
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -30,6 +30,7 @@ header{
.headerCheckout__safeBuy{
display: flex;
gap: 8px;
height: 15px;
}
body {

78
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -8,11 +8,87 @@
align-items: center;
display: flex;
justify-content: space-between;
.progress-bar{
height: 35px;
.container-total{
display: grid;
padding: 0;
grid-template-columns: 2fr 1fr 2fr;
width: 439px;
/* border: 1px solid rgb(59, 51, 51); */
margin: 0;
.li-volta-borda-1,
.li-volta-borda-2,
.li-volta-centro {
display: flex;
flex-direction: column;
list-style: none;
/* border: 1px solid violet; */
}
.p-text{
width: max-content;
font-weight: 400;
font-size: 12px;
line-height: 14px;
margin-bottom: 9px;
}
.p-bola{
border: 1px solid black;
border-radius: 50%;
width: 10px;
height: 10px;
background-color: white;
}
.div-itens{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.div-flex1,
.div-flex2,
.div-flex3 {
display: flex;
position: relative;
width: 100%;
}
.div-flex1{
justify-content: flex-start;
}
.div-flex2{
justify-content: center;
}
.div-flex3{
justify-content: flex-end;
}
.p-borda-1{
border-top: 1.5px solid black;
position: absolute;
left: 25.6%;
bottom: 5px;
margin: 0;
width: 95.9%;
transform: translateY(-7px);
}
.p-borda-2{
border-top: 1.5px solid black;
position: absolute;
right: 22%;
bottom: 5px;
margin: 0;
width: 99.3%;
transform: translateY(-7px);
}
}
}
}
&__logo {
img {
height: 52px;
height: 37.14px;
width: auto;
}
}