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();
this.events();
this.criaProgressBar();
console.log(this.progressBar);
await this.alteraProgressBar();
}
async selectors() {
@ -23,15 +23,15 @@ export default class Header {
}
criaProgressBar() {
if(window.innerWidth > 1024) {
if(this.progressBar) {
if (window.innerWidth > 1024) {
if (this.progressBar) {
this.progressBar.innerHTML = `
<ul class="progress-bar__ul">
<li class="progress-bar__li">
<div class="progress-bar__container">
<div class="progress-bar__content">
<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>
</div>
</div>
@ -40,7 +40,7 @@ export default class Header {
<div class="progress-bar__container">
<div class="progress-bar__content">
<p class="progress-bar__title">Dados Pessoais</p>
<p class="progress-bar__circle-2"></p>
<p id="progress-bar__circle-2"></p>
</div>
</div>
</li>
@ -48,7 +48,7 @@ export default class Header {
<div class="progress-bar__container">
<div class="progress-bar__content">
<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>
</div>
</div>
@ -58,9 +58,98 @@ export default class Header {
}
} else {
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;
justify-content: space-between;
align-items: center;
}
&__li {
@ -64,14 +65,18 @@
margin-bottom: 9px;
}
&__circle-1,
&__circle-2,
&__circle-3 {
#progress-bar__circle-1,
#progress-bar__circle-2,
#progress-bar__circle-3 {
width: 12px;
height: 12px;
border: 1px solid $black-500;
border-radius: 50%;
&.active {
background-color: $black-500;
}
}
&__line-1,