forked from M3-Academy/m3-academy-template-checkout
feature/header #1
10970
checkout/package-lock.json
generated
10970
checkout/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -8,14 +8,148 @@ export default class Header {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
console.log(this.item);
|
||||
this.events();
|
||||
this.criaProgressBar();
|
||||
await this.alteraProgressBar();
|
||||
}
|
||||
|
||||
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.headerCheckout = await waitElement(".headerCheckout");
|
||||
this.progressBar = await waitElement("#progressBar");
|
||||
}
|
||||
|
||||
events() {
|
||||
window.addEventListener("resize", this.criaProgressBar.bind(this));
|
||||
}
|
||||
|
||||
criaProgressBar() {
|
||||
if (window.innerWidth > 1024) {
|
||||
if (this.progressBar) {
|
||||
this.progressBar.innerHTML = `
|
||||
<ul class="progress-bar__ul">
|
||||
<li class="progress-bar__li">
|
||||
<div class="progress-bar__container">
|
||||
<div class="progress-bar__content">
|
||||
<p class="progress-bar__title">Meu Carrinho</p>
|
||||
<p id="progress-bar__circle-1"></p>
|
||||
<p class="progress-bar__line-1"></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="progress-bar__li progress-bar__central">
|
||||
<div class="progress-bar__container">
|
||||
<div class="progress-bar__content">
|
||||
<p class="progress-bar__title">Dados Pessoais</p>
|
||||
<p id="progress-bar__circle-2"></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="progress-bar__li">
|
||||
<div class="progress-bar__container">
|
||||
<div class="progress-bar__content">
|
||||
<p class="progress-bar__title">Pagamento</p>
|
||||
<p id="progress-bar__circle-3"></p>
|
||||
<p class="progress-bar__line-2"></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
this.progressBar.innerHTML = "";
|
||||
}
|
||||
|
||||
this.alteraProgressBar();
|
||||
}
|
||||
|
||||
ativaPrimeiroCirculo(el) {
|
||||
if (el.children["progress-bar__circle-1"]) {
|
||||
el.children["progress-bar__circle-1"].classList.add("active");
|
||||
}
|
||||
|
||||
if (el.children["progress-bar__circle-2"]) {
|
||||
if (el.children["progress-bar__circle-2"].classList.contains("active")) {
|
||||
el.children["progress-bar__circle-2"].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (el.children["progress-bar__circle-3"]) {
|
||||
if (el.children["progress-bar__circle-3"].classList.contains("active")) {
|
||||
el.children["progress-bar__circle-3"].classList.remove("active");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ativaSegundoCirculo(el) {
|
||||
if (el.children["progress-bar__circle-1"]) {
|
||||
if (el.children["progress-bar__circle-1"].classList.contains("active")) {
|
||||
el.children["progress-bar__circle-1"].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (el.children["progress-bar__circle-2"]) {
|
||||
el.children["progress-bar__circle-2"].classList.add("active");
|
||||
}
|
||||
|
||||
if (el.children["progress-bar__circle-3"]) {
|
||||
if (el.children["progress-bar__circle-3"].classList.contains("active")) {
|
||||
el.children["progress-bar__circle-3"].classList.remove("active");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ativaTerceiroCirculo(el) {
|
||||
if (el.children["progress-bar__circle-1"]) {
|
||||
if (el.children["progress-bar__circle-1"].classList.contains("active")) {
|
||||
el.children["progress-bar__circle-1"].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (el.children["progress-bar__circle-2"]) {
|
||||
if (el.children["progress-bar__circle-2"].classList.contains("active")) {
|
||||
el.children["progress-bar__circle-2"].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (el.children["progress-bar__circle-3"]) {
|
||||
el.children["progress-bar__circle-3"].classList.add("active");
|
||||
}
|
||||
}
|
||||
|
||||
async alteraProgressBar() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
const progressBarContent = document.querySelectorAll(".progress-bar__content");
|
||||
|
||||
progressBarContent.forEach((el) => {
|
||||
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
|
||||
this.ativaPrimeiroCirculo(el);
|
||||
} 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"
|
||||
) {
|
||||
this.ativaSegundoCirculo(el);
|
||||
} else if (
|
||||
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
|
||||
) {
|
||||
this.ativaTerceiroCirculo(el);
|
||||
}
|
||||
|
||||
window.addEventListener("hashchange", () => {
|
||||
if (window.location.hash == "#/cart") {
|
||||
this.ativaPrimeiroCirculo(el);
|
||||
} else if (
|
||||
window.location.hash == "#/email" ||
|
||||
window.location.hash == "#/profile" ||
|
||||
window.location.hash == "#/shipping"
|
||||
) {
|
||||
this.ativaSegundoCirculo(el);
|
||||
} else if (window.location.hash == "#/payment") {
|
||||
this.ativaTerceiroCirculo(el);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@import "./utils/all";
|
||||
@import "./lib/slick";
|
||||
@import "./partials/header";
|
||||
@import "./partials/progressBar";
|
||||
@import "./partials/footer";
|
||||
@import "./checkout/checkout.scss";
|
||||
|
||||
@ -1,8 +1,25 @@
|
||||
/* _header.scss */
|
||||
.headerCheckout {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $black-500;
|
||||
|
||||
.container {
|
||||
width: auto !important;
|
||||
box-sizing: border-box;
|
||||
width: 79.53125% !important;
|
||||
margin: 29px auto 29.86px auto;
|
||||
|
||||
@include mq(tablet, max) {
|
||||
width: 100% !important;
|
||||
padding: 16px !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include mq(desktop4K, min) {
|
||||
margin: 29px auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@ -10,27 +27,80 @@
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 15.2829%;
|
||||
|
||||
|
||||
@include mq(tablet, max) {
|
||||
min-width: 119px;
|
||||
width: 15.6834%;
|
||||
}
|
||||
|
||||
@include mq(celular, max) {
|
||||
width: 45.3586%;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
@include mq(desktop4K, min) {
|
||||
width: 19.2161%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 52px;
|
||||
width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__safeBuy {
|
||||
span {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
text-transform: uppercase;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-gray;
|
||||
width: 11.6896%;
|
||||
min-width: 119px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
|
||||
@include mq(tablet, max) {
|
||||
width: 11.996%;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
@include mq(celular, max) {
|
||||
width: 34.69387%;
|
||||
min-width: auto;
|
||||
|
||||
}
|
||||
|
||||
@include mq(desktop4K, min) {
|
||||
width: 11.834%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 10.09%;
|
||||
|
||||
height: auto;
|
||||
|
||||
@include mq(tablet, max) {
|
||||
width: 10.085%;
|
||||
}
|
||||
|
||||
@include mq(desktop4K, min) {
|
||||
width: 12.5255%;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 8px;
|
||||
|
||||
font-family: "Open Sans";
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $black-300;
|
||||
|
||||
@include mq(desktop4K, min) {
|
||||
margin-left: 7.9px;
|
||||
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
126
checkout/src/arquivos/sass/partials/_progressBar.scss
Normal file
126
checkout/src/arquivos/sass/partials/_progressBar.scss
Normal file
@ -0,0 +1,126 @@
|
||||
.progress-bar {
|
||||
width: 439px;
|
||||
|
||||
@include mq(tablet, max) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include mq(desktop4K, min) {
|
||||
width: 1078.86px;
|
||||
}
|
||||
|
||||
&__ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__li {
|
||||
width: 39.75%;
|
||||
|
||||
@include mq(desktop4K, min) {
|
||||
width: 41.7042%;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.progress-bar__container {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.progress-bar__container {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__central {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__container {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: "Tenor Sans";
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
margin-bottom: 9px;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(desktop4K, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
#progress-bar__circle-1,
|
||||
#progress-bar__circle-2,
|
||||
#progress-bar__circle-3 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 50%;
|
||||
|
||||
@include mq(desktop4K, min) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $black-500;
|
||||
}
|
||||
}
|
||||
|
||||
&__line-1,
|
||||
&__line-2 {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
height: 1px;
|
||||
border-top: 1px solid $black-500;
|
||||
|
||||
@include mq(desktop4K, min) {
|
||||
bottom: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
&__line-1 {
|
||||
left: 27%;
|
||||
width: 95%;
|
||||
|
||||
@include mq(desktop4K, min) {
|
||||
left: 21%;
|
||||
width: 96%;
|
||||
}
|
||||
}
|
||||
|
||||
&__line-2 {
|
||||
right: 22%;
|
||||
width: 100%;
|
||||
|
||||
@include mq(desktop4K, min) {
|
||||
right: 17%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -19,6 +19,10 @@ $color-blue: #4267b2;
|
||||
|
||||
$color-green: #4caf50;
|
||||
|
||||
/*CORES*/
|
||||
$black-500: #000;
|
||||
$black-300: #292929;
|
||||
|
||||
/* Grid breakpoints */
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
@ -26,7 +30,10 @@ $grid-breakpoints: (
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
xl: 1200px,
|
||||
celular: 600px,
|
||||
tablet: 1025px,
|
||||
desktop4K: 2500px
|
||||
) !default;
|
||||
|
||||
$z-index: (
|
||||
|
||||
@ -1,20 +1,27 @@
|
||||
<!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente,
|
||||
MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
|
||||
|
||||
<header class="headerCheckout">
|
||||
<div class="container">
|
||||
<div class="headerCheckout__wrapper">
|
||||
<div class="headerCheckout__logo">
|
||||
<a href="/">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
|
||||
</a>
|
||||
</div>
|
||||
<div id="progressBar" class="progress-bar"> Aqui entra a barra de progresso
|
||||
</div>
|
||||
<div class="headerCheckout__safeBuy">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
|
||||
<span>Compra segura</span>
|
||||
</div>
|
||||
<header class="headerCheckout">
|
||||
<div class="container">
|
||||
<div class="headerCheckout__wrapper">
|
||||
<div class="headerCheckout__logo">
|
||||
<a href="/">
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
|
||||
alt="M3 Academy"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div id="progressBar" class="progress-bar">
|
||||
|
||||
</div>
|
||||
<div class="headerCheckout__safeBuy">
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
|
||||
alt="Cadeado"
|
||||
/>
|
||||
<span>Compra segura</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user