Merge branch 'feature/cart' into development

This commit is contained in:
Andrea Matsunaga 2022-12-16 18:21:20 -03:00
commit 5484496a98
8 changed files with 9566 additions and 63 deletions

View File

@ -7,34 +7,133 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
// this.onUpdate(); this.replaceEmptyCartContent();
this.stampsHTML();
this.developedByHTML();
this.onUpdate();
} }
async selectors() { async selectors() {
//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.cartTitle = await waitElement("#cart-title");
this.checkoutVazio = await waitElement(".empty-cart-content"); 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() { onUpdate() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //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 // 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 // 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; if(this.checkoutVazio) {
let config = { childList: true, attributes: true }; let target = this.checkoutVazio;
let observer = new MutationObserver((mutations) => { let config = { attributes: true };
mutations.forEach(function (mutation) {
console.log(mutation.type);
});
});
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"); // async addCarrossel() {
$(elemento).slick({ // const elemento = await waitElement("#my-element");
slidesToShow: 4, // $(elemento).slick({
slidesToScroll: 1, // 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')
} }
} }

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")
// })
// }
// }
} }

View File

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

View File

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

View File

@ -1,23 +1,70 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .footerCheckout {
border-top: none; width: 100%;
color: $color-gray2; display: flex;
flex-direction: column;
gap: 54px;
// background: cyan;
&__wrapper { // border-top: none;
align-items: center; // color: $color-gray2;
display: flex;
justify-content: space-between; &__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 { &__address {
color: $color-gray2; color: $black-300;
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: 14px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; // max-width: 40%;
justify-self: flex-start;
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 24px; margin-bottom: 24px;
@ -26,49 +73,76 @@
} }
&__stamps { &__stamps {
align-items: center;
display: flex; display: flex;
align-items: center;
justify-self: center; justify-self: center;
list-style: none; list-style: none;
margin: 0;
@include mq(md, max) { @include mq(md, max) {
align-self: center; align-self: center;
margin-bottom: 12px; margin-bottom: 12px;
} }
&__divider { &__divider {
background-color: $color-gray4; background-color: $color-gray-rename;
display: inline-block; display: block;
height: 24px; height: 24px;
margin: 0 8px; margin: 0 10px 0 13px;
width: 1px; 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 { &__developedBy {
align-items: center; align-items: center;
display: flex; display: flex;
list-style-type: none; gap: 10px;
list-style: none;
margin: 0; margin: 0;
justify-self: flex-end;
li:last-child {
margin-left: 16px;
}
a { a {
align-items: center; align-items: center;
color: $color-gray2; color: $black-300;
display: flex; display: flex;
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: 9px;
line-height: 12px; line-height: 12px;
text-decoration: none; text-decoration: none;
span { span {
margin-right: 8px; margin-right: 10px;
} }
} }
&__icons {
display: block;
height: 16px;
width: auto;
}
} }
} }

View File

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

View File

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

9297
yarn.lock Normal file

File diff suppressed because it is too large Load Diff