diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index a3034ed..8d34599 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -4,41 +4,159 @@ import { waitElement } from "m3-utils";
export default class Header {
constructor() {
this.init();
+ this.progressBarHTML();
}
async init() {
await this.selectors();
this.progressBarHTML();
+ await this.progressBarActive();
}
+
async selectors() {
this.header - await waitElement('.headerCheckout');
this.progressBar = await waitElement('#progressBar');
}
progressBarHTML () {
- if(window.screen.width > 1024) {
+ if(this.progressBar || window.screen.width > 1024) {
this.progressBar.innerHTML = `
-
Meu carrinho
-
+
-
Dados Pessoais
-
+
-
Pagamento
-
+
`;
}
- if (window.screen.width <= 1024) {
+ if (this.progressBar && window.screen.width <= 1024) {
this.progressBar.innerHTML = ``;
}
};
+
+ async progressBarActive () {
+ if (this.progressBar && window.screen.width > 1024) {
+ const progressBarLi = document.querySelectorAll('#progressBar ul li')
+ progressBarLi.forEach((li) => {
+ if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart") {
+ if(li.children['circle-1']) {
+ li.children['circle-1'].classList.add('active')
+ }
+
+ if(li.children['circle-2']) {
+ if(li.children['circle-2'].classList.contains('active')) {
+ li.children['circle-2'].classList.remove('active')
+ }
+ }
+ if(li.children['circle-3']) {
+ if (li.children['circle-3'].classList.contains('active')) {
+ li.children['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['circle-1']) {
+ if(li.children['circle-1'].classList.contains('active')) {
+ li.children['circle-1'].classList.remove('active')
+ }
+ };
+
+ if(li.children['circle-2']) {
+ li.children['circle-1'].classList.add('active')
+ };
+
+ if(li.children['circle-3']) {
+ if(li.children['circle-3'].classList.contains('active')) {
+ li.children['circle-1'].classList.remove('active')
+ };
+ }
+ }
+
+ else if (window.location.href == "https://m3academy.myvtex.com/checkout/#/payment") {
+
+ if(li.children['circle-1']) {
+ if(li.children['circle-1'].classList.contains('active')) {
+ li.children['circle-1'].classList.remove('active')
+ }
+ }
+
+ if(li.children['circle-2']) {
+ if(li.children['circle-2'].classList.contains('active')) {
+ li.children['circle-2'].classList.remove('active')
+ }
+ }
+
+ if(li.children['circle-3']) {
+ li.children['circle-3'].classList.add('active')
+ }
+
+ }
+
+ window.addEventListener('hashchange', () => {
+ if(window.location.hash == '#/cart') {
+ if(li.children['circle-1']) {
+ li.children['circle-1'].classList.add('active')
+ }
+ if(li.children['circle-2']) {
+ if (li.children['circle-2'].classList.contains('active')) {
+ li.children['circle-2'].classList.remove('active')
+ }
+ }
+ if(li.children['circle-3']) {
+ if(li.children['circle-3'].classList.contains('active')) {
+ li.children['circle-3'].classList.remove('active')
+ }
+ }
+ }
+
+ else if(window.location.hash == '#/email' || window.location.hash == '#/profile' || window.location.hash == '#/shipping') {
+ if(li.children['circle-1']) {
+ if(li.children['circle-1'].classList.contains('active')) {
+ li.children['circle-1'].classList.remove('active')
+ }
+ }
+ if(li.children['circle-2']){
+ li.children['circle-2'].classList.add('active')
+ }
+ if(li.children['circle-3']) {
+ if(li.children['circle-3'].classList.contains('active')) {
+ li.children['circle-3'].classList.remove('active')
+ }
+ }
+ }
+ else if(window.location.hash == '#/payment') {
+ if(li.children['circle-1']) {
+ if(li.children['circle-1'].classList.contains('active')) {
+ li.children['circle-1'].classList.remove('active')
+ }
+ }
+ if(li.children['circle-2']) {
+ if(li.children['circle-2'].classList.contains('active')){
+ li.children['circle-2'].classList.remove('active')
+ }
+ }
+ if(li.children['circle-3']) {
+ li.children['circle-3'].classList.add('active')
+ }
+ }
+ })
+
+ });
+ }
+ }
+
};