diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index aa48675..779ff4c 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -9,20 +9,13 @@ export default class Header {
async init() {
await this.selectors();
this.progressBarHTML();
- await this.progressBarProgress();
+ await this.barProgress();
}
async selectors() {
- this.header = await waitElement(".headerCheckout", {
- //#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", {
- //#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
+ timeout: 5000,
+ interval: 1000,
});
}
@@ -30,43 +23,29 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
-
- -
-
-
-
-
+
-
+
Meu Carrinho
-
-
-
-
-
-
-
-
+
+
-
-
+
+
-
+
+
Pagamento
-
-
-
@@ -80,28 +59,28 @@ export default class Header {
}
}
- async progressBarProgress() {
+ async barProgress() {
if (this.progressBar && window.innerWidth > 1024) {
const progressBarLista = document.querySelectorAll("#progressBar ul li");
progressBarLista.forEach((li) => {
- // console.log(li)
- const liOne = li.children[0].children[1].children["progress-bar-circle-1"];
- const liTwo = li.children[0].children["progress-bar-circle-2"];
- const liThree = li.children[0].children[1].children["progress-bar-circle-3"];
+ console.log(li.children[0])
+ const circleOne = li.children[0].children[1].children["progress-bar-circle-1"];
+ const circleTwo = li.children[0].children["progress-bar-circle-2"];
+ const circleThree = li.children[0].children[1].children["progress-bar-circle-3"];
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
- if (liOne) {
- liOne.classList.add("active");
+ if (circleOne) {
+ circleOne.classList.add("active");
}
- if (liTwo) {
- if (liTwo.classList.contains("active")) {
- liTwo.classList.remove("active");
+ if (circleTwo) {
+ if (circleTwo.classList.contains("active")) {
+ circleTwo.classList.remove("active");
}
}
- if (liThree) {
- if (liThree.classList.contains("active")) {
- liThree.classList.remove("active");
+ if (circleThree) {
+ if (circleThree.classList.contains("active")) {
+ circleThree.classList.remove("active");
}
}
} else if (
@@ -109,53 +88,53 @@ export default class Header {
window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
) {
- if (liOne) {
- if (liOne.classList.contains("active")) {
- liOne.classList.remove("active");
+ if (circleOne) {
+ if (circleOne.classList.contains("active")) {
+ circleOne.classList.remove("active");
}
}
- if (liTwo) {
- liTwo.classList.add("active");
+ if (circleTwo) {
+ circleTwo.classList.add("active");
}
- if (liThree) {
- if (liThree.classList.contains("active")) {
- liThree.classList.remove("active");
+ if (circleThree) {
+ if (circleThree.classList.contains("active")) {
+ circleThree.classList.remove("active");
}
}
} else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
) {
- if (liOne) {
- if (liOne.classList.contains("active")) {
- liOne.classList.remove("active");
+ if (circleOne) {
+ if (circleOne.classList.contains("active")) {
+ circleOne.classList.remove("active");
}
}
- if (liTwo) {
- if (liTwo.classList.contains("active")) {
- liTwo.classList.remove("active");
+ if (circleTwo) {
+ if (circleTwo.classList.contains("active")) {
+ circleTwo.classList.remove("active");
}
}
- if (liThree) {
- liThree.classList.add("active");
+ if (circleThree) {
+ circleThree.classList.add("active");
}
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
- if (liOne) {
- liOne.classList.add("active");
+ if (circleOne) {
+ circleOne.classList.add("active");
}
- if (liTwo) {
- if (liTwo.classList.contains("active")) {
- liTwo.classList.remove("active");
+ if (circleTwo) {
+ if (circleTwo.classList.contains("active")) {
+ circleTwo.classList.remove("active");
}
}
- if (liThree) {
- if (liThree.classList.contains("active")) {
- liThree.classList.remove("active");
+ if (circleThree) {
+ if (circleThree.classList.contains("active")) {
+ circleThree.classList.remove("active");
}
}
} else if (
@@ -163,34 +142,34 @@ export default class Header {
window.location.hash === "#/profile" ||
window.location.hash === "#/shipping"
) {
- if (liOne) {
- if (liOne.classList.contains("active")) {
- liOne.classList.remove("active");
+ if (circleOne) {
+ if (circleOne.classList.contains("active")) {
+ circleOne.classList.remove("active");
}
}
- if (liTwo) {
- liTwo.classList.add("active");
+ if (circleTwo) {
+ circleTwo.classList.add("active");
}
- if (liThree) {
- if (liThree.classList.contains("active")) {
- liThree.classList.remove("active");
+ if (circleThree) {
+ if (circleThree.classList.contains("active")) {
+ circleThree.classList.remove("active");
}
}
} else if (window.location.hash == "#/payment") {
- if (liOne) {
- if (liOne.classList.contains("active")) {
- liOne.classList.remove("active");
+ if (circleOne) {
+ if (circleOne.classList.contains("active")) {
+ circleOne.classList.remove("active");
}
}
- if (liTwo) {
- if (liTwo.classList.contains("active")) {
- liTwo.classList.remove("active");
+ if (circleTwo) {
+ if (circleTwo.classList.contains("active")) {
+ circleTwo.classList.remove("active");
}
}
- if (liThree) {
- liThree.classList.add("active");
+ if (circleThree) {
+ circleThree.classList.add("active");
}
}
});
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index cc8f53f..fb6c453 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -78,20 +78,20 @@
li .progress-bar-line-1 {
position: absolute;
+ width: 100%;
left: 25%;
transform: translateY(-50%);
bottom: 5px;
- width: 100%;
height: 1px;
border-top: 1px solid #000000;
}
li .progress-bar-line-2 {
position: absolute;
+ width: 100%;
right: 21%;
transform: translateY(-50%);
bottom: 5px;
- width: 100%;
height: 1px;
border-top: 1px solid #000000;
}
@@ -123,11 +123,11 @@
text-transform: uppercase;
font-family: $font-family;
+ line-height: 15px;
+ color: $color-gray;
font-style: normal;
font-weight: normal;
font-size: 12px;
- line-height: 15px;
- color: $color-gray;
}
img {