forked from M3-Academy/m3-academy-template-checkout
feat: adiciona barra de progresso
This commit is contained in:
parent
63ac15279b
commit
f48a1ab079
@ -4,6 +4,8 @@ import { waitElement } from "m3-utils";
|
||||
export default class Header {
|
||||
constructor() {
|
||||
this.init();
|
||||
this.progressBar();
|
||||
this.progressUpdate();
|
||||
}
|
||||
|
||||
async init() {
|
||||
@ -18,4 +20,57 @@ export default class Header {
|
||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||
});
|
||||
}
|
||||
|
||||
progressBar() {
|
||||
|
||||
const progress = document.querySelector(".progress-bar");
|
||||
|
||||
progress.innerHTML = '';
|
||||
|
||||
let progressBarHtml = `
|
||||
<div class="progress__container">
|
||||
<div class="progress__wrapper">
|
||||
<div class="progress" id="progress"></div>
|
||||
<div class="progress__items"><span>Meu Carrinho</span><div class="progress__circle1"></div></div>
|
||||
<div class="progress__items"><span>Dados Pessoais</span><div class="progress__circle2"></div></div>
|
||||
<div class="progress__items"><span>Pagamento</span><div class="progress__circle3"></div></div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
$(".progress-bar").prepend(progressBarHtml);
|
||||
}
|
||||
|
||||
progressUpdate() {
|
||||
this.caseUpdate();
|
||||
|
||||
window.addEventListener("hashchange", () => {
|
||||
this.caseUpdate();
|
||||
});
|
||||
}
|
||||
|
||||
caseUpdate() {
|
||||
const myCart = document.querySelector(".progress__circle1");
|
||||
const personalData = document.querySelector(".progress__circle2");
|
||||
const payment = document.querySelector(".progress__circle3");
|
||||
|
||||
switch(location.hash) {
|
||||
case "#/cart":
|
||||
myCart.classList.add("active-bar");
|
||||
personalData.classList.remove("active-bar");
|
||||
break
|
||||
|
||||
case "#/email":
|
||||
case "#/profile":
|
||||
case "#/shipping":
|
||||
personalData.classList.add("active-bar");
|
||||
myCart.classList.remove("active-bar");
|
||||
payment.classList.remove("active-bar");
|
||||
break
|
||||
|
||||
case "#/payment":
|
||||
payment.classList.add("active-bar");
|
||||
myCart.classList.remove("active-bar");
|
||||
personalData.classList.remove("active-bar");
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
|
||||
.emailInfo {
|
||||
padding: 16px;
|
||||
background-color: $color-white;
|
||||
background-color: $color-white-500;
|
||||
border: 1px solid $color-gray4;
|
||||
border-radius: 0;
|
||||
|
||||
@ -133,7 +133,7 @@
|
||||
background-color: #303030;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 6px 5px 6px 8px;
|
||||
@ -217,7 +217,7 @@
|
||||
border-radius: 0;
|
||||
|
||||
label {
|
||||
background-color: $color-white;
|
||||
background-color: $color-white-500;
|
||||
box-shadow: none;
|
||||
color: #303030;
|
||||
padding: 8px 12px;
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
h2 {
|
||||
background: $color-white;
|
||||
background: $color-white-500;
|
||||
border: none;
|
||||
color: #303030;
|
||||
font-size: 14px;
|
||||
@ -70,7 +70,7 @@
|
||||
|
||||
.summary-template-holder {
|
||||
border-top: none;
|
||||
background: $color-white;
|
||||
background: $color-white-500;
|
||||
}
|
||||
|
||||
#go-to-cart-button a {
|
||||
@ -88,7 +88,7 @@
|
||||
background: $color-black-100;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
&:hover {
|
||||
@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
.lookatme {
|
||||
background-color: $color-white;
|
||||
background-color: $color-white-500;
|
||||
}
|
||||
|
||||
.cart-items {
|
||||
@ -233,7 +233,7 @@
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $color-white;
|
||||
background-color: $color-white-500;
|
||||
border: 1px solid $color-gray3;
|
||||
border-radius: 0;
|
||||
border-width: 0 1px;
|
||||
@ -326,7 +326,7 @@
|
||||
|
||||
.item-unavailable-message {
|
||||
background-color: #d8c8ac;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
|
||||
.icon-warning-sign {
|
||||
color: #bb4f4f;
|
||||
@ -408,7 +408,7 @@
|
||||
background-color: $color-black-100;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
|
||||
@ -432,7 +432,7 @@
|
||||
margin: 0 0 34px;
|
||||
|
||||
&__wrapper {
|
||||
background-color: $color-white;
|
||||
background-color: $color-white-500;
|
||||
border-radius: 100px;
|
||||
width: 100%;
|
||||
font-family: $font-family;
|
||||
@ -488,7 +488,7 @@
|
||||
background-color: $color-black-100;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
@ -676,7 +676,7 @@
|
||||
background: $color-black-100;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
@ -800,7 +800,7 @@
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
line-height: 19px;
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -23,6 +23,75 @@
|
||||
@include mq(md, max) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $color-black-500;
|
||||
}
|
||||
|
||||
.progress__wrapper::before {
|
||||
content: "";
|
||||
background: $color-black-500;
|
||||
position: absolute;
|
||||
top: 31px;
|
||||
left: 14px;
|
||||
height: 1px;
|
||||
width: 83%;
|
||||
z-index: -1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.progress__wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
width: 439px;
|
||||
|
||||
.progress__items {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 9px;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
font-family: $font-family-secundary;
|
||||
transform: translateX(-40%);
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
background: $color-black-500;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
height: 4px;
|
||||
width: 0%;
|
||||
z-index: -1;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
.progress__items {
|
||||
position: relative;
|
||||
|
||||
.progress__circle1, .progress__circle2, .progress__circle3 {
|
||||
background: $color-white-500;
|
||||
color: $color-black-500;
|
||||
border-radius: 50%;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid $color-black-500;
|
||||
transition: .4s ease;
|
||||
}
|
||||
|
||||
.active-bar {
|
||||
background: $color-black-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
|
||||
$color-black-100: #292929;
|
||||
$color-black-500: #000000;
|
||||
|
||||
$color-white: #fff;
|
||||
$color-white-500: #fff;
|
||||
|
||||
$color-gray: #6c6c6c;
|
||||
$color-gray2: #7d7d7d;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user