affonso_kopmann/m3-academy-template-checkout-affonso-kopmann
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: faz aparecer progressbar - sem estilo ainda.

Browse Source
This commit is contained in:
Affonso Kopmann 2022-12-23 15:12:24 -03:00
parent 148feb0b14
commit 066928c6eb
4 changed files with 141 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
checkout/src/arquivos/js/components/Footer.js
View File

@ -7,8 +7,8 @@ export default class Footer {
async init() {
await this.selectors();
// this.onUpdate();
this.footer();
// this.onUpdate();
}
async selectors() {
@ -32,8 +32,9 @@ export default class Footer {
observer.observe(target, config);
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
const elemento = await waitElement(".container-carousel-item");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,

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

@ -1,19 +1,116 @@
// import waitForEl from "../helpers/waitForEl";
import { waitElement } from "m3-utils";
export default class Header {
constructor() {
this.init();
export default class Header {
constructor() {
this.init();
}
async init() {
await this.selectors();
this.progressBarHtml();
await this.progressBarEvolution();
}
async selectors() {
this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
}
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 id="progress-bar-line-1" class="progress-bar-line-1"> </p> </div> </div> </li>
<li>
<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 id="progress-bar-line-2" class="progress-bar-line-2"> </p> </div> </div> </li>
</ul>
`;
}
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``;
}
}
async init() {
await this.selectors();
this.progressBarHtml();
await this.progressBarEvolution();
async progressBarEvolution() {
if (this.progressBar && window.innerWidth > 1024) {
const progressLista = document.querySelectorAll("progressBar ul li");
progressLista.forEach((li) => {
if (window.location.href === "https://m3academy.myvtex.com.br/checkout/#/cart") {
this.trataPonto(li, 1);
} else if (
window.location.href === "https://m3academy.myvtex.com.br/checkout/#/email" ||
window.location.href == "https://m3academy.myvtex.com.br/checkout/#/profile" ||
window.location.href == "https://m3academy.myvtex.com.br/checkout/#/shipping"
) {
this.trataPonto(li, 2);
} else if (
window.location.href === "https://m3academy.myvtex.com.br/checkout/#/payment"
) {
this.trataPonto(li, 3);
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
this.trataPonto(li, 1);
} else if (
window.location.href === "#/email" ||
window.location.href == "#/profile" ||
window.location.href == "#/shipping"
) {
this.trataPonto(li, 2);
} else if (window.location.hash == "#payment") {
this.trataPonto(li, 3);
}
});
});
}
}
async selectors() {
this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
marcarPonto(li, local) {
if (li.children[0].children[0].children["progress-bar-circle-" + local]) {
li.children[0].children[0].children["progress-bar-circle-" + local].classList.add(
"active"
);
}
}
removerPonto(li, local) {
if (li.children[0].children[0].children["progress-bar-circle-" + local]) {
if (
li.children[0].children[0].children[
"progress-bar-circle-" + local
].classList.contains("active")
) {
li.children[0].children[0].children[
"progress-bar-circle-" + local
].classList.remove("active")
}
}
}
trataPonto(li, local) {
const indice = [1, 2, 3];
let indicesPontoBranco = indice.splice(local - 1, 1);
this.marcarPonto(li, local);
for (const i of indice) {
this.removerPonto(li, i);
}
}
}

24
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -6,12 +6,36 @@
.cart-template {
font-family: $font-family;
@include mq(md, max) {
padding: 0 0;
}
.item-unit-label {
display: none;
}
.empty-cart-content {
p {
display: none;
}
}
.empty-cart-links {
align-items: center;
// display: flex;
text-align: center;
a {
font-size:0;
height: 16px;
&::after {
content: "CONTINUAR COMPRANDO";
font-size: 14px;
text-transform: uppercase;
}
}
}
.cart {
border: 3px solid $color-gray3;
box-sizing: border-box;

9
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -10,13 +10,18 @@
.footerCheckout {
border-top: 1px solid $color-black;
color: $color-gray2;
// border-top: 1px solid $color-black;
// color: $color-gray2;
&__wrapper {
align-items: center;
border-top: 1px solid $color-black;
color: $color-gray2;
display: flex;
justify-content: space-between;
position: absolute;
left: 0;
bottom: 0;
}
&__address {