Gustavo_Rallenson_Goncalves_Da_Silva/m3-academy-template-checkout-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): progrress bar adicionada

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2022-12-14 19:47:03 -03:00
parent e7e776a257
commit 4228149af5
4 changed files with 104 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,19 +4,42 @@ import { waitElement } from "m3-utils";
export default class Header {
constructor() {
this.init();
console.log("header.js funcionando")
}
async init() {
await this.selectors();
await this.event();
await this.progress();
console.log(this.item);
console.log("estou funcionando")
}
async selectors() {
this.item = await waitElement("#my-element", {
this.item = await waitElement("#progressBar", {
//#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
});
}
async event(){
}
async progress(){
this.item.innerHTML =`
<div class="stepProgressBar">
<div class="step">
<p class="step-text"> Meu Carrinho</p>
<div class="step-bullet completed "></div>
</div>
<div class="step">
<p class="step-text">Dados Pessoais</p>
<div class="step-bullet"></div>
</div>
<div class="step">
<p class="step-text">Pagamento</p>
<div class="step-bullet"></div>
</div>
</div>
`
}
}

11
checkout/src/arquivos/js/components/app.js
View File

@ -9,12 +9,23 @@ export default class Footer {
async init() {
await this.selectors();
await this.event();
await this.TextBtn()();
}
async selectors() {
this.buttonText = await waitElement("#cart-choose-products", {
//#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
});
}
async event() {
}
async TextBtn(){
this.buttonText.innerHTML =`
CONTINUAR COMPRANDO
`
}
}

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

@ -1,7 +1,19 @@
#cart-choose-products{
width: 326px;
height: 48px;
border-radius: 0 !important;
display: grid;
align-content: center;
padding: 0 0 0 0;
}
.empty-cart {
font-family: $font-family;
&-content {
color: $color-black;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: $color-black;
text-align: center;
@include mq(md, max) {

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

@ -1,3 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
/* _header.scss */
.headerCheckout {
// position: relative;
@ -19,6 +20,60 @@
margin: 16px 0 16px 0;
}
.progress-bar{
position: relative;
width:440px;
height: 35px;
.stepProgressBar{
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
top: 0;
left: -25%;
&::after{
content: "";
position: absolute;
right: 222px;
bottom: 27px;
width: 67%;
border-bottom: 1px solid $color-black;
}
.step{
display: flex;
flex-direction: column;
align-items: center;
border: 0px;
margin-right: 180px;
&-text{
width: 78px;
height: 14px;
font-family: 'Tenor Sans', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 14px;
margin-bottom: 10px;
color: $color-black;
white-space: nowrap;
}
&-bullet{
height: 12px;
width: 12px;
border-radius: 50%;
border: 1px solid ;
background-color: white;
position: relative;
z-index: map-get($map:$z-index, $key: level1);
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
&.completed {
color: black;
background-color: $color-black;
}
}
}
}
@include mq(desc,max){
display: none;
}