naianfelix/m3-academy-template-checkout-naian-felix
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feat: melhora footer' (#2) from develop into main

Browse Source 
Reviewed-on: #2
This commit is contained in:
Naian Felix dos Santos 2022-12-27 03:47:00 +00:00
commit 627d55e0a6
4 changed files with 54 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,6 +63,21 @@ export default class Footer {
}
}
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);
});
});
observer.observe(target, config);
}
createPrateleira() {
if (this.itensShelf) {
this.itensShelf.innerHTML = `
@ -82,7 +97,7 @@ export default class Footer {
structure += `
<li class="slick">
<figure class="container-img"><img src ="${response.img}"/></figure>
<figure class="container-img"><img src ="${response.img}"/></figure>
<figcaption class="name-picture">${response.name}</figcaption>
<div><ul class= "number" >${sku.join("")}</ul></div>
<button type="button"><a href="${response.link}">Ver Produto</a></button>
@ -140,9 +155,9 @@ export default class Footer {
creditCardIconsHTML() {
this.creditCardIcons.innerHTML = `
<li><img class="master" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Mastercard"></li>
<li><img class="visa" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt=""></li>
<li><img class="amex" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="American Express"></li>
<li><img class="master" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Mastercard"></li>
<li><img class="visa" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt=""></li>
<li><img class="amex" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="American Express"></li>
<li><img class="elo" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo"></li>
<li><img class="hiper" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li>
<li><img class="paypal" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li>
@ -154,37 +169,23 @@ export default class Footer {
developedByIconsHTML() {
this.developedByIcons.innerHTML = `
<li>
<div class="by-vtex">
<li>
<div class="by-vtex">
<a href="https://vtex.com.br-pt/">
<span>Powered By</span>
<span>Powered By</span>
</a>
<img class="vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" />
</div>
</li>
<li>
<div class="by-m3">
<div class="by-m3">
<a href="https://vtex.com.br-pt/">
<span>Developed By</span>
<span>Developed By</span>
</a>
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" />
</div>
</li>
</div>
</li>
`;
}
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);
});
});
observer.observe(target, config);
}
}

1
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -753,6 +753,7 @@
max-width: 60px;
width: 60px;
height: 60px;
object-fit: cover;
}
span {

1
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -12,6 +12,7 @@
color: #000000;
margin-bottom: 20px;
}
ul.footerCheckout__carrossel-itens {
display: flex;
list-style: none;

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

@ -12,15 +12,12 @@
display: flex;
align-items: center;
padding: 0 16px;
width: 100%;
width: 98%;
justify-content: space-between;
position: fixed;
bottom: 0;
@media (min-width: 1200px) {
width: 100%;
}
@include mq(md, max) {
margin: 0 0 0 9px;
@include mq(xl, max) {
display: grid;
}
}
@ -69,13 +66,27 @@
justify-self: center;
list-style: none;
width: 404px;
margin: 16px auto 16px auto;
margin: 0 auto;
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
}
.master,
.visa,
.amex,
.elo,
.hiper,
.paypal,
.boleto {
height: 20px;
}
.vtex {
height: 33px;
}
&__divider {
display: inline-block;
background-color: $color-gray4;
@ -98,7 +109,6 @@
display: flex;
align-items: center;
margin: 0;
margin-bottom: 16px;
list-style-type: none;
.vtex-logo,
@ -109,10 +119,16 @@
.by-m3 {
display: flex;
a {
color: $color-black-100;
}
}
.by-vtex {
display: flex;
a {
color: $color-black-100;
}
}
.list {
@ -140,7 +156,7 @@
text-decoration: none;
span {
margin-right: 8px;
margin-right: 10px;
}
}
}