NicollyVieira/m3-academy-template-checkout-nicolly-vieira
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/header #1

Merged
NicollyVieira merged 5 commits from feature/header into development 2022-12-13 17:01:47 +00:00
Conversation 0 Commits 5 Files Changed 7 +104 -10
2 changed files with 104 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6e90473147 - Show all commits

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

@ -10,7 +10,7 @@ export default class Header {
await this.selectors(); await this.selectors();
this.events(); this.events();
this.criaProgressBar(); this.criaProgressBar();
console.log(this.progressBar); await this.alteraProgressBar();
} }
async selectors() { async selectors() {
@ -23,15 +23,15 @@ export default class Header {
} }
criaProgressBar() { criaProgressBar() {
if(window.innerWidth > 1024) { if (window.innerWidth > 1024) {
if(this.progressBar) { if (this.progressBar) {
this.progressBar.innerHTML = ` this.progressBar.innerHTML = `
<ul class="progress-bar__ul"> <ul class="progress-bar__ul">
<li class="progress-bar__li"> <li class="progress-bar__li">
<div class="progress-bar__container"> <div class="progress-bar__container">
<div class="progress-bar__content"> <div class="progress-bar__content">
<p class="progress-bar__title">Meu Carrinho</p> <p class="progress-bar__title">Meu Carrinho</p>
<p class="progress-bar__circle-1"></p> <p id="progress-bar__circle-1"></p>
<p class="progress-bar__line-1"></p> <p class="progress-bar__line-1"></p>
</div> </div>
</div> </div>
@ -40,7 +40,7 @@ export default class Header {
<div class="progress-bar__container"> <div class="progress-bar__container">
<div class="progress-bar__content"> <div class="progress-bar__content">
<p class="progress-bar__title">Dados Pessoais</p> <p class="progress-bar__title">Dados Pessoais</p>
<p class="progress-bar__circle-2"></p> <p id="progress-bar__circle-2"></p>
</div> </div>
</div> </div>
</li> </li>
@ -48,7 +48,7 @@ export default class Header {
<div class="progress-bar__container"> <div class="progress-bar__container">
<div class="progress-bar__content"> <div class="progress-bar__content">
<p class="progress-bar__title">Pagamento</p> <p class="progress-bar__title">Pagamento</p>
<p class="progress-bar__circle-3"></p> <p id="progress-bar__circle-3"></p>
<p class="progress-bar__line-2"></p> <p class="progress-bar__line-2"></p>
</div> </div>
</div> </div>
@ -58,9 +58,98 @@ export default class Header {
} }
} else { } else {
this.progressBar.innerHTML = ""; this.progressBar.innerHTML = "";
console.log("passando"); }
this.alteraProgressBar();
}
ativaPrimeiroCirculo(el) {
if (el.children["progress-bar__circle-1"]) {
el.children["progress-bar__circle-1"].classList.add("active");
}
if (el.children["progress-bar__circle-2"]) {
if (el.children["progress-bar__circle-2"].classList.contains("active")) {
el.children["progress-bar__circle-2"].classList.remove("active");
} }
} }
if (el.children["progress-bar__circle-3"]) {
if (el.children["progress-bar__circle-3"].classList.contains("active")) {
el.children["progress-bar__circle-3"].classList.remove("active");
}
}
}
ativaSegundoCirculo(el) {
if (el.children["progress-bar__circle-1"]) {
if (el.children["progress-bar__circle-1"].classList.contains("active")) {
el.children["progress-bar__circle-1"].classList.remove("active");
}
}
if (el.children["progress-bar__circle-2"]) {
el.children["progress-bar__circle-2"].classList.add("active");
}
if (el.children["progress-bar__circle-3"]) {
if (el.children["progress-bar__circle-3"].classList.contains("active")) {
el.children["progress-bar__circle-3"].classList.remove("active");
}
}
}
ativaTerceiroCirculo(el) {
if (el.children["progress-bar__circle-1"]) {
if (el.children["progress-bar__circle-1"].classList.contains("active")) {
el.children["progress-bar__circle-1"].classList.remove("active");
}
}
if (el.children["progress-bar__circle-2"]) {
if (el.children["progress-bar__circle-2"].classList.contains("active")) {
el.children["progress-bar__circle-2"].classList.remove("active");
}
}
if (el.children["progress-bar__circle-3"]) {
el.children["progress-bar__circle-3"].classList.add("active");
}
}
async alteraProgressBar() {
if (this.progressBar && window.innerWidth > 1024) {
const progressBarContent = document.querySelectorAll(".progress-bar__content");
progressBarContent.forEach((el) => {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
this.ativaPrimeiroCirculo(el);
} 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.ativaSegundoCirculo(el);
} else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
) {
this.ativaTerceiroCirculo(el);
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
this.ativaPrimeiroCirculo(el);
} else if (
window.location.hash == "#/email" ||
window.location.hash == "#/profile" ||
window.location.hash == "#/shipping"
) {
this.ativaSegundoCirculo(el);
} else if (window.location.hash == "#/payment") {
this.ativaTerceiroCirculo(el);
}
});
});
}
}
} }

11
checkout/src/arquivos/sass/partials/_progressBar.scss
View File

@ -12,6 +12,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
&__li { &__li {
@ -64,14 +65,18 @@
margin-bottom: 9px; margin-bottom: 9px;
} }
&__circle-1, #progress-bar__circle-1,
&__circle-2, #progress-bar__circle-2,
&__circle-3 { #progress-bar__circle-3 {
width: 12px; width: 12px;
height: 12px; height: 12px;
border: 1px solid $black-500; border: 1px solid $black-500;
border-radius: 50%; border-radius: 50%;
&.active {
background-color: $black-500;
}
} }
&__line-1, &__line-1,