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

criação da funçaõ para onde se encintra a pagina no progressBar

Browse Source
This commit is contained in:
Ueber James Santos 2022-12-13 16:19:16 -03:00
parent 0165e17ca4
commit d8b2110196
2 changed files with 180 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,39 +1,37 @@
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
// import waitForEl from "../helpers/waitForEl";
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
export default class Header { export default class Header {
constructor() { constructor() {
this.init(); this.init();
this.progressBarHTML();
} }
async init() { async init() {
await this.selectors(); await this.selectors();
this.progessBarHTML(); this.progressBarHTML();
await this.progressBarProgress(); await this.progressBarProgress();
} }
async selectors() { async selectors() {
this.herader = await waitElement (".headerCheckout") this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement ("#progressBar") console.log(this.header);
("#my-element", { this.progressBar = await waitElement("#progressBar");
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar console.log(this.progressBar);
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
} }
// Primeira parte para coloca o html na page
progessBarHTML(){ progressBarHTML() {
// eslint-disable-next-line no-empty // eslint-disable-next-line no-empty
if( this.progressBar && window.innerHeight > 1024){ if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = ` this.progressBar.innerHTML = `
<ul> <ul>
<li><div class="containerLi"><div><p class="progress-bar-text">Meu Carrinho</p><p id="pogress-bar-circle-1 class="progress-bar-circle-1"></p><p progress-bar-line-1></p></div></div> <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>
<li class="central"><div class="containerLi"><div><p class="progress-bar-text">Meus Dados</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div> <li class="central"><div class="containerLi"><div><p class="progress-bar-text">Meus Dados</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div>
</li> </li>
<li><div class="containerLi"><div><p class="progress-bar-text">Pagamento</p><p id="pogress-bar-circle-3 class="progress-bar-circle-3"></p><p progress-bar-line-2></p></div></div> <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> </li>
@ -41,11 +39,151 @@ export default class Header {
` `;
} }
if(this.progressBar && window.innerHeight <= 1024){
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``; this.progressBar.innerHTML = ``;
} }
} }
circle1(li) {
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"
)
) {
i.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"
)
) {
i.children[0].children[0].children["progress-bar-circle-3"].classList.remove(
"active"
);
}
}
}
}
circle2(li) {
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"
)
) {
i.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"
)
) {
i.children[0].children[0].children["progress-bar-circle-3"].classList.remove(
"active"
);
}
}
}
circle3(li) {
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"
)
) {
i.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"
)
) {
i.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");
}
}
async progressBarProgress() {
if (this.progressBar && window.innerHeight > 1024) {
const progressBarLista = document.querySelectorAll("#progressBar ul li");
progressBarLista.forEach((li) => {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
this.circle1(li);
}
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"
) {
this.circle2(li);
}
else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
) {
this.circle3(li);
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
this.circle1(li);
}
else if (window.location.hash == "#/email" ||
window.location.hash == "#/profile" ||
window.location.hash == "#/shipping"){
this.circle2(li);
}
else if (window.location.hash == "#/payment"){
this.circle3(li);
}
})
});
}
;
}
}
;

22
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -1,10 +1,12 @@
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
.container { .container {
width: auto !important; width: auto !important;
#progressbar{
width: 446px; #progressBar {
width: 439px;
ul { ul {
list-style-type: none; list-style-type: none;
@ -40,6 +42,7 @@
} }
li { li {
width: 40%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -49,6 +52,7 @@
font-weight: 400; font-weight: 400;
line-height: 28px; line-height: 28px;
color: $color-liPonto; color: $color-liPonto;
@media (min-width: 2500) { @media (min-width: 2500) {
font-size: 24px; font-size: 24px;
@ -62,10 +66,12 @@
li #progress-bar-circle-1, li #progress-bar-circle-1,
li #progress-bar-circle-2, li #progress-bar-circle-2,
li #progress-bar-circle-3 { li #progress-bar-circle-3 {
width: 12px; width: 12px;
height: 12px; height: 12px;
border: 1px solide $color-liPonto; border: 1px solid $color-liPonto;
border-radius: 50%; border-radius: 50%;
@media (min-width: 2500) { @media (min-width: 2500) {
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -81,21 +87,22 @@
} }
li .progress-bar-line-1 { li .progress-bar-line-1 {
position: absolute; position: absolute;
left: 25%; left: 27%;
transform: translateY(-50%); transform: translateY(-50%);
bottom: 5px; bottom: 5px;
width: 100%; width: 96%;
height: 1px; height: 1px;
border-top: 1px solid $color-liPonto; border-top: 1px solid $color-liPonto;
} }
li .progress-bar-line-2 { li .progress-bar-line-2 {
position: absolute; position: absolute;
left: 21%; right: 22%;
transform: translateY(-50%); transform: translateY(-50%);
bottom: 5px; bottom: 5px;
width: 100%; width: 97%;
height: 1px; height: 1px;
border-top: 1px solid $color-liPonto; border-top: 1px solid $color-liPonto;
} }
@ -109,6 +116,7 @@
} }
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;