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

feature/progressbar #2

Merged
HenriqueSantosSantana merged 3 commits from feature/progressbar into develop 2022-12-14 16:33:59 +00:00
Conversation 0 Commits 3 Files Changed 3 +52 -2
2 changed files with 52 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0d60233fdd - Show all commits

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

@ -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 = () => {

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

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