forked from M3-Academy/m3-academy-template-checkout
footer-1280
This commit is contained in:
parent
ea7a3d32e8
commit
c0234620ed
@ -7,6 +7,9 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.icons();
|
||||
this.vtexIcon();
|
||||
this.poweredDevelopeIcon();
|
||||
// this.onUpdate();
|
||||
}
|
||||
|
||||
@ -14,27 +17,85 @@ export default class Footer {
|
||||
//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.payments = await waitElement(".footerCheckout__payments");
|
||||
this.vtexpci = await waitElement(".footerCheckout__vtexpci");
|
||||
this.devIncons = await waitElement(".footerCheckout__developedBy");
|
||||
}
|
||||
|
||||
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);
|
||||
icons() {
|
||||
this.payments.innerHTML = `
|
||||
<ul class="payments-icons-wrapper">
|
||||
<li>
|
||||
<img class="img-payments"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
|
||||
alt=""
|
||||
/>
|
||||
</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>
|
||||
`;
|
||||
}
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
});
|
||||
|
||||
vtexIcon() {
|
||||
this.vtexpci.innerHTML = `
|
||||
<img class="vtex-icon"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
|
||||
alt=""
|
||||
/>
|
||||
`;
|
||||
}
|
||||
|
||||
poweredDevelopeIcon() {
|
||||
this.devIncons.innerHTML = `
|
||||
<li class="li">
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,59 +1,82 @@
|
||||
/* _footer.scss */
|
||||
.footerCheckout {
|
||||
border-top: none;
|
||||
color: $color-gray2;
|
||||
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// width: 1280px;
|
||||
// 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 {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__address {
|
||||
&__address {
|
||||
color: $color-gray2;
|
||||
font-family: $font-family;
|
||||
font-family: "Open Sans",sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
max-width: 40%;
|
||||
min-width: 40%;
|
||||
margin-left: -80px;
|
||||
margin-right: -45px;
|
||||
margin-top: 10px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
margin-bottom: 12px;
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background-color: $color-gray4;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin: 0 8px;
|
||||
width: 1px;
|
||||
.payments-icons-wrapper{
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
min-width: 36px;
|
||||
min-height: 20px;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin-right: 30px;
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background-color: $color-gray4;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin: 0 8px;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__developedBy {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
||||
li:last-child {
|
||||
margin-left: 16px;
|
||||
}
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
@ -70,5 +93,8 @@
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.li-2{
|
||||
margin-left: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,14 +23,13 @@
|
||||
<li>
|
||||
<a href="https://vtex.com/br-pt/">
|
||||
<span>Powered By</span>
|
||||
@TODO: vtex icon
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://agenciam3.com/">
|
||||
<span>Developed By</span>
|
||||
@TODO: m3 icon
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user