diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index df735cc..52a0851 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -1,39 +1,37 @@
/* eslint-disable prettier/prettier */
-// import waitForEl from "../helpers/waitForEl";
import { waitElement } from "m3-utils";
export default class Header {
constructor() {
this.init();
+ this.progressBarHTML();
+
}
async init() {
await this.selectors();
- this.progessBarHTML();
+ this.progressBarHTML();
await this.progressBarProgress();
}
async selectors() {
- this.herader = await waitElement (".headerCheckout")
- this.progressBar = await waitElement ("#progressBar")
-("#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.header = await waitElement(".headerCheckout");
+ console.log(this.header);
+ this.progressBar = await waitElement("#progressBar");
+ console.log(this.progressBar);
}
-
- progessBarHTML(){
+ // Primeira parte para coloca o html na page
+ progressBarHTML() {
// eslint-disable-next-line no-empty
- if( this.progressBar && window.innerHeight > 1024){
+ if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
--
+
-
-
--
+
-
@@ -41,11 +39,151 @@ export default class Header {
- `
-
+ `;
}
- if(this.progressBar && window.innerHeight <= 1024){
+
+ if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``;
}
}
+
+ circle1(li) {
+ if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+ li.children[0].children[0].children["progress-bar-circle-1"].classList.add("active");
+ }
+ if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+ if (
+ li.children[0].children[0].children["progress-bar-circle-2"].classList.contains(
+ "active"
+ )
+ ) {
+ i.children[0].children[0].children["progress-bar-circle-2"].classList.remove(
+ "active"
+ );
+ }
+
+ if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+ if (
+ li.children[0].children[0].children["progress-bar-circle-3"].classList.contains(
+ "active"
+ )
+ ) {
+ i.children[0].children[0].children["progress-bar-circle-3"].classList.remove(
+ "active"
+ );
+ }
+ }
+ }
+ }
+
+ circle2(li) {
+ if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+ if (
+ li.children[0].children[0].children["progress-bar-circle-1"].classList.contains(
+ "active"
+ )
+ ) {
+ i.children[0].children[0].children["progress-bar-circle-1"].classList.remove(
+ "active"
+ );
+ }
+ }
+
+ if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+ li.children[0].children[0].children["progress-bar-circle-2"].classList.add("active");
+ }
+
+ if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+ if (
+ li.children[0].children[0].children["progress-bar-circle-3"].classList.contains(
+ "active"
+ )
+ ) {
+ i.children[0].children[0].children["progress-bar-circle-3"].classList.remove(
+ "active"
+ );
+ }
+ }
+ }
+
+ circle3(li) {
+ if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+ if (
+ li.children[0].children[0].children["progress-bar-circle-1"].classList.contains(
+ "active"
+ )
+ ) {
+ i.children[0].children[0].children["progress-bar-circle-1"].classList.remove(
+ "active"
+ );
+ }
+ }
+ if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+ if (
+ li.children[0].children[0].children["progress-bar-circle-2"].classList.contains(
+ "active"
+ )
+ ) {
+ i.children[0].children[0].children["progress-bar-circle-2"].classList.remove(
+ "active"
+ );
+ }
+ }
+
+ if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+ li.children[0].children[0].children["progress-bar-circle-3"].classList.add("active");
+ }
+ }
+
+ async progressBarProgress() {
+
+ if (this.progressBar && window.innerHeight > 1024) {
+ const progressBarLista = document.querySelectorAll("#progressBar ul li");
+ progressBarLista.forEach((li) => {
+
+ if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+ this.circle1(li);
+ }
+ else if (
+ window.location.href === "https://m3academy.myvtex.com/checkout/#/email" ||
+ window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
+ window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping"
+ ) {
+ this.circle2(li);
+ }
+ else if (
+ window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
+ ) {
+ this.circle3(li);
+ }
+
+ window.addEventListener("hashchange", () => {
+ if (window.location.hash == "#/cart") {
+ this.circle1(li);
+ }
+ else if (window.location.hash == "#/email" ||
+ window.location.hash == "#/profile" ||
+ window.location.hash == "#/shipping"){
+ this.circle2(li);
+ }
+ else if (window.location.hash == "#/payment"){
+ this.circle3(li);
+ }
+
+ })
+
+
+
+
+
+ });
+
+
+
+
+ }
+ ;
}
+
+}
+;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 36ff011..08402b4 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,12 +1,14 @@
/* _header.scss */
.headerCheckout {
+
.container {
width: auto !important;
- #progressbar{
- width: 446px;
- ul{
+ #progressBar {
+ width: 439px;
+
+ ul {
list-style-type: none;
display: flex;
align-items: center;
@@ -23,23 +25,24 @@
position: relative;
}
- li.central .containerLi{
+ li.central .containerLi {
align-items: center;
margin-left: 7px;
}
- li:last-child .containerLi{
+ li:last-child .containerLi {
align-items: flex-end;
}
- li .containerLi div{
+ li .containerLi div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
- li{
+ li {
+ width: 40%;
display: flex;
flex-direction: column;
align-items: center;
@@ -49,23 +52,26 @@
font-weight: 400;
line-height: 28px;
color: $color-liPonto;
+
@media (min-width: 2500) {
font-size: 24px;
}
}
- li.central{
+ li.central {
width: auto;
}
li #progress-bar-circle-1,
li #progress-bar-circle-2,
- li #progress-bar-circle-3{
+ li #progress-bar-circle-3 {
+
width: 12px;
height: 12px;
- border: 1px solide $color-liPonto;
+ border: 1px solid $color-liPonto;
border-radius: 50%;
+
@media (min-width: 2500) {
width: 24px;
height: 24px;
@@ -75,27 +81,28 @@
li #progress-bar-circle-1.active,
li #progress-bar-circle-2.active,
- li #progress-bar-circle-3.active{
+ li #progress-bar-circle-3.active {
border: none;
background-color: $color-liPonto;
}
- li .progress-bar-line-1{
+ li .progress-bar-line-1 {
+
position: absolute;
- left: 25%;
+ left: 27%;
transform: translateY(-50%);
bottom: 5px;
- width: 100%;
+ width: 96%;
height: 1px;
border-top: 1px solid $color-liPonto;
}
- li .progress-bar-line-2{
+ li .progress-bar-line-2 {
position: absolute;
- left: 21%;
+ right: 22%;
transform: translateY(-50%);
bottom: 5px;
- width: 100%;
+ width: 97%;
height: 1px;
border-top: 1px solid $color-liPonto;
}
@@ -109,6 +116,7 @@
}
+
&__wrapper {
align-items: center;
display: flex;