carloswinter/m3-academy-template-checkout-carlos-winter
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): adiciona logica barra de progresso ao header

Browse Source
This commit is contained in:
carloswinter 2022-12-18 21:59:21 -03:00
parent 8373e35099
commit f9c8cd4e33
1 changed files with 162 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,14 +8,174 @@ export default class Header {
async init() {
await this.selectors();
console.log(this.item);
this.events();
this.createProgressBar();
await this.progressBarProgress();
}
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
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
}
events() {
addEventListener("resize", () => {
this.createProgressBar();
this.progressBarProgress();
});
}
createProgressBar() {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<ul class="">
<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>
</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-2"></p>
</div>
</div>
</li>
</ul>
`;
}
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``;
}
}
async progressBarProgress() {
this.circle1 = await waitElement(".progress-bar-circle-1");
this.circle2 = await waitElement(".progress-bar-circle-2");
this.circle3 = await waitElement(".progress-bar-circle-3");
if (this.progressBar && window.innerWidth > 1024) {
const progressBarList = document.querySelectorAll("#progressBar ul li");
progressBarList.forEach((li) => {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (this.circle1) {
this.circle1.classList.add("active");
}
if (this.circle2) {
if (this.circle2.classList.contains("active")) {
this.circle2.classList.remove("active");
}
}
if (this.circle3) {
if (this.circle3.classList.contains("active")) {
this.circle3.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 (this.circle1) {
if (this.circle1.classList.contains("active")) {
this.circle1.classList.remove("active");
}
console.log("email shipping");
console.log(this.circle1);
if (this.circle2) {
this.circle2.classList.add("active");
console.log("teste dados");
}
console.log(this.circle2);
console.log(this.circle3);
if (this.circle3) {
if (this.circle3.classList.contains("active")) {
this.circle3.classList.remove("active");
}
}
}
} else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
) {
if (this.circle1) {
if (this.circle1.classList.contains("active")) {
this.circle1.classList.remove("active");
}
}
if (this.circle2) {
if (this.circle2.classList.contains("active")) {
this.circle2.classList.remove("active");
}
}
if (this.circle3) {
this.circle3.classList.add("active");
}
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
if (this.circle1) {
this.circle1.classList.add("active");
}
if (this.circle2) {
if (this.circle2.classList.contains("active")) {
this.circle2.classList.remove("active");
}
}
if (this.circle3) {
if (this.circle3.classList.contains("active")) {
this.circle3.classList.remove("active");
}
}
} else if (
window.location.hash == "#/email" ||
window.location.hash == "#/profile" ||
window.location.hash == "#/shipping"
) {
if (this.circle1) {
if (this.circle1.classList.contains("active")) {
this.circle1.classList.remove("active");
}
}
if (this.circle2) {
this.circle2.classList.add("active");
}
if (this.circle3) {
if (this.circle3.classList.contains("active")) {
this.circle3.classList.remove("active");
}
}
} else if (window.location.hash == "#/payment") {
if (this.circle1) {
if (this.circle1.classList.contains("active")) {
this.circle1.classList.remove("active");
}
}
if (this.circle2) {
if (this.circle2.classList.contains("active")) {
this.circle2.classList.remove("active");
}
}
if (this.circle3) {
this.circle3.classList.add("active");
}
}
});
});
}
}
}