HenriqueSantosSantana/m3-academy-template-checkout-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(progressbar): created the show current url route

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-12-14 13:32:12 -03:00
parent 6963eca4ee
commit 0d60233fdd
2 changed files with 52 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
checkout/src/arquivos/js/components/Header.js
View File

@ -46,12 +46,58 @@ function OnProgress(target) {
}; };
const verifyCurrentRoute = () => { 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 = () => { const init = () => {
innerElement(); innerElement();
verifyCurrentRoute(options); verifyCurrentRoute();
}; };
const remove = () => { const remove = () => {

4
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -187,6 +187,10 @@
border: 1px solid $clr-common-black; border: 1px solid $clr-common-black;
z-index: 10; z-index: 10;
border-radius: 100%; border-radius: 100%;
&.active {
background-color: $clr-common-black;
}
} }
} }
} }