diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ebf385f..6941a60 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,8 +7,8 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); this.footer(); + // this.onUpdate(); } async selectors() { @@ -32,8 +32,9 @@ export default class Footer { observer.observe(target, config); } + async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".container-carousel-item"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index ca11fdf..432eab3 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -1,19 +1,116 @@ // import waitForEl from "../helpers/waitForEl"; import { waitElement } from "m3-utils"; -export default class Header { - constructor() { - this.init(); + export default class Header { + constructor() { + this.init(); + } + + async init() { + await this.selectors(); + this.progressBarHtml(); + await this.progressBarEvolution(); + } + + async selectors() { + this.header = await waitElement(".headerCheckout"); + this.progressBar = await waitElement("#progressBar"); + } + + + + progressBarHtml() { + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` + + `; + } + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ``; + } } - async init() { - await this.selectors(); - this.progressBarHtml(); - await this.progressBarEvolution(); + async progressBarEvolution() { + if (this.progressBar && window.innerWidth > 1024) { + const progressLista = document.querySelectorAll("progressBar ul li"); + progressLista.forEach((li) => { + if (window.location.href === "https://m3academy.myvtex.com.br/checkout/#/cart") { + this.trataPonto(li, 1); + } else if ( + window.location.href === "https://m3academy.myvtex.com.br/checkout/#/email" || + window.location.href == "https://m3academy.myvtex.com.br/checkout/#/profile" || + window.location.href == "https://m3academy.myvtex.com.br/checkout/#/shipping" + ) { + this.trataPonto(li, 2); + } else if ( + window.location.href === "https://m3academy.myvtex.com.br/checkout/#/payment" + ) { + this.trataPonto(li, 3); + } + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + this.trataPonto(li, 1); + } else if ( + window.location.href === "#/email" || + window.location.href == "#/profile" || + window.location.href == "#/shipping" + ) { + this.trataPonto(li, 2); + } else if (window.location.hash == "#payment") { + this.trataPonto(li, 3); + } + }); + }); + } } - async selectors() { - this.header = await waitElement(".headerCheckout"); - this.progressBar = await waitElement("#progressBar"); + + + + marcarPonto(li, local) { + if (li.children[0].children[0].children["progress-bar-circle-" + local]) { + li.children[0].children[0].children["progress-bar-circle-" + local].classList.add( + "active" + ); + } } + + + + removerPonto(li, local) { + if (li.children[0].children[0].children["progress-bar-circle-" + local]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-" + local + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-" + local + ].classList.remove("active") + } + } + } + + + trataPonto(li, local) { + const indice = [1, 2, 3]; + let indicesPontoBranco = indice.splice(local - 1, 1); + this.marcarPonto(li, local); + for (const i of indice) { + this.removerPonto(li, i); + } + } + } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 9139698..18a663e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -6,12 +6,36 @@ .cart-template { font-family: $font-family; + @include mq(md, max) { padding: 0 0; } .item-unit-label { display: none; } + + .empty-cart-content { + p { + display: none; + } + } + + .empty-cart-links { + align-items: center; + // display: flex; + text-align: center; + a { + font-size:0; + height: 16px; + + &::after { + content: "CONTINUAR COMPRANDO"; + font-size: 14px; + text-transform: uppercase; + } + } + } + .cart { border: 3px solid $color-gray3; box-sizing: border-box; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 6e57192..59380f6 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -10,13 +10,18 @@ .footerCheckout { - border-top: 1px solid $color-black; - color: $color-gray2; + // border-top: 1px solid $color-black; + // color: $color-gray2; &__wrapper { align-items: center; + border-top: 1px solid $color-black; + color: $color-gray2; display: flex; justify-content: space-between; + position: absolute; + left: 0; + bottom: 0; } &__address {