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

development #1

Merged
andreamatsunaga merged 17 commits from development into main 2022-12-19 04:49:09 +00:00
Conversation 0 Commits 17 Files Changed 15 +151 -18
2 changed files with 151 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 740079307e - Show all commits

163
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,33 +23,166 @@ 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 progressBarList = document.querySelectorAll(("#progressBar ul li"));
// progressBarList.forEach((li) => {
// console.log("Aqui vem seu código")
// })
// }
// }
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")
}
})
})
}
}
}

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

@ -66,9 +66,9 @@
border-radius: 50%;
border: 1px solid $black-500;
// &:active {
// background: $black-500;
// }
&.active {
background: $black-500;
}
}
&::before,