naianfelix/m3-academy-template-checkout-naian-felix
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Desafio 4 M3 Academy #1

Merged
naianfelix merged 11 commits from develop into main 2022-12-19 08:58:14 +00:00
Conversation 0 Commits 11 Files Changed 13 +206 -54
4 changed files with 206 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 41e30aa61f - Show all commits

50
checkout/src/arquivos/js/components/Header.js
View File

@ -8,14 +8,52 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); this.progressBarHTML();
await this.progressBarProgress();
} }
async selectors() { async selectors() {
this.item = await waitElement("#my-element", { this.header = await waitElement(".headerCheckout");
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar this.progressBar = await waitElement("#progressBar");
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise // this.item = await waitElement("#my-element", {
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe // //#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
// });
} }
progressBarHTML() {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<ul class="list" style="list-style: none;">
<li class="laterais" ><div class="container-li"><div><p class="progress-bar-text">Meu Carrinho</p><p id="progress-bar-circle-1" class="progress-bar-circle-1"></p><p class="progress-bar-line-1"></p></div></li>
<li class="central" ><div class="container-li-central"><div><p class="progress-bar-text">Dados Pessoais</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div></li>
<li class="laterais" ><div class="container-li"><div><p class="progress-bar-text">Pagamentos</p><p id="progress-bar-circle-3" class="progress-bar-circle-3"></p><p class="progress-bar-line-2"></p></div></li>
</ul>
`;
}
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``;
}
}
// async progressBarProgress() {
// if (this.progressBar && window.innerWidth > 1024) {
// const progressBarList = document.querySelectorAll("#progressBar ul li");
// progressBarList.forEach((li) => {
// if (window.location.href === "htts://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"]
// )
// }
// }
// });
// }
// }
} }

64
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -1,38 +1,38 @@
.empty-cart { .empty-cart {
font-family: $font-family; font-family: $font-family;
&-content { &-content {
color: $color-black; color: $color-black;
text-align: center; text-align: center;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
} }
} }
&-title { &-title {
font-size: 20px; font-size: 20px;
} }
&-links { &-links {
.link-choose-products { .link-choose-products {
background: $color-black; background: $color-black;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
outline: none; outline: none;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-white; color: $color-white;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-black, 5);
} }
} }
} }
} }

121
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -5,39 +5,147 @@
.container { .container {
width: auto !important; width: auto !important;
height: 65px; height: 65px;
@include mq(xl, min) {
height: 95px;
}
@include mq(2xl, min) {
height: 149.2px;
}
} }
&__wrapper { &__wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 100%; height: 100%;
max-width: 99.420289855072%;
margin: 0 16px; margin: 0 16px;
@include mq(xl, min) {
margin: 0 131px;
}
@include mq(2xl, min) {
margin: 0 256px;
}
} }
&__logo { &__logo {
img { img {
height: 33px; height: 33px;
max-width: 155.58px; max-width: 155.58px;
@include mq(2xl, min) {
max-width: 382.7px;
height: 91.2px;
}
} }
} }
.progress-bar { .progress-bar {
display: none; width: 67%;
@include mq(xl, max) {
width: 0;
}
.list {
display: flex;
justify-content: center;
.central {
width: 33%;
}
.laterais {
position: relative;
width: 33%;
display: flex;
justify-content: center;
}
.progress-bar-circle-1,
.progress-bar-circle-2,
.progress-bar-circle-3 {
margin: 0 auto;
align-items: center;
border: 1px solid $color-black;
border-radius: 50%;
height: 12px;
width: 12px;
&.active {
background: $color-black;
}
@include mq(2xl, min) {
width: 24px;
height: 24px;
}
}
.progress-bar-line-1,
.progress-bar-line-2 {
margin: 0;
border: 1px solid $color-black;
width: 100%;
transform: translateY(-50%);
bottom: 5px;
position: absolute;
max-width: calc(100% - 14px);
@include mq(2xl, min) {
max-width: calc(100% - 26px);
bottom: 10px;
}
}
.progress-bar-line-1 {
left: calc(50% + 6px);
@include mq(2xl, min) {
left: calc(50% + 12px);
}
}
.progress-bar-line-2 {
right: calc(50% + 6px);
@include mq(2xl, min) {
right: calc(50% + 12px);
}
}
}
}
.progress-bar-text {
display: flex;
align-items: center;
justify-content: center;
font-family: $font-family-secundary;
font-size: 12px;
line-height: 14px;
color: $color-black;
margin-top: 0;
margin-bottom: 9px;
@include mq(2xl, min) {
font-size: 24px;
line-height: 28px;
}
} }
&__safeBuy { &__safeBuy {
display: flex; display: flex;
align-items: center;
img { img {
width: 12px; width: 12px;
height: 13.33px; height: 13.33px;
margin-right: 8px; margin-right: 8px;
@include mq(2xl, min) {
width: 29.47px;
height: 41.46px;
}
} }
span { span {
align-items: center;
display: flex;
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -45,6 +153,11 @@
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
@include mq(2xl, min) {
font-size: 24px;
line-height: 33px;
}
} }
i { i {

25
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -2,7 +2,7 @@
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
$font-family: "Open Sans", sans-serif; $font-family: "Open Sans", sans-serif;
$font-family-secundary:"Tenor Sans", sans-serif; $font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */ /* Colors */
$color-black: #292929; $color-black: #292929;
@ -21,18 +21,19 @@ $color-green: #4caf50;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
cstm: 400, cstm: 400,
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 992px,
xl: 1200px xl: 1025px,
2xl: 2500px,
) !default; ) !default;
$z-index: ( $z-index: (
level1: 5, level1: 5,
level2: 10, level2: 10,
level3: 15, level3: 15,
level4: 20, level4: 20,
level5: 25 level5: 25,
) !default; ) !default;