diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 0aa014c..d2c92e2 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -4,31 +4,131 @@ import { waitElement } from "m3-utils";
export default class Header {
constructor() {
this.init();
- this.ProgresseBar.bind(this);
}
async init() {
await this.selectors();
- this.ProgresseBar();
+ this.ProgresseBarHTML();
+ this.progresseBarUrl();
}
async selectors() {
this.barHTML = await waitElement(".progress-bar");
}
- ProgresseBar() {
- this.barHTML.innerHTML = `
-
- `;
- }
-}
+ ProgresseBarHTML() {
+ if(window.innerWidth > 1024) {
+ this.barHTML.innerHTML = `
+
+ `;
+ } else{
+ this.barHTML.innerHTML = ``;
+ };
+ };
+
+ progresseBarUrl() {
+ this.Circle1 = document.getElementById("cartCircle1");
+ this.Circle2 = document.getElementById("cartCircle2");
+ this.Circle3 = document.getElementById("cartCircle3");
+
+ window.addEventListener("load", () => {
+ if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/cart' && localStorage.getItem('cart') === '1')
+ {
+ this.Circle1.classList.add('activeCircle');
+ this.Circle2.classList.remove("activeCircle")
+ this.Circle3.classList.remove("activeCircle")
+ console.log('1')
+ }
+ else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/email' && localStorage.getItem('profile') === '2'
+ || window.location.href === 'https://m3academy.myvtex.com/checkout/#/profile' && localStorage.getItem('profile') === '2'
+ || window.location.href === 'https://m3academy.myvtex.com/checkout/#/shipping' && localStorage.getItem('profile') === '2')
+ {
+ this.Circle1.classList.remove("activeCircle")
+ this.Circle2.classList.add("activeCircle");
+ this.Circle3.classList.remove("activeCircle")
+ console.log('2')
+ } else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/payment' && localStorage.getItem('payment') === '3'){
+ this.Circle1.classList.remove("activeCircle")
+ this.Circle2.classList.remove("activeCircle")
+ this.Circle3.classList.add("activeCircle");
+ console.log('3')
+ }
+ })
+
+
+ window.addEventListener("hashchange", (props) => {
+ const currentState = props.currentTarget.location.hash.split('/');
+
+ switch(currentState[1]) {
+ case 'cart':
+ this.Circle1.classList.add("activeCircle");
+ this.Circle2.classList.remove("activeCircle")
+ this.Circle3.classList.remove("activeCircle")
+ localStorage.setItem('cart', 1);
+ break;
+ case 'email':
+ case 'profile':
+ case 'shipping':
+ this.Circle1.classList.remove("activeCircle")
+ this.Circle2.classList.add("activeCircle");
+ this.Circle3.classList.remove("activeCircle")
+ localStorage.setItem('profile', 2);
+ break;
+ case 'payment':
+ this.Circle1.classList.remove("activeCircle")
+ this.Circle2.classList.remove("activeCircle")
+ this.Circle3.classList.add("activeCircle");
+ localStorage.setItem('payment', 3);
+ break;
+ };
+ });
+ };
+ /*progresseBarload(){
+ window.addEventListener('load', () => {
+ if(localStorage.getItem('cart') === '1' && this.currentState[1] === 'cart'){
+ Circle1.classList.add('activeCircle');
+ console.log('test 1')
+ }
+ switch(localStorage.getItem('cart') || localStorage.getItem('profile') || localStorage.getItem('payment')) {
+ case '1' :
+ document.getElementById('cartCircle1').classList.add('activeCircle');
+ console.log('test 1')
+ break;
+ case '2' :
+ document.getElementById('cartCircle2').classList.add('activeCircle');
+ console.log('test 2')
+ break;
+ case '3':
+ document.getElementById('cartCircle3').classList.add('activeCircle');
+ break;
+ }
+ });
+ }*/
+};
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 6f6953b..3696aac 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,23 +1,100 @@
/* _header.scss */
.headerCheckout {
border-bottom: 1px solid #000;
- .container {
- width: auto !important;
- }
+
+
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
- margin: 29px 0;
+ padding: 29px 0;
+
+ .progress-bar{
+ width: 43.1237721021611%;
+ height: 35px;
+
+ .conteir-ul{
+ display: flex;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+
+ .conteiner-progressBar{
+ display: flex;
+ width: 39.41%;
+ height: 100%;
+ align-items: center;
+
+ .conteinerRelative {
+ display: flex;
+ position: relative;
+ width: 100%;
+
+ .conteinerItems {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .textBar{
+ font-family: 'Tenor Sans';
+ font-size: 12px;
+ line-height: 14px;
+ margin-bottom: 9px;
+ };
+ .circle{
+ width: 12px;
+ height: 12px;
+ border: 1px solid black;
+ border-radius: 50%;
+
+ };
+ .activeCircle {
+ width: 12px;
+ height: 12px;
+ // border: 1px solid black;
+ background-color: black;
+ border-radius: 50%;
+ };
+ .bar{
+ position: absolute;
+ width: 100%;
+ border-top: 1px solid black;
+ margin-bottom: 8px;
+ left: 25%;
+ bottom: -7%;
+ };
+ .barLast{
+ left: -22%;
+ }
+ };
+
+ .conteinerItems-last{
+ align-content: flex-end
+ }
+ };
+ .conteiner-Relative-last{
+ justify-content: flex-end;
+ }
+ };
+
+ .conteiner-progressBar-center{
+ width: auto;
+ margin-left: 3.49px
+ }
+ };
+ };
+
};
&__logo {
img {
height: 37.14px;
- }
- }
+ };
+ };
&__safeBuy {
+ display: flex;
+
span {
align-items: center;
display: flex;
@@ -26,13 +103,18 @@
font-style: normal;
font-weight: normal;
font-size: 12px;
- line-height: 14px;
+ line-height: 16.34px;
color: $color-gray;
- }
+ };
i {
margin-right: 8px;
- }
- }
+ };
-}
+ img {
+ width: 12px;
+ height: 15px;
+ margin-right: 8px;
+ };
+ };
+};