forked from M3-Academy/m3-academy-template-checkout
Desafio 4 M3 Academy #1
@ -9,7 +9,8 @@ export default class Header {
|
|||||||
async init() {
|
async init() {
|
||||||
await this.selectors();
|
await this.selectors();
|
||||||
this.progressBarHTML();
|
this.progressBarHTML();
|
||||||
await this.progressBarProgress();
|
this.progressBarProgress();
|
||||||
|
// this.progressUpdate();
|
||||||
}
|
}
|
||||||
|
|
||||||
async selectors() {
|
async selectors() {
|
||||||
@ -37,23 +38,40 @@ export default class Header {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// async progressBarProgress() {
|
progressBarProgress() {
|
||||||
// if (this.progressBar && window.innerWidth > 1024) {
|
this.progressUpdate();
|
||||||
// const progressBarList = document.querySelectorAll("#progressBar ul li");
|
|
||||||
// progressBarList.forEach((li) => {
|
window.addEventListener("hashchange", () => {
|
||||||
// if (window.location.href === "htts://m3academy.myvtex.com/checkout/#/cart") {
|
this.progressUpdate();
|
||||||
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
});
|
||||||
// li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
|
}
|
||||||
// "active"
|
|
||||||
// );
|
progressUpdate() {
|
||||||
// }
|
const meuCarrinho = document.querySelector(".progress-bar-circle-1");
|
||||||
// if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
const dadosPessoais = document.querySelector(".progress-bar-circle-2");
|
||||||
// if (
|
const pagamento = document.querySelector(".progress-bar-circle-3");
|
||||||
// li.children[0].children[0].children["progress-bar-circle-2"]
|
|
||||||
// )
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -42,15 +42,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
width: 67%;
|
width: 43.123772102161%;
|
||||||
|
|
||||||
@include mq(xl, max) {
|
@include mq(xl, max) {
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include mq(2xl, min) {
|
||||||
|
width: 52.6787109375%;
|
||||||
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
.central {
|
.central {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user