forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'feat/adiona estilos header 1280px' (#1) from feature/adiciona-estilos-header-1280px into development
Reviewed-on: #1
This commit is contained in:
commit
b980e6d69d
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,225 @@ export default class Header {
|
|||||||
|
|
||||||
async init() {
|
async init() {
|
||||||
await this.selectors();
|
await this.selectors();
|
||||||
console.log(this.item);
|
this.progressBarHTML();
|
||||||
|
await this.progressBarProgress();
|
||||||
|
// console.log(this.progressBar);
|
||||||
}
|
}
|
||||||
|
|
||||||
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
|
//#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
|
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||||
});
|
});
|
||||||
|
this.progressBar = await waitElement("#progressBar", {
|
||||||
|
timeout: 5000,
|
||||||
|
interval: 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
progressBarHTML() {
|
||||||
|
if (this.progressBar && window.innerWidth > 1024) {
|
||||||
|
this.progressBar.innerHTML = `
|
||||||
|
<ul>
|
||||||
|
<li><div class="containerLi"><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></div></li>
|
||||||
|
<li class="central"><div class="containerLi"><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><div class="containerLi"><div><p class="progress-bar-text">Pagamento</p><p id="progress-bar-circle-3" class="progress-bar-circle-3"></p><p class="progress-bar-line-2"></p></div></div></li>
|
||||||
|
</ul>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
if (this.progressBar && window.innerHTML <= 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 === "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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,3 +3,4 @@
|
|||||||
@import "./partials/header";
|
@import "./partials/header";
|
||||||
@import "./partials/footer";
|
@import "./partials/footer";
|
||||||
@import "./checkout/checkout.scss";
|
@import "./checkout/checkout.scss";
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Tenor+Sans&display=swap");
|
||||||
|
@ -47,6 +47,7 @@ body {
|
|||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-order-form,
|
.container-order-form,
|
||||||
.container-cart {
|
.container-cart {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
@ -1,22 +1,125 @@
|
|||||||
/* _header.scss */
|
/* _header.scss */
|
||||||
.headerCheckout {
|
.headerCheckout {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 95px;
|
||||||
|
border-bottom: 1px solid $color-black;
|
||||||
.container {
|
.container {
|
||||||
width: auto !important;
|
width: 80% !important;
|
||||||
|
#progressBar {
|
||||||
|
width: 439px;
|
||||||
|
height: 35px;
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 !important;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
li .containerLi {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
li .central .containerLi {
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
li:last-child .containerLi {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
li .containerLi div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: "Tenor Sans", sans-serif;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 26px;
|
||||||
|
color: $color-black;
|
||||||
|
width: 38.2%;
|
||||||
|
}
|
||||||
|
li.central {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
li #progress-bar-circle-1,
|
||||||
|
li #progress-bar-circle-2,
|
||||||
|
li #progress-bar-circle-3 {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border: 1px solid $color-black;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
li #progress-bar-circle-1.active,
|
||||||
|
li #progress-bar-circle-2.active,
|
||||||
|
li #progress-bar-circle-3.active {
|
||||||
|
background: $color-black;
|
||||||
|
}
|
||||||
|
li .progress-bar-line-1 {
|
||||||
|
position: absolute;
|
||||||
|
left: 27%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
bottom: 5px;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
border-top: 1px solid $color-black;
|
||||||
|
}
|
||||||
|
li .progress-bar-line-2 {
|
||||||
|
position: absolute;
|
||||||
|
left: -28%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
bottom: 5px;
|
||||||
|
width: 106%;
|
||||||
|
height: 1px;
|
||||||
|
border-top: 1px solid $color-black;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
height: 37.14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__logo {
|
&__logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 15.194%;
|
||||||
img {
|
img {
|
||||||
height: 52px;
|
height: 37.14px;
|
||||||
width: auto;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__safeBuy {
|
&__safeBuy {
|
||||||
|
display: flex;
|
||||||
|
width: 11.622%;
|
||||||
|
height: 17px;
|
||||||
|
@media (min-width: 1025px) and (max-width: 1276px) {
|
||||||
|
width: 14.5%;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
// width: 10.09%;
|
||||||
|
width: 12px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -27,6 +130,7 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
color: $color-gray;
|
color: $color-gray;
|
||||||
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
|
@ -2,10 +2,10 @@
|
|||||||
@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: #000000;
|
||||||
|
|
||||||
$color-white: #fff;
|
$color-white: #fff;
|
||||||
|
|
||||||
@ -26,7 +26,7 @@ $grid-breakpoints: (
|
|||||||
sm: 576px,
|
sm: 576px,
|
||||||
md: 768px,
|
md: 768px,
|
||||||
lg: 992px,
|
lg: 992px,
|
||||||
xl: 1200px
|
xl: 1200px,
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
$z-index: (
|
$z-index: (
|
||||||
@ -34,5 +34,5 @@ $z-index: (
|
|||||||
level2: 10,
|
level2: 10,
|
||||||
level3: 15,
|
level3: 15,
|
||||||
level4: 20,
|
level4: 20,
|
||||||
level5: 25
|
level5: 25,
|
||||||
) !default;
|
) !default;
|
||||||
|
Loading…
Reference in New Issue
Block a user