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() {
await this.selectors();
this.footerFlex();
// this.onUpdate();
}
@ -14,6 +15,7 @@ export default class Footer {
//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
this.checkoutVazio = await waitElement(".empty-cart-content");
this.divFooter = await waitElement(".footerCheckout__wrapper");
}
onUpdate() {
@ -37,4 +39,40 @@ export default class Footer {
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";
export default class Header {
@ -8,14 +7,289 @@ export default class Header {
async init() {
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() {
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.divAnteriorLinha = await waitElement(".container");
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 {
.link-choose-products {
background: $color-black;
border: none;
border-radius: 5px;
background: $color-white !important ;
border-width: 1px;
border-style: solid;
border-color: $color-black ;
transition: ease-in 0.22s all;
outline: none;
font-family: $font-family;
@ -27,7 +28,7 @@
line-height: 16px;
text-align: center;
letter-spacing: 0.05em;
color: $color-white;
color: $color-black;
text-transform: uppercase;
&:hover {

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

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

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

@ -1,73 +1,80 @@
/* _footer.scss */
.footerCheckout {
border-top: none;
color: $color-gray2;
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
}
&__address {
.conteiner_footer {
width: 100%!important;
display: flex;
align-items: center;
justify-content: center;
.footerCheckout {
border-top: none;
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) {
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 {
&__wrapper {
align-items: center;
color: $color-gray2;
display: flex;
justify-content: space-between;
}
&__address {
color: $color-gray2;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
text-decoration: none;
text-transform: capitalize;
max-width: 40%;
span {
margin-right: 8px;
@include mq(md, max) {
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 */
.headerCheckout {
.container {
width: auto !important;
width: 100%!important;
hr{
background-color: black;
color: black;
margin: 0 !important;
}
}
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
padding: 29px 131px;
}
&__logo {
@ -17,6 +23,10 @@
}
&__safeBuy {
display: flex;
align-items: center;
justify-content: center;
width: 11.69%;
span {
align-items: center;
display: flex;
@ -28,6 +38,10 @@
line-height: 14px;
color: $color-gray;
}
img{
width: 10.085%;
margin-right: 8px;
}
i {
margin-right: 8px;