forked from M3-Academy/m3-academy-template-checkout
feat(Header.js): add função para a "#progressBar"
This commit is contained in:
parent
2dab582c69
commit
9a6c8af4e4
@ -9,13 +9,247 @@ export default class Header {
|
|||||||
async init() {
|
async init() {
|
||||||
await this.selectors();
|
await this.selectors();
|
||||||
console.log(this.item);
|
console.log(this.item);
|
||||||
|
console.log(this.header);
|
||||||
|
this.progressBarHtml();
|
||||||
|
await this.progressBarProgress();
|
||||||
}
|
}
|
||||||
|
|
||||||
async selectors() {
|
async selectors() {
|
||||||
this.item = await waitElement("#my-element", {
|
this.item = await waitElement("#progressBar", {
|
||||||
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
|
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
|
||||||
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||||
});
|
});
|
||||||
|
this.header = await waitElement(".headerCheckout");
|
||||||
|
this.progressBar = await waitElement("#progressBar");
|
||||||
|
}
|
||||||
|
|
||||||
|
progressBarHtml() {
|
||||||
|
if (this.progressBar && window.innerWidth > 1024) {
|
||||||
|
this.progressBar.innerHTML = `
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="containerLi">
|
||||||
|
<div>
|
||||||
|
<p class="progress-bar-text">Meu Carrinho</p>
|
||||||
|
<p id="progress-bar-circle-1" class="progress-bar-circle-1"></p>
|
||||||
|
<p class="progress-bar-line-1"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="central">
|
||||||
|
<div class="containerLi">
|
||||||
|
<div>
|
||||||
|
<p class="progress-bar-text">Dados Pessoais</p>
|
||||||
|
<p id="progress-bar-circle-2" class="progress-bar-circle-2"></p>
|
||||||
|
<p class="progress-bar-line-2"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="containerLi">
|
||||||
|
<div>
|
||||||
|
<p class="progress-bar-text">Pagamento</p>
|
||||||
|
<p id="progress-bar-circle-3" class="progress-bar-circle-3"></p>
|
||||||
|
<p class="progress-bar-line-3"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
if (this.progressBar && window.innerWidth <= 1024) {
|
||||||
|
this.progressBar.innerHTML = ``;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async progressBarProgress() {
|
||||||
|
if (this.progressBar && window.innerWidth > 1024) {
|
||||||
|
const progressBarLista = document.querySelectorAll("#progressBar ul li");
|
||||||
|
progressBarLista.forEach((li) => {
|
||||||
|
if (window.location.href === "https://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"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-2"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||||
|
if (
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].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 (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||||
|
if (
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-1"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-1"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||||
|
li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
|
||||||
|
"active"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (li.children[0].children.children["progress-bar-circle-3"]) {
|
||||||
|
if (
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (
|
||||||
|
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
|
||||||
|
) {
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||||
|
if (
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-1"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-1"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||||
|
if (
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-2"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-2"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||||
|
li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
|
||||||
|
"active"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener("hashchange", () => {
|
||||||
|
if (window.location.hash == "#/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"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-2"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||||
|
if (
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (
|
||||||
|
window.location.hash == "#/email" ||
|
||||||
|
window.location.hash == "#/profile" ||
|
||||||
|
window.location.hash == "#/shipping"
|
||||||
|
) {
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||||
|
if (
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-1"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-1"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-2"
|
||||||
|
].classList.add("active");
|
||||||
|
}
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||||
|
if (
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (window.location.hash == "#/payment") {
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||||
|
if (
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-1"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-1"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||||
|
if (
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-2"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-2"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].classList.add("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -45,6 +45,7 @@
|
|||||||
"jquery": "^3.6.0",
|
"jquery": "^3.6.0",
|
||||||
"m3-utils": "^0.1.0",
|
"m3-utils": "^0.1.0",
|
||||||
"sass": "^1.38.1",
|
"sass": "^1.38.1",
|
||||||
|
"slick-carousel": "^1.8.1",
|
||||||
"terser-webpack-plugin": "^5.1.4"
|
"terser-webpack-plugin": "^5.1.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -19345,6 +19346,7 @@
|
|||||||
"m3-utils": "^0.1.0",
|
"m3-utils": "^0.1.0",
|
||||||
"prettier": "^2.3.2",
|
"prettier": "^2.3.2",
|
||||||
"sass": "^1.38.1",
|
"sass": "^1.38.1",
|
||||||
|
"slick-carousel": "^1.8.1",
|
||||||
"terser-webpack-plugin": "^5.1.4",
|
"terser-webpack-plugin": "^5.1.4",
|
||||||
"webpack": "^5.51.1",
|
"webpack": "^5.51.1",
|
||||||
"webpack-merge": "^5.8.0"
|
"webpack-merge": "^5.8.0"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user