From f48a1ab079e69f6700ecde2603dde970618ac84c Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Tue, 13 Dec 2022 23:11:34 -0300 Subject: [PATCH] feat: adiciona barra de progresso --- checkout/src/arquivos/js/components/Header.js | 55 +++++++++++++++ .../sass/checkout/_checkout-autenticacao.scss | 6 +- .../sass/checkout/_checkout-carrinho.scss | 22 +++--- .../sass/checkout/_checkout-vazio.scss | 2 +- .../src/arquivos/sass/partials/_header.scss | 69 +++++++++++++++++++ .../src/arquivos/sass/utils/_variaveis.scss | 2 +- 6 files changed, 140 insertions(+), 16 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..36de169 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -4,6 +4,8 @@ import { waitElement } from "m3-utils"; export default class Header { constructor() { this.init(); + this.progressBar(); + this.progressUpdate(); } async init() { @@ -18,4 +20,57 @@ export default class Header { interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); } + + progressBar() { + + const progress = document.querySelector(".progress-bar"); + + progress.innerHTML = ''; + + let progressBarHtml = ` +
+
+
+
Meu Carrinho
+
Dados Pessoais
+
Pagamento
+
+
`; + + $(".progress-bar").prepend(progressBarHtml); + } + + progressUpdate() { + this.caseUpdate(); + + window.addEventListener("hashchange", () => { + this.caseUpdate(); + }); + } + + caseUpdate() { + const myCart = document.querySelector(".progress__circle1"); + const personalData = document.querySelector(".progress__circle2"); + const payment = document.querySelector(".progress__circle3"); + + switch(location.hash) { + case "#/cart": + myCart.classList.add("active-bar"); + personalData.classList.remove("active-bar"); + break + + case "#/email": + case "#/profile": + case "#/shipping": + personalData.classList.add("active-bar"); + myCart.classList.remove("active-bar"); + payment.classList.remove("active-bar"); + break + + case "#/payment": + payment.classList.add("active-bar"); + myCart.classList.remove("active-bar"); + personalData.classList.remove("active-bar"); + }; + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 1773a6a..587df19 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -75,7 +75,7 @@ .emailInfo { padding: 16px; - background-color: $color-white; + background-color: $color-white-500; border: 1px solid $color-gray4; border-radius: 0; @@ -133,7 +133,7 @@ background-color: #303030; border-radius: 8px; border: none; - color: $color-white; + color: $color-white-500; display: flex; justify-content: center; padding: 6px 5px 6px 8px; @@ -217,7 +217,7 @@ border-radius: 0; label { - background-color: $color-white; + background-color: $color-white-500; box-shadow: none; color: #303030; padding: 8px 12px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 2419de9..dcf45b0 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -32,7 +32,7 @@ font-family: $font-family; width: 100%; h2 { - background: $color-white; + background: $color-white-500; border: none; color: #303030; font-size: 14px; @@ -70,7 +70,7 @@ .summary-template-holder { border-top: none; - background: $color-white; + background: $color-white-500; } #go-to-cart-button a { @@ -88,7 +88,7 @@ background: $color-black-100; border: none; border-radius: 0; - color: $color-white; + color: $color-white-500; outline: none; transition: all 0.2s linear; &:hover { @@ -102,7 +102,7 @@ } .lookatme { - background-color: $color-white; + background-color: $color-white-500; } .cart-items { @@ -233,7 +233,7 @@ } input { - background-color: $color-white; + background-color: $color-white-500; border: 1px solid $color-gray3; border-radius: 0; border-width: 0 1px; @@ -326,7 +326,7 @@ .item-unavailable-message { background-color: #d8c8ac; - color: $color-white; + color: $color-white-500; .icon-warning-sign { color: #bb4f4f; @@ -408,7 +408,7 @@ background-color: $color-black-100; border: none; border-radius: 5px; - color: $color-white; + color: $color-white-500; outline: none; width: 100%; @@ -432,7 +432,7 @@ margin: 0 0 34px; &__wrapper { - background-color: $color-white; + background-color: $color-white-500; border-radius: 100px; width: 100%; font-family: $font-family; @@ -488,7 +488,7 @@ background-color: $color-black-100; border: none; border-radius: 5px; - color: $color-white; + color: $color-white-500; font-size: 12px; height: 36px; letter-spacing: 1px; @@ -676,7 +676,7 @@ background: $color-black-100; border: none; border-radius: 5px; - color: $color-white; + color: $color-white-500; font-size: 12px; height: 36px; letter-spacing: 1px; @@ -800,7 +800,7 @@ font-weight: 500; font-size: 13px; letter-spacing: 0.05em; - color: $color-white; + color: $color-white-500; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 1aff756..f5158ca 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -27,7 +27,7 @@ line-height: 16px; text-align: center; letter-spacing: 0.05em; - color: $color-white; + color: $color-white-500; text-transform: uppercase; &:hover { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 509816e..4350a94 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -23,6 +23,75 @@ @include mq(md, max) { display: none; } + + .active { + background-color: $color-black-500; + } + + .progress__wrapper::before { + content: ""; + background: $color-black-500; + position: absolute; + top: 31px; + left: 14px; + height: 1px; + width: 83%; + z-index: -1; + transform: translateY(-50%); + } + + .progress__wrapper { + display: flex; + justify-content: space-between; + position: relative; + width: 439px; + + .progress__items { + position: relative; + } + + span { + display: block; + margin-bottom: 9px; + font-size: 12px; + line-height: 14px; + font-family: $font-family-secundary; + transform: translateX(-40%); + } + } + + .progress { + background: $color-black-500; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + height: 4px; + width: 0%; + z-index: -1; + transition: 0.4s ease; + } + + .progress__items { + position: relative; + + .progress__circle1, .progress__circle2, .progress__circle3 { + background: $color-white-500; + color: $color-black-500; + border-radius: 50%; + height: 12px; + width: 12px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid $color-black-500; + transition: .4s ease; + } + + .active-bar { + background: $color-black-500; + } + } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 5f7d7a9..a7acbb6 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -8,7 +8,7 @@ $font-family-secundary:"Tenor Sans", sans-serif; $color-black-100: #292929; $color-black-500: #000000; -$color-white: #fff; +$color-white-500: #fff; $color-gray: #6c6c6c; $color-gray2: #7d7d7d;