ManuelaLuanaSchumackerTavares/m3-academy-template-checkout-manuela-luana-schumacker-tavares
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(checkout): Adiciona interação de mudança de acordo com a página/em caso de reload nas dots da barra de progresso #2

Merged
ManuelaLuanaSchumackerTavares merged 1 commits from feature/header into develop 2022-12-12 17:50:52 +00:00
Conversation 0 Commits 1 Files Changed 2 +215 -1
2 changed files with 215 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
this.progressBarContent(); this.progressBarContent();
await this.progressBarDot();
} }
async selectors() { async selectors() {
@ -55,4 +56,202 @@ export default class Header {
this.progressBar.innerHTML = ``; this.progressBar.innerHTML = ``;
} }
} }
async progressBarDot() {
if (this.progressBar && window.innerWidth > 1024) {
const progressList = document.querySelectorAll("#progressBar ul li");
progressList.forEach((li) => {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (li.children[0].children[0].children["progress-bar-first-circle"]) {
li.children[0].children[0].children[
"progress-bar-first-circle"
].classList.add("active");
}
if (li.children[0].children[0].children["progress-bar-second-circle"]) {
if (
li.children[0].children[0].children[
"progress-bar-second-circle"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-second-circle"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-third-circle"]) {
if (
li.children[0].children[0].children[
"progress-bar-third-circle"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-third-circle"
].classList.remove("active");
}
}
} 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"
) {
if (li.children[0].children[0].children["progress-bar-first-circle"]) {
if (
li.children[0].children[0].children[
"progress-bar-first-circle"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-first-circle"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-second-circle"]) {
li.children[0].children[0].children[
"progress-bar-second-circle"
].classList.add("active");
}
if (li.children[0].children[0].children["progress-bar-third-circle"]) {
if (
li.children[0].children[0].children[
"progress-bar-third-circle"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-third-circle"
].classList.remove("active");
}
}
} else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
) {
if (li.children[0].children[0].children["progress-bar-first-circle"]) {
if (
li.children[0].children[0].children[
"progress-bar-first-circle"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-first-circle"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-second-circle"]) {
if (
li.children[0].children[0].children[
"progress-bar-second-circle"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-second-circle"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-third-circle"]) {
li.children[0].children[0].children[
"progress-bar-third-circle"
].classList.add("active");
}
}
this.progressBarWhenHashChange();
});
}
}
progressBarWhenHashChange() {
const progressList = document.querySelectorAll("#progressBar ul li");
progressList.forEach((li) => {
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
if (li.children[0].children[0].children["progress-bar-first-circle"]) {
li.children[0].children[0].children[
"progress-bar-first-circle"
].classList.add("active");
}
if (li.children[0].children[0].children["progress-bar-second-circle"]) {
if (
li.children[0].children[0].children[
"progress-bar-second-circle"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-second-circle"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-third-circle"]) {
if (
li.children[0].children[0].children[
"progress-bar-third-circle"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-third-circle"
].classList.remove("active");
}
}
} else if (
window.location.hash == "#/email" ||
window.location.hash == "#/profile" ||
window.location.hash == "#/shipping"
) {
if (li.children[0].children[0].children["progress-bar-first-circle"]) {
if (
li.children[0].children[0].children[
"progress-bar-first-circle"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-first-circle"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-second-circle"]) {
li.children[0].children[0].children[
"progress-bar-second-circle"
].classList.add("active");
}
if (li.children[0].children[0].children["progress-bar-third-circle"]) {
if (
li.children[0].children[0].children[
"progress-bar-third-circle"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-third-circle"
].classList.remove("active");
}
}
} else if (window.location.hash == "#/payment") {
if (li.children[0].children[0].children["progress-bar-first-circle"]) {
if (
li.children[0].children[0].children[
"progress-bar-first-circle"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-first-circle"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-second-circle"]) {
if (
li.children[0].children[0].children[
"progress-bar-second-circle"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-second-circle"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-third-circle"]) {
li.children[0].children[0].children[
"progress-bar-third-circle"
].classList.add("active");
}
}
});
});
}
} }

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

@ -94,7 +94,6 @@
margin-top: 9px; margin-top: 9px;
border: 1px solid $color-black2; border: 1px solid $color-black2;
border-radius: 50%; border-radius: 50%;
background: $color-white;
@include mq(xxl, min) { @include mq(xxl, min) {
width: 24px; width: 24px;
@ -102,6 +101,18 @@
} }
} }
.containerProgressBar .progress-bar-first-circle {
background: $color-white;
}
.containerProgressBar .progress-bar-second-circle {
background: $color-white;
}
.containerProgressBar .progress-bar-third-circle {
background: $color-white;
}
&__logo { &__logo {
img { img {
height: 52px; height: 52px;
@ -165,4 +176,8 @@
} }
} }
} }
.active {
background: $color-black2 !important;
}
} }