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(); await this.selectors();
this.PaymentsIconsHTML(); this.PaymentsIconsHTML();
this.VtexPciIconHTML(); this.VtexPciIconHTML();
this.developedByLogoHTML();
// this.onUpdate(); // this.onUpdate();
} }
@ -16,13 +17,14 @@ 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.paymentsIcons = await waitElement(".footerCheckout__payments"); this.payments = await waitElement(".footerCheckout__payments");
this.vtexpciIcon = await waitElement(".footerCheckout__vtexpci"); this.vtexPCI = await waitElement(".footerCheckout__vtexpci");
this.developedBy = await waitElement(".footerCheckout__developedBy");
} }
PaymentsIconsHTML() { PaymentsIconsHTML() {
if (this.paymentsIcons) { if (this.payments) {
this.paymentsIcons.innerHTML = ` this.payments.innerHTML = `
<picture class="payments-icons"> <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/masterCardM3Academy.png" alt="Logo Mastercard"/>
<img class="payments-icons__img" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Logo Visa"/> <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() { VtexPciIconHTML() {
if (this.vtexpciIcon) { if (this.vtexPCI) {
this.vtexpciIcon.innerHTML = ` this.vtexPCI.innerHTML = `
<picture class="vtexpci-icon"> <picture class="vtexpci-icon">
<img class="vtexpci-icon__img" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Ícone Vtex PCI"/> <img class="vtexpci-icon__img" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Ícone Vtex PCI"/>
</picture> </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() { onUpdate() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //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 // 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); observer.observe(target, config);
} }
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement("#my-element"); const elemento = await waitElement("#my-element");
$(elemento).slick({ $(elemento).slick({

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

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