forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'feat: cria header funcionalidade' (#4) from feature/criaHeader into main
Reviewed-on: #4
This commit is contained in:
commit
ccc3b1d46d
@ -9,6 +9,7 @@ export default class Header {
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.progressBarDesktop();
|
||||
await this.stepBarProcess();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
@ -28,11 +29,9 @@ export default class Header {
|
||||
<li>
|
||||
<div class="containerList">
|
||||
<div class="containerList__div">
|
||||
<p class="containerList__text">Meu carrinho</p>
|
||||
<p class="containerList__circle-1 ${
|
||||
window.location.href.includes(`cart`) ? `active` : ``
|
||||
}"></p>
|
||||
<p class="containerList__line"></p>
|
||||
<p class="containerList__text">Meu carrinho</p>
|
||||
<p id="containerList__circle1" class="containerList__circle1"></p>
|
||||
<p class="containerList__line"></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@ -41,8 +40,7 @@ export default class Header {
|
||||
<div class="containerList">
|
||||
<div class="containerList__div">
|
||||
<p class="containerList__text">Dados Pessoais</p>
|
||||
<p class="containerList__circle-2"></p>
|
||||
|
||||
<p id="containerList__circle2" class="containerList__circle2"></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@ -50,9 +48,9 @@ export default class Header {
|
||||
<li>
|
||||
<div class="containerList" >
|
||||
<div class="containerList__div">
|
||||
<p class="containerList__text">Pagamento </p>
|
||||
<p class="containerList__circle-3"> </p>
|
||||
<p class="containerList__line2"> </p>
|
||||
<p class="containerList__text">Pagamento</p>
|
||||
<p id="containerList__circle3" class="containerList__circle3"></p>
|
||||
<p class="containerList__line2"></p>
|
||||
<div/>
|
||||
</div>
|
||||
</li>
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -79,9 +79,9 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__circle-1,
|
||||
&__circle-2,
|
||||
&__circle-3 {
|
||||
&__circle1,
|
||||
&__circle2,
|
||||
&__circle3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
Loading…
Reference in New Issue
Block a user