WellingtonDuarteSantos/m3-academy-template-checkout-wellington-duarte-santos
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

development #7

Merged
WellingtonDuarteSantos merged 12 commits from development into main 2022-12-19 02:48:24 +00:00
Conversation 0 Commits 12 Files Changed 12 +198 -22
5 changed files with 198 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ddc729d329 - Show all commits

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

@ -7,8 +7,12 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.onUpdate(); //this.onUpdate();
await this.hideCartTitle(); // await this.hideCartTitle();
this.addCreditCards();
this.addCredits();
// this.changeButtonText();
console.log("Dentro do Footer");
} }
async selectors() { async selectors() {
@ -16,11 +20,12 @@ export default class Footer {
// 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.checkoutTitle = await waitElement("#cart-title"); this.checkoutTitle = await waitElement("#cart-title");
this.cartChooseProducts = await waitElement("#cart-choose-products"); // this.productName = await waitElement("#product-name");
this.productName = await waitElement("#product-name", {
timeout: 5000, this.creditCardSection = await waitElement(".footerCheckout__stamps");
interval: 1000, this.creditsSection = await waitElement(".footerCheckout__developedBy");
}); console.log(this.creditCardSection);
this.cartChooseProducts = await waitElement("a#cart-choose-products");
} }
async hideCartTitle() { async hideCartTitle() {
@ -38,6 +43,95 @@ export default class Footer {
// } // }
} }
changeButtonText() {
// console.log("Mudando texto do botão");
this.cartChooseProducts.innerText = "Continue Comprando";
}
addCreditCards() {
this.creditCardSection.innerHTML = `
<div class="credit-cards">
<figure class="cards-logo">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
alt="MasterCard logo"
/>
</figure>
<figure class="cards-logo">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
alt="Visa logo"
/>
</figure>
<figure class="cards-logo">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
alt="American Express logo"
/>
</figure>
<figure class="cards-logo">
<img
class="cards-logo"
src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
alt="Elo logo"
/>
</figure>
<figure class="cards-logo">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
alt="PayPal logo"
/>
</figure>
<figure class="cards-logo">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
alt="Boleto logo"
/>
</figure>
<figure class="cards-logo">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
alt="Vtex Certified logo"
/>
</figure>
</div>`;
}
addCredits() {
this.creditsSection.innerHTML = `<div class="credits">
<div class="credit-text">Powered By</div>
<div class="logo">
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"
alt="VTex Logo"
/>
</figure>
</div>
<div class="credit-text">Developed by</div>
<div class="logo">
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"
alt="M3 Logo"
/>
</figure>
</div>`;
}
onUpdate() { onUpdate() {
// Função que fará a verificação se o carrinho está vazio para remover a prateleira de produtos: // Função que fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver

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

@ -10,6 +10,7 @@ export default class Header {
await this.selectors(); await this.selectors();
this.progressBarHTML(); this.progressBarHTML();
await this.progressbarProgress(); await this.progressbarProgress();
this.changeButtonText();
} }
async selectors() { async selectors() {
@ -21,7 +22,14 @@ export default class Header {
this.header = await waitElement(".headerCheckout"); this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar"); this.progressBar = await waitElement("#progressBar");
console.log("Barra encontrada"); // CART TITLE
this.cartChooseProducts = await waitElement("a#cart-choose-products");
}
changeButtonText() {
// console.log("Mudando texto do botão");
this.cartChooseProducts.innerText = "Continue Comprando";
} }
progressBarHTML() { progressBarHTML() {

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

@ -35,7 +35,7 @@
padding: 16px 65px; padding: 16px 65px;
&:hover { &:hover {
background: lighten($color-black, 5); background: white;
} }
} }
} }

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

@ -3,11 +3,59 @@
.footerCheckout { .footerCheckout {
border-top: none; border-top: none;
color: $color-gray2; color: $color-gray2;
position: absolute;
width: 100%;
bottom: 0;
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.container {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.credit-cards {
display: flex;
.cards-logo {
width: 36px;
height: 20px;
margin: 0;
margin-right: 13px;
}
}
}
.credits {
display: flex;
gap: 10px;
margin: 0;
padding: 0;
align-items: baseline;
.credit-text {
font-weight: 400;
font-size: 9px;
line-height: 12px;
}
.logo {
width: 44px;
height: 16px;
figure {
margin: 0;
width: 100%;
img {
height: 16px;
}
}
}
}
} }
&__address { &__address {

52
checkout/src/template-checkout/checkout-header.html
View File

@ -1,20 +1,46 @@
<!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente, <!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente,
MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. --> MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
<header class="headerCheckout"> <header class="headerCheckout">
<div class="container"> <div class="container">
<div class="headerCheckout__wrapper"> <div class="headerCheckout__wrapper">
<div class="headerCheckout__logo"> <div class="headerCheckout__logo">
<a href="/"> <a href="/">
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/> <img
</a> src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
alt="M3 Academy"
/>
</a>
</div>
<div id="progressBar" class="progress-bar">Aqui entra a barra de progresso</div>
<div class="headerCheckout__safeBuy">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
alt="Cadeado"
/>
<span>Compra segura</span>
</div>
<div class="credits">
<div>Powered By</div>
<div class="logo">
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"
alt="VTex Logo"
/>
</figure>
</div> </div>
<div id="progressBar" class="progress-bar"> Aqui entra a barra de progresso <div>Developed by</div>
</div> <div class="logo">
<div class="headerCheckout__safeBuy"> <figure>
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/> <img
<span>Compra segura</span> src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"
alt="M3 Logo"
/>
</figure>
</div> </div>
</div> </div>
</div> </div>
</header> </div>
</header>