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

feat(footer): Cria o html dos ícones das logos e aplica css no mesmo. E altera nomes variáveis no js.

Browse Source
This commit is contained in:
Sabrina Miranda 2022-12-15 19:38:51 -03:00
parent b6ed53f8b9
commit 322041df9f
2 changed files with 56 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@ export default class Footer {
await this.selectors();
this.PaymentsIconsHTML();
this.VtexPciIconHTML();
this.developedByLogoHTML();
// this.onUpdate();
}
@ -16,13 +17,14 @@ 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.paymentsIcons = await waitElement(".footerCheckout__payments");
this.vtexpciIcon = await waitElement(".footerCheckout__vtexpci");
this.payments = await waitElement(".footerCheckout__payments");
this.vtexPCI = await waitElement(".footerCheckout__vtexpci");
this.developedBy = await waitElement(".footerCheckout__developedBy");
}
PaymentsIconsHTML() {
if (this.paymentsIcons) {
this.paymentsIcons.innerHTML = `
if (this.payments) {
this.payments.innerHTML = `
<picture class="payments-icons">
<img class="payments-icons__img" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Logo Mastercard"/>
<img class="payments-icons__img" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Logo Visa"/>
@ -37,8 +39,8 @@ export default class Footer {
}
VtexPciIconHTML() {
if (this.vtexpciIcon) {
this.vtexpciIcon.innerHTML = `
if (this.vtexPCI) {
this.vtexPCI.innerHTML = `
<picture class="vtexpci-icon">
<img class="vtexpci-icon__img" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Ícone Vtex PCI"/>
</picture>
@ -46,6 +48,30 @@ export default class Footer {
}
}
developedByLogoHTML() {
if (this.developedBy) {
this.developedBy.innerHTML = `
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<picture class="vtex-logo">
<img class="vtex-logo__img" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Logo Vtex"/>
</picture>
</a>
</li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
<picture class="m3-logo">
<img class="m3-logo__img" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="Logo M3"/>
</picture>
</a>
</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
@ -60,6 +86,7 @@ export default class Footer {
observer.observe(target, config);
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
$(elemento).slick({

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

@ -25,11 +25,12 @@
line-height: 14px;
text-transform: capitalize;
max-width: 40%;
margin-right: auto;
@include mq(md, max) {
/*@include mq(md, max) {
margin-bottom: 24px;
max-width: 100%;
}
}*/
}
&__stamps {
@ -39,10 +40,10 @@
list-style: none;
margin: 0;
@include mq(md, max) {
/*@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
}
}*/
.payments-icons {
display: flex;
@ -76,9 +77,10 @@
display: flex;
list-style-type: none;
margin: 0;
margin-left: auto;
li:last-child {
margin-left: 16px;
margin-left: 10px;
}
a {
@ -93,7 +95,22 @@
text-decoration: none;
span {
margin-right: 8px;
margin-right: 10px;
}
}
.vtex-logo {
&__img {
width: 44px;
height: auto;
}
}
.m3-logo {
&__img {
width: 12.3809%;
width: 26px;
height: auto;
}
}
}