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() {
await this.selectors();
console.log(this.item);
this.progressBarHTML();
await this.progressBarProgress();
}
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.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
// 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
// });
}
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 {
font-family: $font-family;
&-content {
color: $color-black;
text-align: center;
font-family: $font-family;
&-content {
color: $color-black;
text-align: center;
@include mq(md, max) {
padding: 0 16px;
}
}
@include mq(md, max) {
padding: 0 16px;
}
}
&-title {
font-size: 20px;
}
&-title {
font-size: 20px;
}
&-links {
.link-choose-products {
background: $color-black;
border: none;
border-radius: 5px;
transition: ease-in 0.22s all;
outline: none;
font-family: $font-family;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-align: center;
letter-spacing: 0.05em;
color: $color-white;
text-transform: uppercase;
&-links {
.link-choose-products {
background: $color-black;
border: none;
border-radius: 5px;
transition: ease-in 0.22s all;
outline: none;
font-family: $font-family;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-align: center;
letter-spacing: 0.05em;
color: $color-white;
text-transform: uppercase;
&:hover {
background: lighten($color-black, 5);
}
}
}
&:hover {
background: lighten($color-black, 5);
}
}
}
}

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

@ -5,39 +5,147 @@
.container {
width: auto !important;
height: 65px;
@include mq(xl, min) {
height: 95px;
}
@include mq(2xl, min) {
height: 149.2px;
}
}
&__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 99.420289855072%;
margin: 0 16px;
@include mq(xl, min) {
margin: 0 131px;
}
@include mq(2xl, min) {
margin: 0 256px;
}
}
&__logo {
img {
height: 33px;
max-width: 155.58px;
@include mq(2xl, min) {
max-width: 382.7px;
height: 91.2px;
}
}
}
.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 {
display: flex;
align-items: center;
img {
width: 12px;
height: 13.33px;
margin-right: 8px;
@include mq(2xl, min) {
width: 29.47px;
height: 41.46px;
}
}
span {
align-items: center;
display: flex;
text-transform: uppercase;
font-family: $font-family;
font-style: normal;
@ -45,6 +153,11 @@
font-size: 12px;
line-height: 16px;
color: $color-black;
@include mq(2xl, min) {
font-size: 24px;
line-height: 33px;
}
}
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=Open+Sans:wght@300;400;500;600;700;800&display=swap");
$font-family: "Open Sans", sans-serif;
$font-family-secundary:"Tenor Sans", sans-serif;
$font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */
$color-black: #292929;
@ -21,18 +21,19 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1025px,
2xl: 2500px,
) !default;
$z-index: (
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25,
) !default;