diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 6744524..106d65c 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -1,4 +1,3 @@
-// import waitForEl from "../helpers/waitForEl";
import { waitElement } from "m3-utils";
export default class Header {
@@ -8,14 +7,217 @@ export default class Header {
async init() {
await this.selectors();
- console.log(this.item);
+ this.body.onresize = await 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.header = await waitElement(".headerCheckout");
+ this.progressBar = await waitElement("#progressBar");
+ this.body = await waitElement("#checkoutMainContainer");
+ }
+ async progressBarHTML() {
+ if (this.progressBar && window.innerWidth > 1024) {
+ this.progressBar.innerHTML = `
+
+ `;
+ }
+ 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 === "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"
+ );
+ }
+ 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 === "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"
+ ) {
+ 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"]) {
+ 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-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") {
+ 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"]) {
+ 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");
+ }
+ }
+ });
+ });
+ }
}
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 5fb011f..f88d072 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -8,14 +8,20 @@ html {
min-height: 100%;
}
-footer .footerCheckout__wrapper {
+footer .footerCheckout__wrapper .container {
width: 94.9734%;
margin: auto auto 0 auto;
}
-footer .footerCheckout__prateleira,
header {
+ border-bottom: 1px solid #000;
+}
+footer .footerCheckout__prateleira,
+.headerCheckout .container {
width: 79.53125%;
margin: 0 auto;
+ @media (max-width: 1024px) {
+ width: auto;
+ }
}
body {
@@ -27,7 +33,11 @@ body {
@include mq(md, max) {
padding-left: 0;
}
-
+ .container {
+ @media (max-width: 490px) {
+ padding: 16px !important;
+ }
+ }
&.body-cart {
font-family: $font-family;
}
@@ -47,10 +57,10 @@ body {
padding-left: 0;
}
}
- .container-order-form,
- .container-cart {
- width: 80%;
- }
+ // .container-order-form,
+ // .container-cart {
+ // width: 80%;
+ // }
}
.btn-success {
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 8b44777..71b8338 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,7 +1,132 @@
/* _header.scss */
.headerCheckout {
.container {
- width: auto !important;
+ padding: 29px 0 29.86px;
+ @media (min-width: 2500px) {
+ padding: 29px 0;
+ }
+ @media (max-width: 1024px) {
+ padding: 16px 16px 16.88px;
+ }
+
+ #progressBar {
+ width: 439px;
+ font-size: 0;
+ @media (min-width: 2500px) {
+ width: 1078.86px;
+ }
+ @media (max-width: 1024px) {
+ display: none;
+ }
+ ul {
+ list-style-type: none;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin: 0 !important;
+ }
+ 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 .containerLi div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+ li {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 173px;
+ @media (min-width: 2500px) {
+ width: 444px;
+ }
+ p {
+ font-family: $font-family-secundary;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ color: #000000;
+ margin-bottom: 9px;
+ @media (min-width: 2500px) {
+ font-size: 24px;
+ line-height: 28px;
+ margin-bottom: 15px;
+ }
+ }
+ }
+ li.central {
+ width: auto;
+ }
+ li #progress-bar-circle-1 {
+ margin-right: 4px;
+ }
+ li #progress-bar-circle-3 {
+ margin-left: 4px;
+ @media (min-width: 2500px) {
+ margin-left: 0px;
+ }
+ }
+ 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%;
+ margin-bottom: 0;
+ @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%;
+ bottom: 5px;
+ width: 100%;
+ border-top: 1px solid #000;
+ margin: 0 !important;
+ line-height: 0;
+ @media (min-width: 2500px) {
+ left: 19%;
+ bottom: 11px;
+ }
+ }
+ li .progress-bar-line-2 {
+ position: absolute;
+ right: 21%;
+ bottom: 6px;
+ width: 100%;
+ border-top: 1px solid #000;
+ margin: 0 !important;
+ line-height: 0;
+ @media (min-width: 2500px) {
+ right: 18%;
+ bottom: 11px;
+ }
+ }
+ }
}
&__wrapper {
align-items: center;
@@ -10,27 +135,62 @@
}
&__logo {
- img {
- height: 52px;
- width: auto;
+ width: 15.28%;
+ @media (min-width: 2500px) {
+ width: 19.25%;
+ }
+ @media (max-width: 1024px) {
+ width: 155.58px;
+ min-width: 155.58px;
+ }
+ @media (max-width: 320px) {
+ min-width: 119px;
+ }
+ a {
+ width: 100%;
+ @media (max-width: 1024px) {
+ width: 155.58px;
+ min-width: 155.58px;
+ }
+ @media (max-width: 320px) {
+ min-width: 119px;
+ }
+ img {
+ height: auto;
+ width: 100%;
+ }
}
}
&__safeBuy {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 8px;
+ width: 11.69%;
+ min-width: 119px;
+ @media (min-width: 2500px) {
+ width: 11.83%;
+ min-width: 235.28px;
+ }
span {
- align-items: center;
- display: flex;
- text-transform: uppercase;
font-family: $font-family;
- font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-size: 12px;
- line-height: 14px;
- color: $color-gray;
+ line-height: 16px;
+ text-transform: uppercase;
+ color: #292929;
+ @media (min-width: 2500px) {
+ font-size: 24px;
+ line-height: 33px;
+ }
}
- i {
- margin-right: 8px;
+ img {
+ width: 10.08%;
+ @media (min-width: 2500px) {
+ width: 12.52%;
+ }
}
}
}