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

feat: cria header funcionalidade

Browse Source
This commit is contained in:
ThiagoDuutra 2022-12-14 10:47:32 -03:00
parent 10bc9b01c4
commit 6dd11bab15
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() {
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);
}
});
});
}
}
}

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

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