YahToth/m3-academy-template-checkout-gabriel-gomes
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adiciona função da barra de progresso

Browse Source
This commit is contained in:
Gabriel Gomes Fernandes 2022-12-19 05:06:34 -03:00
parent 5ea98992ef
commit bb348e947d
1 changed files with 55 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,8 @@ import { waitElement } from "m3-utils";
export default class Header { export default class Header {
constructor() { constructor() {
this.init(); this.init();
this.progressBar();
this.progressUpdate();
} }
async init() { async init() {
@ -12,10 +14,63 @@ export default class Header {
} }
async selectors() { async selectors() {
this.progressBar = await waitElement(".progress-bar");
this.item = await waitElement("#my-element", { this.item = await waitElement("#my-element", {
//#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
}); });
} }
progressBar() {
const progressBar = document.querySelector(".progress-bar");
progressBar.innerHTML = "";
let progressBarHTML = `
<div class="progresscontainer">
<div class="progresswrapper">
<div class="progress" id="progress"></div>
<div class="progresstext"><span>Meu Carrinho</span><div class="progresscircle1" ></div></div>
<div class="progresstext"><span>Dados Pessoais</span><div class="progresscircle2" ></div></div>
<div class="progresstext"><span>Pagamento</span><div class="progresscircle3"></div></div>
</div>
</div>`;
$(".progress-bar").prepend(progressBarHTML);
}
progressUpdate() {
this.caseUpdate();
window.addEventListener("hashchange", () => {
this.caseUpdate();
});
}
caseUpdate() {
const cart = document.querySelector(".progresscircle1");
const personalData = document.querySelector(".progresscircle2");
const payment = document.querySelector(".progresscircle3");
switch (location.hash) {
case "#/cart":
cart.classList.add("progressActive");
personalData.classList.remove("progressActive");
break;
case "#/email":
case "#/profile":
case "#/shipping":
personalData.classList.add("progressActive");
cart.classList.remove("progressActive");
payment.classList.remove("progressActive");
break;
case "#/payment":
payment.classList.add("progressActive");
personalData.classList.remove("progressActive");
cart.classList.remove("progressActive");
break;
}
}
} }