andreamatsunaga/m3-academy-template-checkout-andrea-matsunaga
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

development #1

Merged
andreamatsunaga merged 17 commits from development into main 2022-12-19 04:49:09 +00:00
Conversation 0 Commits 17 Files Changed 15 +9566 -63
8 changed files with 9566 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5484496a98 - Show all commits

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

@ -7,34 +7,133 @@ export default class Footer {
async init() {
await this.selectors();
// this.onUpdate();
this.replaceEmptyCartContent();
this.stampsHTML();
this.developedByHTML();
this.onUpdate();
}
async selectors() {
//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.cartTitle = await waitElement("#cart-title");
this.checkoutVazio = await waitElement(".empty-cart-content");
this.emptyCartTitle = await waitElement(".empty-cart-title");
this.continueShopping = await waitElement("#cart-choose-products");
this.prateleira = await waitElement(".footerCheckout__prateleira");
}
replaceEmptyCartContent() {
if (this.checkoutVazio) {
this.emptyCartTitle.textContent = "Seu Carrinho está vazio";
this.continueShopping.textContent = "Continuar comprando";
}
}
onUpdate() {
//Função qeu 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
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
let target = this.checkoutVazio;
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
console.log(mutation.type);
});
});
if(this.checkoutVazio) {
let target = this.checkoutVazio;
let config = { attributes: true };
observer.observe(target, config);
this.cartTitle.style.display = "none";
this.prateleira.style.display = "none";
let observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
console.log("mutation type: ", mutation.typ)
console.log("rolou mutation")
if(this.checkoutVazio.style.display == "block") {
console.log("Carrinho está vazio")
this.cartTitle.style.display = "none";
this.prateleira.style.display = "none";
} else {
console.log("Carrinho NÃO está vazio");
this.cartTitle.style.display = "block";
this.prateleira.style.display = "block";
}
});
});
observer.observe(target, config);
}
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
});
// async addCarrossel() {
// const elemento = await waitElement("#my-element");
// $(elemento).slick({
// slidesToShow: 4,
// slidesToScroll: 1,
// });
// }
async stampsHTML() {
const stamps = await waitElement('.footerCheckout__stamps');
// console.log(stamps.children[0], stamps.children[2]);
const paymentsStructure = `
<ul class="footerCheckout__payments">
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="" />
</li>
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="" />
</li>
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="" />
</li>
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="" />
</li>
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="" />
</li>
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="" />
</li>
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="" />
</li>
</ul>
`
const certifiedStructure = `
<img class="footerCheckout__vtexpci footerCheckout__payments--certified" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="" />
`
stamps.children[0].innerHTML = paymentsStructure;
stamps.children[2].innerHTML = certifiedStructure;
}
async developedByHTML() {
const developedBy = await waitElement('.footerCheckout__developedBy');
// console.log(developedBy.children[0].children[0]);
const vtexIcon = `
<span>Powered By</span>
<img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="" />
`
const m3Icon = `
<span>Powered By</span>
<img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="" />
`
developedBy.children[0].children[0].innerHTML = vtexIcon;
developedBy.children[1].children[0].innerHTML = m3Icon;
// developedBy.children[0].children[0].addClass('footerCheckout__developedBy__link')
// developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link')
}
}

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

@ -182,6 +182,15 @@ export default class Header {
})
}
}
// async progressBarMove() {
// if (this.progressBar && window.innerWidth > 1024) {
// const progressBarList = document.querySelectorAll(("#progressBar ul li"));
// progressBarList.forEach((li) => {
// console.log("Aqui vem seu código")
// })
// }
// }
}

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

@ -1,38 +1,53 @@
.empty-cart {
font-family: $font-family;
&-content {
color: $black-300;
text-align: center;
&-content {
margin: 170px 0 262px;
text-align: center;
text-transform: uppercase;
@include mq(md, max) {
padding: 0 16px;
padding: 0 16px;
}
}
&-title {
font-size: 20px;
margin: 0 0 32px;
line-height: 33px;
font-family: $font-family;
font-size: 24px;
color: $black-500;
}
&-message {
display: none;
}
&-links {
.link-choose-products {
background: $black-300;
border: none;
border-radius: 5px;
width: 325px;
height: 46px;
margin: 0 auto;
border: 1px solid $black-500;
.link-choose-products {
padding: 0;
line-height: 16px;
font-family: $font-family-secundary;
font-size: 14px;
border: none;
border-radius: 0;
color: $black-500;
background: $color-white;
transition: ease-in 0.22s all;
outline: none;
font-family: $font-family;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-align: center;
letter-spacing: 0.05em;
color: $color-white;
text-transform: uppercase;
box-shadow: none;
// outline: none;
// letter-spacing: 0.05em;
&:hover {
background: lighten($black-300, 5);
background: lighten($blue-300, 5);
}
}
}
}

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

@ -3,14 +3,18 @@
@import "./checkout-pagamento";
@import "./checkout-autenticacao";
* {
box-sizing: border-box;
}
html {
height: 100%;
min-height: 100%;
}
footer .footerCheckout__wrapper {
width: 94.9734%;
margin: auto auto 0 auto;
width: 100%;
// margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,
header {

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

@ -1,23 +1,70 @@
/* _footer.scss */
.footerCheckout {
border-top: none;
color: $color-gray2;
width: 100%;
display: flex;
flex-direction: column;
gap: 54px;
// background: cyan;
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
// border-top: none;
// color: $color-gray2;
&__prateleira {
// margin-top: 101px;
height: 448px;
background-color: green;
width: 100%;
}
&__wrapper {
margin: 0;
width: 100%;
padding: 16px 32px;
border-top: 1px solid $black-500;
// background-color: magenta;
// // // align-items: center;
// // // display: flex;
// // // justify-content: space-between;
}
.container {
margin: 0;
// padding: 0;
width: 100%;
// height: 100%;
// display: flex;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
// text-align: center;
// // // grid-auto-flow: column;
// // // grid-auto-columns: max-content;
// // justify-content: space-between;
// // margin: 0;
// background-color: yellowgreen;
&::before,
&::after {
display: none;
}
}
&__address {
color: $color-gray2;
color: $black-300;
font-family: $font-family;
font-style: normal;
font-weight: normal;
// font-style: normal;
// font-weight: normal;
font-size: 10px;
line-height: 12px;
line-height: 14px;
text-transform: capitalize;
max-width: 40%;
// max-width: 40%;
justify-self: flex-start;
@include mq(md, max) {
margin-bottom: 24px;
@ -26,49 +73,76 @@
}
&__stamps {
align-items: center;
display: flex;
align-items: center;
justify-self: center;
list-style: none;
margin: 0;
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
}
&__divider {
background-color: $color-gray4;
display: inline-block;
background-color: $color-gray-rename;
display: block;
height: 24px;
margin: 0 8px;
margin: 0 10px 0 13px;
width: 1px;
}
}
&__payments {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 13px;
list-style: none;
margin: 0;
img {
display: block;
height: 20px;
width: auto;
}
}
&__vtexpci {
display: block;
width: 53px;
height: 33px;
}
&__developedBy {
align-items: center;
display: flex;
list-style-type: none;
gap: 10px;
list-style: none;
margin: 0;
li:last-child {
margin-left: 16px;
}
justify-self: flex-end;
a {
align-items: center;
color: $color-gray2;
color: $black-300;
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
// font-style: normal;
// font-weight: normal;
font-size: 9px;
line-height: 12px;
text-decoration: none;
span {
margin-right: 8px;
margin-right: 10px;
}
}
&__icons {
display: block;
height: 16px;
width: auto;
}
}
}

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

@ -3,6 +3,7 @@
// position: relative;
margin: 0;
padding: 30px 131px;
width: 100%;
border-bottom: 1px solid $black-500;
.container {

4
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -10,12 +10,16 @@ $black-500: #000000;
$color-white: #fff;
$color-gray-rename: #c4c4c4;
$blue-300: #00C8FF;
$color-gray: #6c6c6c;
$color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
$color-blue: #4267b2;
$color-green: #4caf50;

9297
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff