forked from M3-Academy/m3-academy-template-checkout
feat: construcao e estilizacao do footer
This commit is contained in:
parent
fdf1a95809
commit
0ca3260ce2
@ -7,13 +7,21 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
// this.onUpdate();
|
||||
this.getProducts(this.createShelf)
|
||||
this.hideElementscart()
|
||||
this.changeTextBtnChooseProducts()
|
||||
this.setImagesFooter()
|
||||
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.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() {
|
||||
@ -21,15 +29,22 @@ export default class Footer {
|
||||
// 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 title = this.titleCart
|
||||
let config = { childList: true, attributes: true };
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
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);
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
$(elemento).slick({
|
||||
@ -37,4 +52,91 @@ export default class Footer {
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
display: none;
|
||||
}
|
||||
.cart {
|
||||
border: 3px solid $color-gray3;
|
||||
border: 1px solid $color-gray3;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
padding: 16px;
|
||||
@ -106,6 +106,9 @@
|
||||
}
|
||||
|
||||
.cart-items {
|
||||
tbody td {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.product-item {
|
||||
padding: 16px 0;
|
||||
}
|
||||
@ -114,7 +117,8 @@
|
||||
color: $color-black;
|
||||
padding: 0 0 16px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-weight: 400;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@ -155,12 +159,13 @@
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-blue;
|
||||
color: $color-black;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
transition: ease-in 0.22s all;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: darken($color-blue, 10);
|
||||
@ -190,6 +195,7 @@
|
||||
|
||||
.product-price {
|
||||
min-width: 100px;
|
||||
vertical-align: top;
|
||||
@include mq(md, max) {
|
||||
min-width: 78px;
|
||||
}
|
||||
@ -218,14 +224,14 @@
|
||||
td.quantity {
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray3;
|
||||
border-radius: 0;
|
||||
border-radius: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 6px auto 0;
|
||||
max-height: 38px;
|
||||
max-width: 118px;
|
||||
padding: 0;
|
||||
padding: 1rem 1rem;
|
||||
width: max-content !important;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
@ -234,47 +240,64 @@
|
||||
|
||||
input {
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray3;
|
||||
border-radius: 0;
|
||||
border-width: 0 1px;
|
||||
border: none !important;
|
||||
display: block;
|
||||
max-height: 38px;
|
||||
margin: 0 !important;
|
||||
margin: 0.9rem !important;
|
||||
padding: 8px 0;
|
||||
width: 38px;
|
||||
width: 24px;
|
||||
color: $color-gray2;
|
||||
box-shadow: none;
|
||||
|
||||
@include mq(lg, max) {
|
||||
/* @include mq(lg, max) {
|
||||
width: 24px !important;
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
.icon-plus-sign,
|
||||
.icon-minus-sign {
|
||||
&::before {
|
||||
color: $color-black;
|
||||
color: $color-white;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
padding: 1px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-minus-sign {
|
||||
&:before {
|
||||
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 {
|
||||
&:before {
|
||||
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 {
|
||||
border-radius: 50%;
|
||||
background-color: $color-blue2;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 979px) and (min-width: 768px) {
|
||||
position: inherit;
|
||||
bottom: inherit;
|
||||
@ -596,19 +619,22 @@
|
||||
|
||||
.coupon-data {
|
||||
#cart-link-coupon-add {
|
||||
font-family: $font-family-secundary;
|
||||
font-weight: 400;
|
||||
color: $color-black;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-family: $font-family;
|
||||
font-family: $font-family-secundary;
|
||||
font-weight: 400;
|
||||
color: $color-black;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -733,8 +759,9 @@
|
||||
tfoot {
|
||||
td.info,
|
||||
td.monetary {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: $color-black;
|
||||
@ -771,18 +798,19 @@
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: $font-family;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-blue;
|
||||
color: $color-black;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-place-order-wrapper {
|
||||
a {
|
||||
background: $color-green;
|
||||
background: $color-blue2;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
@ -791,16 +819,16 @@
|
||||
padding: 12px 19px;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($color-green, 5);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "finalizar compra";
|
||||
font-family: $font-family;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
color: $color-black;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
line-height: 19px;
|
||||
|
||||
@ -11,27 +11,35 @@
|
||||
|
||||
&-title {
|
||||
font-size: 20px;
|
||||
font-family: $font-family;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
line-height: 2.043rem;
|
||||
}
|
||||
|
||||
&-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-links {
|
||||
.link-choose-products {
|
||||
background: $color-black;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: $color-white;
|
||||
border: 1px solid $color-black;
|
||||
border-radius: 0px;
|
||||
transition: ease-in 0.22s all;
|
||||
outline: none;
|
||||
font-family: $font-family;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
color: $color-black;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
background: lighten($color-gray5, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,6 +49,10 @@ body {
|
||||
}
|
||||
.container-order-form,
|
||||
.container-cart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@ -68,10 +72,11 @@ body {
|
||||
|
||||
#cart-title,
|
||||
#orderform-title {
|
||||
color: $color-gray2;
|
||||
width: 100%;
|
||||
color: $color-black;
|
||||
font-family: $font-family;
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
line-height: 42px;
|
||||
margin: 40px 0 30px;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
@ -1,12 +1,20 @@
|
||||
/* _footer.scss */
|
||||
.footerCheckout {
|
||||
border-top: none;
|
||||
border-top: 1px solid $color-black;
|
||||
color: $color-gray2;
|
||||
padding: 1rem 0;
|
||||
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__address {
|
||||
@ -25,6 +33,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__payments {
|
||||
img {
|
||||
width: 32.78px;
|
||||
}
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@ -69,6 +83,10 @@
|
||||
span {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,6 +16,8 @@ $color-gray4: #8d8d8d;
|
||||
$color-gray5: #e5e5e5;
|
||||
|
||||
$color-blue: #4267b2;
|
||||
$color-blue2: #00C8FF;
|
||||
|
||||
|
||||
$color-green: #4caf50;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user