cainamilech/m3-academy-template-checkout-caina-milech
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/header #1

Merged
cainamilech merged 3 commits from feature/header into develop 2022-12-11 02:20:43 +00:00
Conversation 0 Commits 3 Files Changed 4 +273 -4
4 changed files with 273 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@ export default class Header {
<div class="containerLi div-1">
<div>
<p class="progress-bar-text">Meu Carrinho</p>
<p id="progress-bar-circle-1" class="progress-bar-circle-1 active"></p>
<p id="progress-bar-circle-1" class="progress-bar-circle-1"></p>
<p class="progress-bar-line-left"></p>
</div>
</div>
@ -61,4 +61,208 @@ export default class Header {
this.progressBar.innerHTML = ``;
}
}
async progressBarProgress() {
if (this.progressBar && window.innerWidth > 1024) {
const progressBarLista = document.querySelectorAll("#progressBar ul li");
progressBarLista.forEach((li) => {
if (window.location.href === "https://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"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-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[0].children[0].children["progress-bar-circle-1"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
"active"
);
}
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.remove("active");
}
}
} else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
) {
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
"active"
);
}
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/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"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.remove("active");
}
}
} else if (
window.location.hash == "#/email" ||
window.location.hash == "#/profile" ||
window.location.hash == "#/shipping"
) {
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.add("active");
}
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.remove("active");
}
}
} else if (window.location.hash == "#/payment") {
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-1"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
li.children[0].children[0].children[
"progress-bar-circle-3"
].classList.add("active");
}
}
});
});
}
}
}

10
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -14,8 +14,14 @@ footer .footerCheckout__wrapper {
}
footer .footerCheckout__prateleira,
header {
width: 79.53125%;
margin: 0 auto;
@include mq(tablet, min) {
width: 79.53125%;
margin: 0 auto;
}
@include mq(tablet, max) {
margin: 0 16px;
}
}
body {

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

@ -13,6 +13,15 @@
width: 15.2829%;
margin: 29px 0;
@include mq(xxl, min) {
width: 19.2161%;
}
@include mq(tablet, max) {
width: 155.58px;
margin: 16px 0;
}
img {
width: 100%;
}
@ -25,6 +34,17 @@
width: 12px;
height: 15px;
margin-right: 8px;
@include mq(xxl, min) {
width: 29.47px;
height: 41.46px;
margin-right: 7.9px;
}
@include mq(tablet, max) {
width: 12px;
height: 13.33px;
}
}
span {
align-items: center;
@ -36,6 +56,11 @@
font-size: 12px;
line-height: 16px;
color: $color-black;
@include mq(xxl, min) {
font-size: 24px;
line-height: 33px;
}
}
i {
@ -46,8 +71,15 @@
.progress-bar {
width: 446px;
@include mq(xxl, min) {
width: 1078.86px;
}
@include mq(tablet, max) {
display: none;
}
ul {
border: 1px solid red;
list-style: none;
display: flex;
align-items: center;
@ -82,6 +114,12 @@
font-size: 12px;
line-height: 14px;
margin-bottom: 9px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
margin-bottom: 15px;
}
}
.progress-bar-line-left,
@ -91,16 +129,30 @@
bottom: 5px;
height: 1px;
border-top: 1px solid $color-black-500;
@include mq(xxl, min) {
bottom: 11px;
}
}
.progress-bar-line-left {
left: 26%;
width: 96%;
@include mq(xxl, min) {
left: 21.2%;
width: 434px;
}
}
.progress-bar-line-right {
right: 21%;
width: 100%;
@include mq(xxl, min) {
right: 17.5%;
width: 450px;
}
}
.active {
@ -115,6 +167,11 @@
height: 12px;
border: 1px solid $color-black-500;
border-radius: 50%;
@include mq(xxl, min) {
width: 24px;
height: 24px;
}
}
}
}

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

@ -27,7 +27,9 @@ $grid-breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
tablet: 1025px,
xl: 1200px,
xxl: 2500px,
) !default;
$z-index: (