forked from M3-Academy/m3-academy-template-checkout
feat: made barra de progresso js
This commit is contained in:
parent
9eab0de458
commit
bc7b590b70
@ -8,14 +8,253 @@ export default class Header {
|
|||||||
|
|
||||||
async init() {
|
async init() {
|
||||||
await this.selectors();
|
await this.selectors();
|
||||||
console.log(this.item);
|
this.createProgressBar();
|
||||||
|
await this.progressBarProgress();
|
||||||
}
|
}
|
||||||
|
|
||||||
async selectors() {
|
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
|
//#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
|
||||||
});
|
});
|
||||||
|
this.header = await waitElement(".headerCheckout");
|
||||||
|
this.progressBar = await waitElement("#progressBar");
|
||||||
|
}
|
||||||
|
createProgressBar() {
|
||||||
|
if (this.progressBar && window.innerWidth > 1024) {
|
||||||
|
this.progressBar.innerHTML = `
|
||||||
|
<ul>
|
||||||
|
<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() {
|
||||||
|
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 (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||||
|
li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
|
||||||
|
"active"
|
||||||
|
);
|
||||||
|
console.log("ativou 1");
|
||||||
|
}
|
||||||
|
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")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-2"
|
||||||
|
].classList.remove("active");
|
||||||
|
console.log("removeu 2");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].classList.remove("active");
|
||||||
|
console.log("removeu 3");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} 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].children[0].children["progress-bar-circle-1"]) {
|
||||||
|
if (
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-1"
|
||||||
|
].classList.contains("active")
|
||||||
|
) {
|
||||||
|
li.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")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (
|
||||||
|
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
|
||||||
|
) {
|
||||||
|
console.log("vendo payment");
|
||||||
|
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")
|
||||||
|
) {
|
||||||
|
console.log("remove 1");
|
||||||
|
li.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")
|
||||||
|
) {
|
||||||
|
li.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"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener("hashchange", () => {
|
||||||
|
console.log("hashchange");
|
||||||
|
if (window.location.hash == "#/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");
|
||||||
|
}
|
||||||
|
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")
|
||||||
|
) {
|
||||||
|
li.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")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (
|
||||||
|
window.location.hash == "#/email" ||
|
||||||
|
window.location.hash == "#/profile" ||
|
||||||
|
window.location.hash == "#/shipping"
|
||||||
|
) {
|
||||||
|
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")
|
||||||
|
) {
|
||||||
|
li.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")
|
||||||
|
) {
|
||||||
|
li.children[0].children[0].children[
|
||||||
|
"progress-bar-circle-3"
|
||||||
|
].classList.remove("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (window.location.hash == "#/payment") {
|
||||||
|
console.log("vendo payment hash");
|
||||||
|
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")
|
||||||
|
) {
|
||||||
|
console.log("remove 1 hash");
|
||||||
|
li.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")
|
||||||
|
) {
|
||||||
|
li.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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,8 @@
|
|||||||
.empty-cart {
|
.empty-cart {
|
||||||
|
p {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
&-content {
|
&-content {
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
@ -16,22 +20,35 @@
|
|||||||
|
|
||||||
&-links {
|
&-links {
|
||||||
.link-choose-products {
|
.link-choose-products {
|
||||||
background: $color-black;
|
// background: red;
|
||||||
border: none;
|
// border: none;
|
||||||
border-radius: 5px;
|
// border-radius: 5px;
|
||||||
transition: ease-in 0.22s all;
|
// transition: ease-in 0.22s all;
|
||||||
outline: none;
|
// outline: none;
|
||||||
font-family: $font-family;
|
// font-family: $font-family;
|
||||||
font-style: normal;
|
// font-style: normal;
|
||||||
font-weight: 500;
|
// font-weight: 500;
|
||||||
font-size: 14px;
|
// font-size: 14px;
|
||||||
line-height: 16px;
|
// line-height: 16px;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
letter-spacing: 0.05em;
|
// letter-spacing: 0.05em;
|
||||||
color: $color-white;
|
// color: $color-white;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
color: transparent;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-family: "Tenor Sans";
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "Continuar comprando";
|
||||||
|
color: $white;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
color: transparent;
|
||||||
background: lighten($color-black, 5);
|
background: lighten($color-black, 5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,11 +15,6 @@ footer .footerCheckout__wrapper {
|
|||||||
border-top: 1px solid black;
|
border-top: 1px solid black;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: auto auto 0 auto;
|
margin: auto auto 0 auto;
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
padding: 16px 32px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
footer .footerCheckout__prateleira,
|
footer .footerCheckout__prateleira,
|
||||||
header {
|
header {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user