diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 43c56ae..fe7e30f 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -46,12 +46,58 @@ function OnProgress(target) { }; const verifyCurrentRoute = () => { - console.log(options); + let bullets = target.querySelectorAll(".progress-bullet"); + + bullets.forEach((bullet) => { + if (window.location.href.endsWith("#/cart")) { + bullets[0].classList.add("active"); + } + + if ( + window.location.href.endsWith("#/email") || + window.location.href.endsWith("#/shipping") || + window.location.href.endsWith("#/profile") + ) { + bullets[1].classList.add("active"); + } + + if (window.location.href.endsWith("#/payment")) { + bullets[2].classList.add("active"); + } + + window.addEventListener("hashchange", () => { + if (window.location.href.endsWith("#/cart")) { + bullets[0].classList.add("active"); + + if (bullet != bullets[0]) { + bullet.classList.remove("active"); + } + } + + if ( + window.location.href.endsWith("#/email") || + window.location.href.endsWith("#/shipping") || + window.location.href.endsWith("#/profile") + ) { + bullets[1].classList.add("active"); + if (bullet != bullets[1]) { + bullet.classList.remove("active"); + } + } + + if (window.location.href.endsWith("#/payment")) { + bullets[2].classList.add("active"); + if (bullet != bullets[2]) { + bullet.classList.remove("active"); + } + } + }); + }); }; const init = () => { innerElement(); - verifyCurrentRoute(options); + verifyCurrentRoute(); }; const remove = () => { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 0a906b2..5ed41d9 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -187,6 +187,10 @@ border: 1px solid $clr-common-black; z-index: 10; border-radius: 100%; + + &.active { + background-color: $clr-common-black; + } } } }