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 {