-
Pagamento
-
-
+
Pagamento
+
+
@@ -64,4 +62,126 @@ export default class Header {
this.progressBar.innerHTML = "";
}
}
+
+ circle1(li) {
+ if (li.children[0].children[0].children["containerList__circle1"]) {
+ li.children[0].children[0].children["containerList__circle1"].classList.add("active");
+ }
+ if (li.children[0].children[0].children["containerList__circle2"]) {
+ if (
+ li.children[0].children[0].children["containerList__circle2"].classList.contains(
+ "active"
+ )
+ ) {
+ li.children[0].children[0].children["containerList__circle2"].classList.remove(
+ "active"
+ );
+ }
+ }
+
+ if (li.children[0].children[0].children["containerList__circle3"]) {
+ if (
+ li.children[0].children[0].children["containerList__circle3"].classList.contains(
+ "active"
+ )
+ ) {
+ li.children[0].children[0].children["containerList__circle3"].classList.remove(
+ "active"
+ );
+ }
+ }
+ }
+
+ circle2(li) {
+ if (li.children[0].children[0].children["containerList__circle1"]) {
+ if (
+ li.children[0].children[0].children["containerList__circle1"].classList.contains(
+ "active"
+ )
+ ) {
+ li.children[0].children[0].children["containerList__circle1"].classList.remove(
+ "active"
+ );
+ }
+ }
+ if (li.children[0].children[0].children["containerList__circle2"]) {
+ li.children[0].children[0].children["containerList__circle2"].classList.add("active");
+ }
+
+ if (li.children[0].children[0].children["containerList__circle3"]) {
+ if (
+ li.children[0].children[0].children["containerList__circle3"].classList.contains(
+ "active"
+ )
+ ) {
+ li.children[0].children[0].children["containerList__circle3"].classList.remove(
+ "active"
+ );
+ }
+ }
+ }
+
+ circle3(li) {
+ if (li.children[0].children[0].children["containerList__circle1"]) {
+ if (
+ li.children[0].children[0].children["containerList__circle1"].classList.contains(
+ "active"
+ )
+ ) {
+ li.children[0].children[0].children["containerList__circle1"].classList.remove(
+ "active"
+ );
+ }
+ }
+
+ if (li.children[0].children[0].children["containerList__circle2"]) {
+ if (
+ li.children[0].children[0].children["containerList__circle2"].classList.contains(
+ "active"
+ )
+ ) {
+ li.children[0].children[0].children["containerList__circle2"].classList.remove(
+ "active"
+ );
+ }
+ }
+ if (li.children[0].children[0].children["containerList__circle3"]) {
+ li.children[0].children[0].children["containerList__circle3"].classList.add("active");
+ }
+ }
+
+ async stepBarProcess() {
+ if (this.progressBar && window.innerWidth > 1024) {
+ const listProgressBar = document.querySelectorAll("#progressBar ul li");
+ listProgressBar.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 31efbcd..1061d5e 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -79,9 +79,9 @@
justify-content: center;
}
- &__circle-1,
- &__circle-2,
- &__circle-3 {
+ &__circle1,
+ &__circle2,
+ &__circle3 {
display: flex;
align-items: center;
justify-content: center;