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() {
await this.selectors();
this.onUpdate();
await this.hideCartTitle();
//this.onUpdate();
// await this.hideCartTitle();
this.addCreditCards();
this.addCredits();
// this.changeButtonText();
console.log("Dentro do Footer");
}
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
this.checkoutVazio = await waitElement(".empty-cart-content");
this.checkoutTitle = await waitElement("#cart-title");
this.cartChooseProducts = await waitElement("#cart-choose-products");
this.productName = await waitElement("#product-name", {
timeout: 5000,
interval: 1000,
});
// this.productName = await waitElement("#product-name");
this.creditCardSection = await waitElement(".footerCheckout__stamps");
this.creditsSection = await waitElement(".footerCheckout__developedBy");
console.log(this.creditCardSection);
this.cartChooseProducts = await waitElement("a#cart-choose-products");
}
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() {
// 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

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

@ -10,6 +10,7 @@ export default class Header {
await this.selectors();
this.progressBarHTML();
await this.progressbarProgress();
this.changeButtonText();
}
async selectors() {
@ -21,7 +22,14 @@ export default class Header {
this.header = await waitElement(".headerCheckout");
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() {

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

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

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

@ -3,11 +3,59 @@
.footerCheckout {
border-top: none;
color: $color-gray2;
position: absolute;
width: 100%;
bottom: 0;
&__wrapper {
align-items: center;
display: flex;
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 {

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,
MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
<header class="headerCheckout">
<div class="container">
<div class="headerCheckout__wrapper">
<div class="headerCheckout__logo">
<a href="/">
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
</a>
<header class="headerCheckout">
<div class="container">
<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">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 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>Developed by</div>
<div class="logo">
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"
alt="M3 Logo"
/>
</figure>
</div>
</div>
</div>
</header>
</div>
</header>