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

fix(scss): header funcional com o js e estilizado

Browse Source
This commit is contained in:
Ramon Dias Ferreira 2022-12-15 23:27:58 -03:00
parent 4a09a0fd48
commit b7c4698596
2 changed files with 219 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,17 +8,17 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.progressBar);
this.progressBarHTML(); this.progressBarHTML();
await this.barProgress(); await this.progressBarProgress();
} }
async selectors() { async selectors() {
this.header = await waitElement(".headerCheckout__wrapper", { this.header = await waitElement(".headerCheckout", {
//#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.progressBar = await waitElement("#progressBar", { this.progressBar = 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
@ -30,214 +30,167 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = ` this.progressBar.innerHTML = `
<ul> <ul>
<li>
<div class="containerLi"> <li>
<p class="progress-bar-text">Meu Carrinho</p>
<p id="progress-bar-circle-1" class="progress-bar-circle-1"> </p> <div class="containerLi">
<p class="progress-bar-text">Meu Carrinho</p>
<div class="bolinha" style="margin-left: 29px;">
<p id="progress-bar-circle-1" class="progress-bar-circle"></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> </li>
<li class="central">
<div class="containerLi">
<p class="progress-bar-text">Dados Pessoais</p>
<p id="progress-bar-circle-2" class="progress-bar-circle"></p>
</div>
</li>
<li>
<div class="containerLi">
<p class="progress-bar-text">Pagamento</p>
<div class="bolinha" style="margin-right: 22px;">
<p id="progress-bar-circle-3" class="progress-bar-circle"></p>
<p class="progress-bar-line-2"></p>
</div> </div>
</li>
<li> </div>
<div class="containerLi">
<p class="progress-bar-text">Pagamentos</p> </li>
<p id="progress-bar-circle-3" class="progress-bar-circle-3"> </p> </ul>
</div>
</li> `;
</ul>
`;
} }
if (this.progressBar && window.innerWidth <= 1024) { if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``; this.progressBar.innerHTML = ``;
} }
} }
async barProgress() { async progressBarProgress() {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
const barList = document.querySelectorAll(".progress-bar ul li"); const progressBarLista = document.querySelectorAll("#progressBar ul li");
barList.forEach((li) => { progressBarLista.forEach((li) => {
// console.log(li)
const liOne = li.children[0].children[1].children["progress-bar-circle-1"];
const liTwo = li.children[0].children["progress-bar-circle-2"];
const liThree = li.children[0].children[1].children["progress-bar-circle-3"];
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (li.children[0].children["progress-bar-circle-1"]) { if (liOne) {
li.children[0].children["progress-bar-circle-1"].classList.add("active"); liOne.classList.add("active");
} }
if (li.children[0].children["progress-bar-circle-2"]) {
if ( if (liTwo) {
li.children[0].children["progress-bar-circle-2"].classList.contains( if (liTwo.classList.contains("active")) {
"active" liTwo.classList.remove("active");
)
) {
li.children[0].children["progress-bar-circle-2"].classList.remove(
"active"
);
} }
} }
if (li.children[0].children["progress-bar-circle-3"]) { if (liThree) {
if ( if (liThree.classList.contains("active")) {
li.children[0].children["progress-bar-circle-3"].classList.contains( liThree.classList.remove("active");
"active"
)
) {
li.children[0].children["progress-bar-circle-3"].classList.remove(
"active"
);
} }
} }
} else if ( } else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/email" || 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/#/profile" ||
window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping" window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
) { ) {
if (li.children[0].children["progress-bar-circle-1"]) { if (liOne) {
if ( if (liOne.classList.contains("active")) {
li.children[0].children["progress-bar-circle-1"].classList.contains( liOne.classList.remove("active");
"active"
)
) {
li.children[0].children["progress-bar-circle-1"].classList.remove(
"active"
);
} }
} }
if (liTwo) {
if (li.children[0].children["progress-bar-circle-2"]) { liTwo.classList.add("active");
li.children[0].children["progress-bar-circle-2"].classList.add("active");
} }
if (li.children[0].children["progress-bar-circle-3"]) { if (liThree) {
if ( if (liThree.classList.contains("active")) {
li.children[0].children["progress-bar-circle-3"].classList.contains( liThree.classList.remove("active");
"active"
)
) {
li.children[0].children["progress-bar-circle-3"].classList.remove(
"active"
);
} }
} }
} else if ( } else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
) { ) {
if (li.children[0].children["progress-bar-circle-1"]) { if (liOne) {
if ( if (liOne.classList.contains("active")) {
li.children[0].children["progress-bar-circle-1"].classList.contains( liOne.classList.remove("active");
"active"
)
) {
li.children[0].children["progress-bar-circle-1"].classList.remove(
"active"
);
} }
} }
if (li.children[0].children["progress-bar-circle-2"]) {
if ( if (liTwo) {
li.children[0].children["progress-bar-circle-2"].classList.contains( if (liTwo.classList.contains("active")) {
"active" liTwo.classList.remove("active");
)
) {
li.children[0].children["progress-bar-circle-2"].classList.remove(
"active"
);
} }
} }
if (li.children[0].children["progress-bar-circle-3"]) {
li.children[0].children["progress-bar-circle-3"].classList.add("active"); if (liThree) {
liThree.classList.add("active");
} }
} }
window.addEventListener("hashchange", () => { window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") { if (window.location.hash == "#/cart") {
if (li.children[0].children["progress-bar-circle-1"]) { if (liOne) {
li.children[0].children["progress-bar-circle-1"].classList.add( liOne.classList.add("active");
"active"
);
} }
if (li.children[0].children["progress-bar-circle-2"]) { if (liTwo) {
if ( if (liTwo.classList.contains("active")) {
li.children[0].children["progress-bar-circle-2"].classList.contains( liTwo.classList.remove("active");
"active" }
)
) {
li.children[0].children["progress-bar-circle-2"].classList.remove(
"active"
);
} }
} if (liThree) {
if (li.children[0].children["progress-bar-circle-3"]) { if (liThree.classList.contains("active")) {
if ( liThree.classList.remove("active");
li.children[0].children["progress-bar-circle-3"].classList.contains( }
"active"
)
) {
li.children[0].children["progress-bar-circle-3"].classList.remove(
"active"
);
} }
}
} else if ( } else if (
window.location.hash == "#/email" || window.location.hash === "#/email" ||
window.location.hash == "#/profile" || window.location.hash === "#/profile" ||
window.location.hash == "#/shipping" window.location.hash === "#/shipping"
) { ) {
if (li.children[0].children["progress-bar-circle-1"]) { if (liOne) {
if ( if (liOne.classList.contains("active")) {
li.children[0].children["progress-bar-circle-1"].classList.contains( liOne.classList.remove("active");
"active"
)
) {
li.children[0].children["progress-bar-circle-1"].classList.remove(
"active"
);
} }
} }
if (liTwo) {
if (li.children[0].children["progress-bar-circle-2"]) { liTwo.classList.add("active");
li.children[0].children["progress-bar-circle-2"].classList.add( }
"active"
); if (liThree) {
if (liThree.classList.contains("active")) {
} liThree.classList.remove("active");
if (li.children[0].children["progress-bar-circle-3"]) { }
if (
li.children[0].children["progress-bar-circle-3"].classList.contains(
"active"
)
) {
li.children[0].children["progress-bar-circle-3"].classList.remove(
"active"
);
} }
}
} else if (window.location.hash == "#/payment") { } else if (window.location.hash == "#/payment") {
if (li.children[0].children["progress-bar-circle-1"]) { if (liOne) {
if ( if (liOne.classList.contains("active")) {
li.children[0].children["progress-bar-circle-1"].classList.contains( liOne.classList.remove("active");
"active"
)
) {
li.children[0].children["progress-bar-circle-1"].classList.remove(
"active"
);
} }
} }
if (li.children[0].children["progress-bar-circle-2"]) {
if ( if (liTwo) {
li.children[0].children["progress-bar-circle-2"].classList.contains( if (liTwo.classList.contains("active")) {
"active" liTwo.classList.remove("active");
)
) {
li.children[0].children["progress-bar-circle-2"].classList.remove(
"active"
);
} }
} }
if (li.children[0].children["progress-bar-circle-3"]) { if (liThree) {
li.children[0].children["progress-bar-circle-3"].classList.add( liThree.classList.add("active");
"active"
);
} }
} }
}); });

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

@ -2,7 +2,108 @@
.headerCheckout { .headerCheckout {
.container { .container {
width: auto !important; width: auto !important;
#progressBar {
width: 439px;
ul {
list-style-type: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
}
li .containerLi {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
position: relative;
}
li.central .containerLi {
align-items: center;
margin-left: 7px;
}
li:last-child .containerLi {
align-items: flex-end;
}
li .container div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Tenor Sans";
font-size: 12px;
font-weight: 400;
line-height: 28px;
color: #000000;
width: 39.9103%;
@media (min-width: 2500px) {
font-size: 24px;
}
}
li.central {
width: auto;
}
li #progress-bar-circle-1,
li #progress-bar-circle-2,
li #progress-bar-circle-3 {
width: 12px;
height: 12px;
border: 1px solid #000000;
border-radius: 50%;
@media (min-width: 2500px) {
width: 24px;
height: 24px;
}
}
li #progress-bar-circle-1.active,
li #progress-bar-circle-2.active,
li #progress-bar-circle-3.active {
border: none;
background-color: #000000;
}
li .progress-bar-line-1 {
position: absolute;
left: 25%;
transform: translateY(-50%);
bottom: 5px;
width: 100%;
height: 1px;
border-top: 1px solid #000000;
}
li .progress-bar-line-2 {
position: absolute;
right: 21%;
transform: translateY(-50%);
bottom: 5px;
width: 100%;
height: 1px;
border-top: 1px solid #000000;
}
}
.active {
background: #000000;
}
} }
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
@ -19,17 +120,18 @@
&__safeBuy { &__safeBuy {
span { span {
align-items: center; align-items: center;
display: flex;
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 15px;
color: $color-gray; color: $color-gray;
} }
i { img {
width: 12px;
margin-right: 8px; margin-right: 8px;
} }
} }