GuilhermeDeCamargoBarbosa/m3-academy-template-checkout-guilherme-de-camargo-barbosa
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: construcao e estilizacao do footer

Browse Source
This commit is contained in:
Guilherme de Camargo Barbosa 2022-12-17 08:29:17 -03:00
parent fdf1a95809
commit 0ca3260ce2
6 changed files with 204 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,13 +7,21 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
// this.onUpdate(); this.getProducts(this.createShelf)
this.hideElementscart()
this.changeTextBtnChooseProducts()
this.setImagesFooter()
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.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
this.titleCart = await waitElement("#cart-title");
this.btnChooseProducts = await waitElement("#cart-choose-products");
this.footerStamps = await waitElement(".footerCheckout__stamps");
this.footerDevelopment = await waitElement(".footerCheckout__developedBy");
} }
onUpdate() { onUpdate() {
@ -21,15 +29,22 @@ export default class Footer {
// 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; let target = this.checkoutVazio;
let title = this.titleCart
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
console.log(mutation.type); if(mutation.target.style.display == "block") {
title.style.display = "none";
} else {
title.style.display = "block";
}
//console.log(mutation.target.style.display);
}); });
}); });
observer.observe(target, config); observer.observe(target, config);
} }
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement("#my-element"); const elemento = await waitElement("#my-element");
$(elemento).slick({ $(elemento).slick({
@ -37,4 +52,91 @@ export default class Footer {
slidesToScroll: 1, slidesToScroll: 1,
}); });
} }
hideElementscart() {
let containerCartEmpty = this.checkoutVazio;
const initialDisplayTitle = containerCartEmpty.style.display == "block" ? "none" : "block"
this.titleCart.style.display = initialDisplayTitle
}
changeTextBtnChooseProducts() {
this.btnChooseProducts.textContent = "Continuar comprando"
}
setImagesFooter() {
this.footerStamps.innerHTML= `
<li>
<span class= "footerCheckout__payments">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"/>
</span>
</li>
<li>
<span class= "footerCheckout__payments">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"/>
</span>
</li>
<li>
<span class= "footerCheckout__payments">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"/>
</span>
</li>
<li>
<span class= "footerCheckout__payments">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"/>
</span>
</li>
<li>
<span class= "footerCheckout__payments">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"/>
</span>
</li>
<li>
<span class= "footerCheckout__payments">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"/>
</span>
</li>
<li>
<span class= "footerCheckout__payments">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"/>
</span>
</li>
<li>
<span class= "footerCheckout__stamps__divider"></span>
</li>
<li>
<span class= "footerCheckout__payments">
<img src=" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"/>
</span>
</li>
`
this.footerDevelopment.innerHTML= `
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<img src=" https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" />
</a>
</li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
<img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" />
</a>
</li>
`
}
async getProducts(callback) {
await fetch(` https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`)
.then((response) => response.json())
.then((data) => {
callback(data)
})
}
createShelf(data) {
const products = data
console.log(products)
}
} }

84
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -13,7 +13,7 @@
display: none; display: none;
} }
.cart { .cart {
border: 3px solid $color-gray3; border: 1px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 16px;
@ -106,6 +106,9 @@
} }
.cart-items { .cart-items {
tbody td {
vertical-align: baseline;
}
.product-item { .product-item {
padding: 16px 0; padding: 16px 0;
} }
@ -114,7 +117,8 @@
color: $color-black; color: $color-black;
padding: 0 0 16px; padding: 0 0 16px;
font-style: normal; font-style: normal;
font-weight: bold; font-weight: 400;
font-family: $font-family-secundary;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@ -155,12 +159,13 @@
} }
a { a {
color: $color-blue; color: $color-black;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
text-decoration: none;
&:hover { &:hover {
color: darken($color-blue, 10); color: darken($color-blue, 10);
@ -190,6 +195,7 @@
.product-price { .product-price {
min-width: 100px; min-width: 100px;
vertical-align: top;
@include mq(md, max) { @include mq(md, max) {
min-width: 78px; min-width: 78px;
} }
@ -218,14 +224,14 @@
td.quantity { td.quantity {
align-items: center; align-items: center;
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
border-radius: 0; border-radius: 0.5rem;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 6px auto 0; margin: 6px auto 0;
max-height: 38px; max-height: 38px;
max-width: 118px; max-width: 118px;
padding: 0; padding: 1rem 1rem;
width: max-content !important; width: max-content !important;
@media (max-width: 490px) { @media (max-width: 490px) {
@ -234,47 +240,64 @@
input { input {
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray3;
border-radius: 0; border-radius: 0;
border-width: 0 1px; border: none !important;
display: block; display: block;
max-height: 38px; max-height: 38px;
margin: 0 !important; margin: 0.9rem !important;
padding: 8px 0; padding: 8px 0;
width: 38px; width: 24px;
color: $color-gray2; color: $color-gray2;
box-shadow: none; box-shadow: none;
@include mq(lg, max) { /* @include mq(lg, max) {
width: 24px !important; width: 24px !important;
} } */
} }
.icon-plus-sign, .icon-plus-sign,
.icon-minus-sign { .icon-minus-sign {
&::before { &::before {
color: $color-black; color: $color-white;
display: block; display: block;
font-weight: 500; font-weight: 500;
padding: 1px 12px; text-align: center;
} }
} }
.icon-minus-sign { .icon-minus-sign {
&:before { &:before {
content: "-"; content: "-";
font-size: 16px; width: 16px;
height: 16px;
background: $color-blue2;
padding: 4px 4px 5px 4px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
} }
} }
.icon-plus-sign { .icon-plus-sign {
&:before { &:before {
content: "+"; content: "+";
font-size: 14px; width: 16px;
height: 16px;
background: $color-blue2;
padding: 4px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
} }
} }
.item-quantity-change { .item-quantity-change {
border-radius: 50%;
background-color: $color-blue2;
align-items: center;
@media (max-width: 979px) and (min-width: 768px) { @media (max-width: 979px) and (min-width: 768px) {
position: inherit; position: inherit;
bottom: inherit; bottom: inherit;
@ -596,19 +619,22 @@
.coupon-data { .coupon-data {
#cart-link-coupon-add { #cart-link-coupon-add {
font-family: $font-family-secundary;
font-weight: 400;
color: $color-black;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
} }
span { span {
font-family: $font-family; font-family: $font-family-secundary;
font-weight: 400;
color: $color-black;
font-style: normal; font-style: normal;
font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue;
text-decoration: none; text-decoration: none;
} }
} }
@ -733,8 +759,9 @@
tfoot { tfoot {
td.info, td.info,
td.monetary { td.monetary {
font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: bold;
font-size: 18px; font-size: 18px;
line-height: 21px; line-height: 21px;
color: $color-black; color: $color-black;
@ -771,18 +798,19 @@
} }
a { a {
font-family: $font-family; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue; color: $color-black;
text-decoration: none;
} }
} }
.btn-place-order-wrapper { .btn-place-order-wrapper {
a { a {
background: $color-green; background: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
display: block; display: block;
@ -791,16 +819,16 @@
padding: 12px 19px; padding: 12px 19px;
&:hover { &:hover {
background-color: darken($color-green, 5); opacity: 0.8;
} }
&:after { &:after {
content: "finalizar compra"; content: "finalizar compra";
font-family: $font-family; font-family: $font-family;
font-weight: 500; font-weight: 700;
font-size: 13px; font-size: 13px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-white; color: $color-black;
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
line-height: 19px; line-height: 19px;

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

@ -11,27 +11,35 @@
&-title { &-title {
font-size: 20px; font-size: 20px;
font-family: $font-family;
font-weight: 700;
text-transform: uppercase;
line-height: 2.043rem;
}
&-message {
display: none;
} }
&-links { &-links {
.link-choose-products { .link-choose-products {
background: $color-black; background: $color-white;
border: none; border: 1px solid $color-black;
border-radius: 5px; border-radius: 0px;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
outline: none; outline: none;
font-family: $font-family; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-white; color: $color-black;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-gray5, 5);
} }
} }
} }

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

@ -49,6 +49,10 @@ body {
} }
.container-order-form, .container-order-form,
.container-cart { .container-cart {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 80%; width: 80%;
} }
} }
@ -68,10 +72,11 @@ body {
#cart-title, #cart-title,
#orderform-title { #orderform-title {
color: $color-gray2; width: 100%;
color: $color-black;
font-family: $font-family; font-family: $font-family;
font-weight: 500; font-weight: 700;
font-size: 36px; font-size: 1.5rem;
line-height: 42px; line-height: 42px;
margin: 40px 0 30px; margin: 40px 0 30px;
letter-spacing: 0.1em; letter-spacing: 0.1em;

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

@ -1,12 +1,20 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .footerCheckout {
border-top: none; border-top: 1px solid $color-black;
color: $color-gray2; color: $color-gray2;
padding: 1rem 0;
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.container {
width: 100%;
align-items: center;
display: flex;
justify-content: space-between;
}
} }
&__address { &__address {
@ -25,6 +33,12 @@
} }
} }
&__payments {
img {
width: 32.78px;
}
}
&__stamps { &__stamps {
align-items: center; align-items: center;
display: flex; display: flex;
@ -69,6 +83,10 @@
span { span {
margin-right: 8px; margin-right: 8px;
} }
img {
width: 40px;
}
} }
} }
} }

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

@ -16,6 +16,8 @@ $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue2: #00C8FF;
$color-green: #4caf50; $color-green: #4caf50;