AdilsonFernandoNevesOrnellas/m3-academy-template-checkout-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: js do footer

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2022-12-16 13:26:19 -03:00
parent 30555d9098
commit 7b1d68e3ec
6 changed files with 408 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.footerFlex();
// this.onUpdate(); // this.onUpdate();
} }
@ -14,6 +15,7 @@ export default class Footer {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
this.divFooter = await waitElement(".footerCheckout__wrapper");
} }
onUpdate() { onUpdate() {
@ -37,4 +39,40 @@ export default class Footer {
slidesToScroll: 1, slidesToScroll: 1,
}); });
} }
footerFlex(){
this.divFooter.innerHTML = `
<div class="conteiner_footer">
<div class="footerCheckout__address">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<ul class="footerCheckout__stamps">
<li>
<span class="footerCheckout__payments">Aqui: creditcard icons</span>
</li>
<li>
<span class="footerCheckout__stamps__divider"></span>
</li>
<li>
<span class="footerCheckout__payments">Aqui: vtex pci icon</span>
</li>
</ul>
<ul class="footerCheckout__developedBy">
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
@TODO: vtex icon
</a>
</li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
@TODO: m3 icon
</a>
</li>
</ul>
</div>
`
}
} }

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

@ -1,4 +1,3 @@
// import waitForEl from "../helpers/waitForEl";
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
export default class Header { export default class Header {
@ -8,14 +7,289 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); this.linhaHeader();
this.meioDaTela();
this.meioDaTela2();
this.meioDaTela3();
// this.barraDeProgresso();
// await this.evolucaoBarra();
} }
// ----------------------> A PARTE DO CODIGO COMENTADA É A PARTE DA BARRA DE PROGRESSSO, INFELIZMENTE ACONTECEU UNS PROBLEMAS COMIGO, E ME FALTOU UM POUCO DE MOTIVAÇÃO PARA CONTINUAR, E TAMBÉM NÃO ACHO CERTO PEGAR O CODIGO DA PROFESSORA E SIMPLESMENTE COPIAR, QUERIA PODER SABER MAIS PARA CONSEGUIR FAZER ESSA BARRA DE PROGRESSO, ENFIM, PEÇO DESCULPAS <-----------------------------
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.divAnteriorLinha = await waitElement(".container");
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe this.textoMeioTela = await waitElement(".empty-cart-title");
}); this.textoMeioTela2 = await waitElement(".empty-cart-message");
this.textoMeioTela3 = await waitElement("#cart-choose-products");
this.textoMeioTela4 = await waitElement("#cart-title");
} }
// barraDeProgresso() {
// if (this.progressBar && window.innerWidth > 1024) {
// this.progressBar.innerHTML = `
// <ul>
// <li>
// <div class="etapasBarra">
// <div>
// <p class="textBarra">Meu Carinho</p>
// <p class="bolinha1"></p>
// <hr class="linha1"></hr>
// </div>
// </div>
// </li>
// <li class="liCentral">
// <div class="etapasBarra">
// <div>
// <p class="textBarra">Dados Pessoais</p>
// <p class="bolinha2"></p>
// <hr class="linha2"></hr>
// </div>
// </div>
// </li>
// <li>
// <div class="etapasBarra">
// <div>
// <p class="textBarra">Pagamento</p>
// <p class="bolinha3"></p>
// <hr class="linha3"></hr>
// </div>
// </div>
// </li>
// </ul>
// `;
// }
// if (this.progressBar && window.innerWidth <= 1024) {
// this.progressBar.innerHTML = "";
// }
// }
// async evolucaoBarra() {
// if (this.progressBar && window.innerHTML > 1024) {
// const listUrl = document.querySelectorAll("#progressBar ul li");
// listUrl.forEach((li) => {
// if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
// if (li.children[0].children[0].children["bolinha1"]) {
// li.children[0].children[0].children["bolinha1"].classList.add(
// "preencherBolinha"
// );
// }
// if (li.children[0].children[0].children["bolinha2"]) {
// if (
// li.children[0].children[0].children["bolinha2"].classList.contains(
// "preencherBolinha"
// )
// ) {
// li.children[0].children[0].children["bolinha2"].classList.remove(
// "preencherBolinha"
// );
// }
// }
// if (li.children[0].children[0].children["bolinha3"]) {
// if (
// li.children[0].children[0].children["bolinha3"].classList.contains(
// "preencherBolinha"
// )
// ) {
// li.children[0].children[0].children["bolinha3"].classList.remove(
// "preencherBolinha"
// );
// }
// }
// } 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["bolinha1"]) {
// if (
// li.children[0].children[0].children[
// "preencherBolinha"
// ].classList.contains("preencherBolinha")
// ) {
// li.children[0].children[0].children[
// "preencherBolinha"
// ].classList.remove("preencherBolinha");
// }
// }
// if (li.children[0].children[0].children["bolinha2"]) {
// li.children[0].children[0].children["bolinha2"].classList.add(
// "preencherBolinha"
// );
// }
// if (li.children[0].children[0].children["bolinha3"]) {
// if (
// li.children[0].children[0].children[
// "preencherBolinha"
// ].classList.contains("preencherBolinha")
// ) {
// li.children[0].children[0].children[
// "preencherBolinha"
// ].classList.remove("preencherBolinha");
// }
// }
// } else if (
// window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"
// ) {
// if (li.children[0].children[0].children["bolinha1"]) {
// if (
// li.children[0].children[0].children["bolinha1"].classList.contains(
// "preencherBolinha"
// )
// ) {
// li.children[0].children[0].children["bolinha1"].classList.remove(
// "preencherBolinha"
// );
// }
// }
// if (li.children[0].children[0].children["bolinha2"]) {
// li.children[0].children[0].children["bolinha2"].classList.add(
// "preencherBolinha"
// );
// }
// if (li.children[0].children[0].children["bolinha3"]) {
// if (
// li.children[0].children[0].children["bolinha3"].classList.contains(
// "preencherBolinha"
// )
// ) {
// li.children[0].children[0].children["bolinha3"].classList.remove(
// "preencherBolinha"
// );
// }
// }
// }
// window.addEventListener("hashChange", () => {
// if (window.locarion.hast == "#/cart") {
// if (li.children[0].children[0].children["bolinha1"]) {
// if (
// li.children[0].children[0].children["bolinha1"].classList.contains(
// "preencherBolinha"
// )
// ) {
// li.children[0].children[0].children["bolinha1"].classList.add(
// "preencherBolinha"
// );
// }
// }
// if (li.children[0].children[0].children["bolinha2"]) {
// if (
// li.children[0].children[0].children["bolinha2"].classList.contains(
// "preencherBolinha"
// )
// ) {
// li.children[0].children[0].children["bolinha2"].classList.remove(
// "preencherBolinha"
// );
// }
// }
// if (li.children[0].children[0].children["bolinha3"]) {
// if (
// li.children[0].children[0].children["bolinha3"].classList.contains(
// "preencherBolinha"
// )
// ) {
// li.children[0].children[0].children["bolinha3"].classList.remove(
// "preencherBolinha"
// );
// }
// }
// } else if (
// window.location.hash === "#/email" ||
// window.location.hash == "#/profile" ||
// window.location.hash == "#/shipping"
// ) {
// if (li.children[0].children[0].children["bolinha1"]) {
// if (
// li.children[0].children[0].children["bolinha1"].classList.contains(
// "preencherBolinha"
// )
// ) {
// li.children[0].children[0].children["bolinha1"].classList.remove(
// "preencherBolinha"
// );
// }
// }
// if (li.children[0].children[0].children["bolinha2"]) {
// li.children[0].children[0].children["bolinha2"].classList.add(
// "preencherBolinha"
// );
// }
// if (li.children[0].children[0].children["bolinha3"]) {
// if (
// li.children[0].children[0].children["bolinha3"].classList.contains(
// "preencherBolinha"
// )
// ) {
// li.children[0].children[0].children["bolinha3"].classList.remove(
// "preencherBolinha"
// );
// }
// }
// } else if (window.location.hash == "#/payment") {
// if (li.children[0].children[0].children["bolinha1"]) {
// if (
// li.children[0].children[0].children["bolinha1"].classList.contains(
// "preencherBolinha"
// )
// ) {
// li.children[0].children[0].children["bolinha1"].classList.remove(
// "preencherBolinha"
// );
// }
// }
// if (li.children[0].children[0].children["bolinha2"]) {
// if (
// li.children[0].children[0].children["bolinha2"].classList.contains(
// "preencherBolinha"
// )
// ) {
// li.children[0].children[0].children["bolinha2"].classList.remove(
// "preencherBolinha"
// );
// }
// }
// if (li.children[0].children[0].children["bolinha3"]) {
// li.children[0].children[0].children["bolinha3"].classList.add(
// "preencherBolinha"
// );
// }
// }
// });
// });
// }
// }
linhaHeader(){
this.divAnteriorLinha.innerHTML = `
<div class="headerCheckout__wrapper">
<div class="headerCheckout__logo">
<a href="/">
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
</a>
</div>
<div id="progressBar" class="progress-bar">
</div>
<div class="headerCheckout__safeBuy">
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
<span>Compra segura</span>
</div>
</div>
<hr></hr>
`
}
meioDaTela(){
this.textoMeioTela.innerHTML = `SEU CARRINHO ESTÁ VAZIO`
this.textoMeioTela4.innerHTML = ``
}
meioDaTela2(){
this.textoMeioTela2.innerHTML = ``
}
meioDaTela3(){
this.textoMeioTela3.innerHTML = `CONTINUAR COMPRANDO`
}
} }

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

@ -15,9 +15,10 @@
&-links { &-links {
.link-choose-products { .link-choose-products {
background: $color-black; background: $color-white !important ;
border: none; border-width: 1px;
border-radius: 5px; border-style: solid;
border-color: $color-black ;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
outline: none; outline: none;
font-family: $font-family; font-family: $font-family;
@ -27,7 +28,7 @@
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-black;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {

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

@ -14,8 +14,9 @@ footer .footerCheckout__wrapper {
} }
footer .footerCheckout__prateleira, footer .footerCheckout__prateleira,
header { header {
width: 79.53125%; // width: 79.53125%;
margin: 0 auto; width: 100%;
margin: 0;
} }
body { body {

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

@ -1,73 +1,80 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .conteiner_footer {
border-top: none; width: 100%!important;
color: $color-gray2; display: flex;
align-items: center;
&__wrapper { justify-content: center;
align-items: center; .footerCheckout {
display: flex; border-top: none;
justify-content: space-between;
}
&__address {
color: $color-gray2; color: $color-gray2;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
max-width: 40%;
@include mq(md, max) { &__wrapper {
margin-bottom: 24px;
max-width: 100%;
}
}
&__stamps {
align-items: center;
display: flex;
justify-self: center;
list-style: none;
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
}
&__divider {
background-color: $color-gray4;
display: inline-block;
height: 24px;
margin: 0 8px;
width: 1px;
}
}
&__developedBy {
align-items: center;
display: flex;
list-style-type: none;
margin: 0;
li:last-child {
margin-left: 16px;
}
a {
align-items: center; align-items: center;
color: $color-gray2;
display: flex; display: flex;
justify-content: space-between;
}
&__address {
color: $color-gray2;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
text-decoration: none; text-transform: capitalize;
max-width: 40%;
span { @include mq(md, max) {
margin-right: 8px; margin-bottom: 24px;
max-width: 100%;
}
}
&__stamps {
align-items: center;
display: flex;
justify-self: center;
list-style: none;
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
}
&__divider {
background-color: $color-gray4;
display: inline-block;
height: 24px;
margin: 0 8px;
width: 1px;
}
}
&__developedBy {
align-items: center;
display: flex;
list-style-type: none;
margin: 0;
li:last-child {
margin-left: 16px;
}
a {
align-items: center;
color: $color-gray2;
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
text-decoration: none;
span {
margin-right: 8px;
}
} }
} }
} }

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

@ -1,12 +1,18 @@
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
.container { .container {
width: auto !important; width: 100%!important;
hr{
background-color: black;
color: black;
margin: 0 !important;
}
} }
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 29px 131px;
} }
&__logo { &__logo {
@ -17,6 +23,10 @@
} }
&__safeBuy { &__safeBuy {
display: flex;
align-items: center;
justify-content: center;
width: 11.69%;
span { span {
align-items: center; align-items: center;
display: flex; display: flex;
@ -28,6 +38,10 @@
line-height: 14px; line-height: 14px;
color: $color-gray; color: $color-gray;
} }
img{
width: 10.085%;
margin-right: 8px;
}
i { i {
margin-right: 8px; margin-right: 8px;