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

feat(header): html added to javaScipt

Browse Source
This commit is contained in:
Matheus Brollo Dauter 2022-12-13 17:05:54 -03:00
parent 30555d9098
commit c64423a396
1 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,3 @@
// import waitForEl from "../helpers/waitForEl";
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
export default class Header { export default class Header {
@ -8,14 +7,42 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); this.progressBarHTML();
await this.progressBarProgress();
} }
async selectors() { async selectors() {
this.item = await waitElement("#my-element", { this.header = await waitElement(".headerCheckout");
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar this.progressBar = await waitElement("#progressBar");
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
} }
progressBarHTML() {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<ul>
<li><div class="containerLi"><div><p class="progress-bar-text">Meu Carinho</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.innerHTML <= 1024) {
this.progressBar.innerHTML = ``;
}
}
// async progressBarProgress() {
// if (this.progressBar && window.innerHTML > 1024) {
// const progressBarList = document.querySelectorAll("#progressBar ul li");
// progressBarList.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"
// };
// }
// }
// }]
// }
// }
} }