forked from M3-Academy/m3-academy-template-checkout
estrutura-1280
This commit is contained in:
parent
ea7a3d32e8
commit
972c6293bd
@ -8,14 +8,235 @@ export default class Header {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
console.log(this.item);
|
||||
this.progressBarHTML();
|
||||
await this.progressBarProgress();
|
||||
}
|
||||
|
||||
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
|
||||
});
|
||||
// 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
|
||||
//});
|
||||
this.header = await waitElement(".headerCheckout");
|
||||
this.progressBar = await waitElement("#progressBar");
|
||||
}
|
||||
progressBarHTML() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
this.progressBar.innerHTML = `
|
||||
<div class="container-bar">
|
||||
<div class="progress-container">
|
||||
<div class="progress" id="progress"></div>
|
||||
<div class="circle active">
|
||||
<p>MeuCarrinho</p>
|
||||
</div>
|
||||
<div class="circle">
|
||||
<p>DadosPessoais</p>
|
||||
</div>
|
||||
<div class="circle">
|
||||
<p>Pagamento</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
if (this.progressBar && window.innerWidth <= 1024) {
|
||||
this.progressBar.innerHTML = ``;
|
||||
}
|
||||
}
|
||||
async progressBarProgress() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
const progressBarLista = document.querySelectorAll("#progressBar ul li");
|
||||
progressBarLista.forEach((li) => {
|
||||
if (window.location.href === "http://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"
|
||||
);
|
||||
}
|
||||
|
||||
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.href === "http://m3academy.myvtex.com/checkout/#/email" ||
|
||||
window.location.href == "http://m3academy.myvtex.com/checkout/#/profile" ||
|
||||
window.location.href === "http://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-3"
|
||||
].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 === "http://m3academy.myvtex.com/checkout/#/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")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].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", () => {
|
||||
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-3"
|
||||
].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") {
|
||||
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-3"
|
||||
].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,34 +1,94 @@
|
||||
/* _header.scss */
|
||||
.headerCheckout {
|
||||
width: 1280px;
|
||||
border-bottom: 1px solid $color-black;
|
||||
.container {
|
||||
width: auto !important;
|
||||
width: 1280px;
|
||||
}
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
margin-left: 131px;
|
||||
img {
|
||||
height: 52px;
|
||||
width: auto;
|
||||
height: 38px;
|
||||
width:156px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
max-width: 100%;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
|
||||
.progress-container::before{
|
||||
content: '';
|
||||
background-color: $color-black;
|
||||
position:absolute;
|
||||
top: 50%;
|
||||
/*left: 0;*/
|
||||
transform: translateY(-50%);
|
||||
height: 1px;
|
||||
width: 100.01%;
|
||||
z-index: -1;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
.progress{
|
||||
background-color: $color-black;
|
||||
position:absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
height: 4px;
|
||||
width: 0%;
|
||||
z-index: -1;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
p{
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.circle{
|
||||
background-color: #fff;
|
||||
color: #999;
|
||||
border-radius: 50%;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1.5px solid $color-black;
|
||||
transition: 0.4 ease;
|
||||
}
|
||||
|
||||
.circle.active{
|
||||
background-color: $color-black;
|
||||
|
||||
}
|
||||
|
||||
|
||||
&__safeBuy {
|
||||
display: flex;
|
||||
margin-right: 131px;
|
||||
gap: 5px;
|
||||
span {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
text-transform: uppercase;
|
||||
color: $color-black;
|
||||
font-weight: 400;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-gray;
|
||||
text-transform: uppercase;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user