naianfelix/m3-academy-template-checkout-naian-felix
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona função da progressbar

Browse Source
This commit is contained in:
Naian Felix dos Santos 2022-12-12 23:01:30 -03:00
parent 41e30aa61f
commit d29a89b9a8
2 changed files with 45 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,8 @@ export default class Header {
async init() {
await this.selectors();
this.progressBarHTML();
await this.progressBarProgress();
this.progressBarProgress();
// this.progressUpdate();
}
async selectors() {
@ -37,23 +38,40 @@ export default class Header {
}
}
// async progressBarProgress() {
// if (this.progressBar && window.innerWidth > 1024) {
// const progressBarList = document.querySelectorAll("#progressBar ul li");
// progressBarList.forEach((li) => {
// if (window.location.href === "htts://m3academy.myvtex.com/checkout/#/cart") {
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
// li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
// "active"
// );
// }
// if (li.children[0].children[0].children["progress-bar-circle-2"]) {
// if (
// li.children[0].children[0].children["progress-bar-circle-2"]
// )
// }
// }
// });
// }
// }
progressBarProgress() {
this.progressUpdate();
window.addEventListener("hashchange", () => {
this.progressUpdate();
});
}
progressUpdate() {
const meuCarrinho = document.querySelector(".progress-bar-circle-1");
const dadosPessoais = document.querySelector(".progress-bar-circle-2");
const pagamento = document.querySelector(".progress-bar-circle-3");
switch (location.hash) {
case "#/cart":
meuCarrinho.classList.add("active");
dadosPessoais.classList.remove("active");
pagamento.classList.remove("active");
break;
case "#/profile":
case "#/shipping":
meuCarrinho.classList.remove("active");
dadosPessoais.classList.add("active");
pagamento.classList.remove("active");
break;
case "#/payment":
dadosPessoais.classList.remove("active");
meuCarrinho.classList.remove("active");
pagamento.classList.add("active");
break;
}
}
}

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

@ -42,15 +42,21 @@
}
.progress-bar {
width: 67%;
width: 43.123772102161%;
@include mq(xl, max) {
width: 0;
}
@include mq(2xl, min) {
width: 52.6787109375%;
}
.list {
display: flex;
justify-content: center;
margin: 0;
.central {
width: 33%;
}