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

feat: Criação de todo JS do Header

Browse Source
This commit is contained in:
José Carlos Lins 2022-12-10 08:08:46 -03:00
parent 2dab582c69
commit 2622f585d7
1 changed files with 119 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,16 +6,126 @@ export default class Header {
this.init();
}
async init() {
await this.selectors();
console.log(this.item);
async selectors() {
this.progressBar = await waitElement("#progressBar");
}
async selectors() {
this.item = await waitElement("#my-element", {
//#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
});
async init() {
await this.selectors();
this.progressBarHTML();
await this.progressBarDots();
}
progressBarHTML() {
if (this.progressBar && window.screen.width > 1024) {
this.progressBar.innerHTML = `<ol class="ProgressBar">
<li class="ProgressBar-step stepOne">
<span class="step-1">Meu Carrinho</span>
</li>
<li class="ProgressBar-step stepTwo">
<span class="step-2">Dados Pessoais</span>
</li>
<li class="ProgressBar-step stepThree">
<span class="step-3">Pagamento</span>
</li>
</ol>
`;
} else {
this.progressBar.innerHTML = "";
}
}
async progressBarDots() {
if (this.progressBar && window.screen.width > 1024) {
const progressBarList = document.querySelectorAll("#progressBar ol li");
console.log(progressBarList);
progressBarList.forEach((li) => {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (li.children[0].classList.contains("step-1")) {
li.children[0].classList.add("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].classList.contains("step-2")) {
li.children[0].classList.add("active");
}
} else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
) {
if (li.children[0].classList.contains("step-3")) {
li.children[0].classList.add("active");
}
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
if (
li.children[0].classList.contains("step-1") &&
!li.children[0].classList.contains("active")
) {
li.children[0].classList.add("active");
}
if (
li.children[0].classList.contains("step-2") &&
li.children[0].classList.contains("active")
) {
li.children[0].classList.remove("active");
}
if (
li.children[0].classList.contains("step-3") &&
li.children[0].classList.contains("active")
) {
li.children[0].classList.remove("active");
}
} else if (
window.location.hash == "#/email" ||
window.location.hash == "#/profile" ||
window.location.hash == "#/shipping"
) {
if (
li.children[0].classList.contains("step-2") &&
!li.children[0].classList.contains("active")
) {
li.children[0].classList.add("active");
}
if (
li.children[0].classList.contains("step-1") &&
li.children[0].classList.contains("active")
) {
li.children[0].classList.remove("active");
}
if (
li.children[0].classList.contains("step-3") &&
li.children[0].classList.contains("active")
) {
li.children[0].classList.remove("active");
}
} else if (window.location.hash == "#/payment") {
if (
li.children[0].classList.contains("step-3") &&
!li.children[0].classList.contains("active")
) {
li.children[0].classList.add("active");
}
if (
li.children[0].classList.contains("step-1") &&
li.children[0].classList.contains("active")
) {
li.children[0].classList.remove("active");
}
if (
li.children[0].classList.contains("step-2") &&
li.children[0].classList.contains("active")
) {
li.children[0].classList.remove("active");
}
}
});
});
}
}
}