andreamatsunaga/m3-academy-template-checkout-andrea-matsunaga
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/header' of ssh://gitea.ecommercetools.com.br:22022/andreamatsunaga/m3-academy-template-checkout-andrea-matsunaga into feature/footer

Browse Source
This commit is contained in:
Andrea Matsunaga 2022-12-15 13:13:17 -03:00
commit d20289c2af
2 changed files with 152 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@ export default class Header {
async init() {
await this.selectors();
this.progressBarStructure();
// await this.progressBarMove();
await this.progressBarMove();
}
async selectors() {
@ -23,25 +23,164 @@ export default class Header {
<ul class="progress-bar__container">
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Meu carrinho</p>
<div class="progress-bar__stage--circle"></div>
<div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
</li>
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Dados Pessoais</p>
<div class="progress-bar__stage--circle"></div>
<div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
</li>
<li class="progress-bar__stage">
<p class="progress-bar__stage--text">Pagamento</p>
<div class="progress-bar__stage--circle"></div>
<div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
</li>
</ul>
`
}
// if(this.progressBar && window.innerWidth <=1024) {
// this.progressBar.innerHTML = "";
// }
if(this.progressBar && window.innerWidth <=1024) {
this.progressBar.innerHTML = "";
}
}
async progressBarMove() {
if (this.progressBar && window.innerWidth > 1024) {
const progressBarStages = document.querySelectorAll((".progress-bar__stage"));
progressBarStages.forEach((stage) => {
if(window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if(stage.children["progress-bar__cart"]) {
stage.children["progress-bar__cart"].classList.add("active")
}
if(stage.children["progress-bar__personal-data"]) {
if(stage.children["progress-bar__personal-data"].classList.contains("active")) {
stage.children["progress-bar__personal-data"].classList.remove("active")
}
}
if(stage.children["progress-bar__payment"]) {
if(stage.children["progress-bar__payment"].classList.contains("active")) {
stage.children["progress-bar__payment"].classList.remove("active")
}
}
} 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") {
if(stage.children["progress-bar__cart"]) {
if(stage.children["progress-bar__cart"].classList.contains("active")) {
stage.children["progress-bar__cart"].classList.remove("active")
}
}
if(stage.children["progress-bar__personal-data"]) {
stage.children["progress-bar__personal-data"].classList.add("active")
}
if(stage.children["progress-bar__payment"]) {
if(stage.children["progress-bar__payment"].classList.contains("active")) {
stage.children["progress-bar__payment"].classList.remove("active")
}
}
} else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment") {
if(stage.children["progress-bar__cart"]) {
if(stage.children["progress-bar__cart"].classList.contains("active")) {
stage.children["progress-bar__cart"].classList.remove("active")
}
}
if(stage.children["progress-bar__personal-data"]) {
if(stage.children["progress-bar__personal-data"].classList.contains("active")) {
stage.children["progress-bar__personal-data"].classList.remove("active")
}
}
if(stage.children["progress-bar__payment"]) {
stage.children["progress-bar__payment"].classList.add("active")
}
} else {
console.log("Erro")
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
if(stage.children["progress-bar__cart"]) {
stage.children["progress-bar__cart"].classList.add("active")
}
if(stage.children["progress-bar__personal-data"]) {
if(stage.children["progress-bar__personal-data"].classList.contains("active")) {
stage.children["progress-bar__personal-data"].classList.remove("active")
}
}
if(stage.children["progress-bar__payment"]) {
if(stage.children["progress-bar__payment"].classList.contains("active")) {
stage.children["progress-bar__payment"].classList.remove("active")
}
}
} else if (
window.location.hash == "#/email" ||
window.location.hash == "#/profile" ||
window.location.hash == "#/shipping") {
if(stage.children["progress-bar__cart"]) {
if(stage.children["progress-bar__cart"].classList.contains("active")) {
stage.children["progress-bar__cart"].classList.remove("active")
}
}
if(stage.children["progress-bar__personal-data"]) {
stage.children["progress-bar__personal-data"].classList.add("active")
}
if(stage.children["progress-bar__payment"]) {
if(stage.children["progress-bar__payment"].classList.contains("active")) {
stage.children["progress-bar__payment"].classList.remove("active")
}
}
} else if (window.location.hash == "#/payment") {
if(stage.children["progress-bar__cart"]) {
if(stage.children["progress-bar__cart"].classList.contains("active")) {
stage.children["progress-bar__cart"].classList.remove("active")
}
}
if(stage.children["progress-bar__personal-data"]) {
if(stage.children["progress-bar__personal-data"].classList.contains("active")) {
stage.children["progress-bar__personal-data"].classList.remove("active")
}
}
if(stage.children["progress-bar__payment"]) {
stage.children["progress-bar__payment"].classList.add("active")
}
} else {
console.log("Erro")
}
})
})
}
}
// async progressBarMove() {
@ -53,3 +192,6 @@ export default class Header {
// }
// }
}

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

@ -3,7 +3,6 @@
// position: relative;
margin: 0;
padding: 30px 131px;
width: 100%;
border-bottom: 1px solid $black-500;
.container {
@ -67,9 +66,9 @@
border-radius: 50%;
border: 1px solid $black-500;
// &:active {
// background: $black-500;
// }
&.active {
background: $black-500;
}
}
&::before,