luizfelipe9627/m3-academy-template-checkout-luiz-felipe
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/header #1

Merged
luizfelipe9627 merged 2 commits from feature/header into development 2022-12-26 23:59:00 +00:00
Conversation 0 Commits 2 Files Changed 2 +183 -15
2 changed files with 183 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,18 +4,75 @@ import { waitElement } from "m3-utils";
export default class Header {
constructor() {
this.init();
this.criaBarraProgresso();
}
async init() {
await this.selectors();
console.log(this.item);
this.monitoraBarraProgresso();
}
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.barraProgresso = document.querySelector(".progress-bar");
this.circulo1 = await waitElement(".progress-bar__circle1");
this.circulo2 = await waitElement(".progress-bar__circle2");
this.circulo3 = await waitElement(".progress-bar__circle3");
}
criaBarraProgresso() {
this.barraProgresso.innerHTML = `
<ul class="progress-bar__container">
<li class="progress-bar__container-items">
<div class="progress-bar__wrapper">
<div class="progress-bar__container-item">
<p class="progress-bar__text">Meu Carrinho</p>
<p class="progress-bar__circle1 active"></p>
<p class="progress-bar__line1"></p>
</div>
</div>
</li>
</ul>
<ul class="progress-bar__container">
<li class="progress-bar__container-items">
<div class="progress-bar__wrapper">
<div class="progress-bar__container-item">
<p class="progress-bar__text">Dados Pessoais</p>
<p class="progress-bar__circle2"></p>
</div>
</div>
</li>
</ul>
<ul class="progress-bar__container">
<li class="progress-bar__container-items">
<div class="progress-bar__wrapper">
<div class="progress-bar__container-item">
<p class="progress-bar__text">Pagamento</p>
<p class="progress-bar__circle3"></p>
<p class="progress-bar__line2"></p>
</div>
</div>
</li>
</ul>
`;
}
monitoraBarraProgresso() {
setInterval(() => {
if (window.location.hash == "#/cart") {
this.circulo1.classList.add("active");
this.circulo2.classList.remove("active");
this.circulo3.classList.remove("active");
} else if (window.location.hash != "#/cart" && window.location.hash != "#/payment") {
this.circulo1.classList.remove("active");
this.circulo2.classList.add("active");
this.circulo3.classList.remove("active");
} else if (window.location.hash == "#/payment") {
this.circulo1.classList.remove("active");
this.circulo2.classList.remove("active");
this.circulo3.classList.add("active");
}
}, 100);
}
}

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

@ -1,8 +1,18 @@
/* _header.scss */
.headerCheckout {
width: 100%;
border-bottom: 1px solid $color-black2;
.container {
width: auto !important;
margin: 0;
padding: 24px 131px;
@include mq(xl, min) {
padding: 29px 256px;
}
}
&__wrapper {
align-items: center;
display: flex;
@ -11,26 +21,127 @@
&__logo {
img {
height: 52px;
width: auto;
width: 155px;
height: 37px;
@include mq(xl, min) {
width: 382px;
height: 91px;
}
}
}
&__safeBuy {
span {
align-items: center;
display: flex;
align-items: center;
span {
font-weight: 400;
line-height: 16px;
text-transform: uppercase;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $color-gray;
color: $color-black1;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
}
i {
img {
width: 12px;
height: 14px;
margin-right: 8px;
@include mq(xl, min) {
width: 29px;
height: 41px;
}
}
}
.progress-bar {
display: flex;
width: 439px;
height: 35px;
justify-content: space-between;
@include mq(xl, min) {
width: 1078px;
height: 67px;
}
&__container-items {
list-style: none;
}
&__container-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
&__circle1,
&__circle2,
&__circle3 {
height: 12px;
width: 12px;
border-radius: 50%;
border: 1px solid $color-black2;
@include mq(xl, min) {
height: 24px;
width: 24px;
}
}
&__line1,
&__line2 {
position: absolute;
background-color: $color-black2;
height: 1px;
bottom: 6px;
@include mq(xl, min) {
bottom: 12px;
}
}
&__line1 {
left: 59%;
width: 162px;
@include mq(xl, min) {
width: 437px;
}
}
&__line2 {
right: 60%;
width: 155px;
@include mq(xl, min) {
width: 420px;
}
}
.active {
background-color: $color-black2;
}
&__text {
font-family: $font-family-secundary;
font-size: 12px;
font-weight: 400;
line-height: 14px;
color: $color-black2;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
}
}
}