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

footer-1280

Browse Source
This commit is contained in:
Nathalia Sardou 2022-12-13 22:30:07 -03:00
parent ea7a3d32e8
commit c0234620ed
3 changed files with 144 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,9 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.icons();
this.vtexIcon();
this.poweredDevelopeIcon();
// this.onUpdate(); // this.onUpdate();
} }
@ -14,27 +17,85 @@ export default class Footer {
//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.payments = await waitElement(".footerCheckout__payments");
this.vtexpci = await waitElement(".footerCheckout__vtexpci");
this.devIncons = await waitElement(".footerCheckout__developedBy");
} }
onUpdate() { icons() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: this.payments.innerHTML = `
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver <ul class="payments-icons-wrapper">
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver <li>
let target = this.checkoutVazio; <img class="img-payments"
let config = { childList: true, attributes: true }; src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
let observer = new MutationObserver((mutations) => { alt=""
mutations.forEach(function (mutation) { />
console.log(mutation.type); </li>
}); <li>
}); <img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
alt=""
/>
</li>
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
alt=""
/>
</li>
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
alt=""
/>
</li>
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"
alt=""
/>
</li>
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
alt=""
/>
</li>
<li>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
alt=""
/>
</li>
</ul>
</div>
`;
}
observer.observe(target, config); vtexIcon() {
this.vtexpci.innerHTML = `
<img class="vtex-icon"
src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
alt=""
/>
`;
} }
async addCarrossel() {
const elemento = await waitElement("#my-element"); poweredDevelopeIcon() {
$(elemento).slick({ this.devIncons.innerHTML = `
slidesToShow: 4, <li class="li">
slidesToScroll: 1, <a href="https://vtex.com/br-pt/">
}); <span>PoweredBy</span>
<img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="">
</a>
</li>
<li class="li-2">
<a href="https://agenciam3.com/">
<span>DevelopedBy</span>
<img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="">
</a>
</li>
`;
} }
} }

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

@ -1,8 +1,18 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .footerCheckout {
border-top: none; // width: 1280px;
color: $color-gray2; // height: 65px;
border-top: 1px solid #292929;
// position: relative;
// display: flex;
// top: 800px;
.container{
position: relative;
display: flex;
max-width: max-content;
justify-content: space-between;
margin-top: 22px;
}
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
@ -11,13 +21,16 @@
&__address { &__address {
color: $color-gray2; color: $color-gray2;
font-family: $font-family; font-family: "Open Sans",sans-serif;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; min-width: 40%;
margin-left: -80px;
margin-right: -45px;
margin-top: 10px;
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 24px; margin-bottom: 24px;
@ -25,11 +38,24 @@
} }
} }
.payments-icons-wrapper{
display: flex;
list-style: none;
}
img {
max-width: 100%;
min-width: 36px;
min-height: 20px;
vertical-align: middle;
border: 0;
}
&__stamps { &__stamps {
align-items: center; align-items: center;
display: flex; display: flex;
justify-self: center;
list-style: none; list-style: none;
margin-right: 30px;
@include mq(md, max) { @include mq(md, max) {
align-self: center; align-self: center;
@ -49,10 +75,7 @@
align-items: center; align-items: center;
display: flex; display: flex;
list-style-type: none; list-style-type: none;
margin: 0; margin-left: -1px;
li:last-child {
margin-left: 16px;
} }
a { a {
@ -70,5 +93,8 @@
margin-right: 8px; margin-right: 8px;
} }
} }
.li-2{
margin-left: 35px;
} }
} }

3
checkout/src/template-checkout/checkout-footer.html
View File

@ -23,14 +23,13 @@
<li> <li>
<a href="https://vtex.com/br-pt/"> <a href="https://vtex.com/br-pt/">
<span>Powered By</span> <span>Powered By</span>
@TODO: vtex icon
</a> </a>
</li> </li>
<li> <li>
<a href="https://agenciam3.com/"> <a href="https://agenciam3.com/">
<span>Developed By</span> <span>Developed By</span>
@TODO: m3 icon
</a> </a>
</li> </li>
</ul> </ul>