ThiagoDutraSampaioLeite/m3-academy-template-checkout-thiago-dutra
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feat: cria header funcionalidade' (#4) from feature/criaHeader into main

Browse Source 
Reviewed-on: #4
This commit is contained in:
ThiagoDutraSampaioLeite 2022-12-14 13:47:56 +00:00
commit ccc3b1d46d
2 changed files with 133 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
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.progressBarDesktop(); this.progressBarDesktop();
await this.stepBarProcess();
} }
async selectors() { async selectors() {
@ -28,11 +29,9 @@ export default class Header {
<li> <li>
<div class="containerList"> <div class="containerList">
<div class="containerList__div"> <div class="containerList__div">
<p class="containerList__text">Meu carrinho</p> <p class="containerList__text">Meu carrinho</p>
<p class="containerList__circle-1 ${ <p id="containerList__circle1" class="containerList__circle1"></p>
window.location.href.includes(`cart`) ? `active` : `` <p class="containerList__line"></p>
}"></p>
<p class="containerList__line"></p>
</div> </div>
</div> </div>
</li> </li>
@ -41,8 +40,7 @@ export default class Header {
<div class="containerList"> <div class="containerList">
<div class="containerList__div"> <div class="containerList__div">
<p class="containerList__text">Dados Pessoais</p> <p class="containerList__text">Dados Pessoais</p>
<p class="containerList__circle-2"></p> <p id="containerList__circle2" class="containerList__circle2"></p>
</div> </div>
</div> </div>
</li> </li>
@ -50,9 +48,9 @@ export default class Header {
<li> <li>
<div class="containerList" > <div class="containerList" >
<div class="containerList__div"> <div class="containerList__div">
<p class="containerList__text">Pagamento </p> <p class="containerList__text">Pagamento</p>
<p class="containerList__circle-3"> </p> <p id="containerList__circle3" class="containerList__circle3"></p>
<p class="containerList__line2"> </p> <p class="containerList__line2"></p>
<div/> <div/>
</div> </div>
</li> </li>
@ -64,4 +62,126 @@ export default class Header {
this.progressBar.innerHTML = ""; 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);
}
});
});
}
}
} }

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

@ -79,9 +79,9 @@
justify-content: center; justify-content: center;
} }
&__circle-1, &__circle1,
&__circle-2, &__circle2,
&__circle-3 { &__circle3 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;