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

refactor: altera código para adicionar logos no footer #11

Merged
Rafael_Sampaio_de_Oliveira merged 1 commits from refactor/altera-codigo-add-logos-footer into development 2022-12-14 16:44:52 +00:00
Conversation 0 Commits 1 Files Changed 2 +48 -40
2 changed files with 48 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,12 +15,10 @@ export default class Footer {
this.emptyButton = await waitElement(".link-choose-products");
this.paymentsMethods = await waitElement(".footerCheckout__payments");
this.certification = await waitElement(".footerCheckout__vtexpci");
this.developedBy = await waitElement(".footerCheckout__developedBy");
this.emptyCartTitle();
this.emptyCartButton();
this.addPaymentsMethodsIcons();
this.addCertificationIcon();
this.addDevelopedByIcons();
this.events();
this.items = await waitElement(".footerCheckout__prateleira-container");
console.log(this.items, "console de items");
@ -193,27 +191,6 @@ export default class Footer {
`;
}
addDevelopedByIcons() {
this.developedBy.innerHTML = `
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<span class="vetexIcon">
<img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Logo da Vtex" />
</span>
</a>
</li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
<span class="m3Icon">
<img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="Logo da M3"/>
</span>
</a>
</li>
`;
}
async addCarrossel() {
const elemento = await waitElement(".footerCheckout__prateleira-container");
$(elemento).slick({

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

@ -210,32 +210,63 @@
display: flex;
list-style-type: none;
margin: 0;
gap: 16px;
li:first-child {
a {
align-items: center;
color: $color-gray2;
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 0;
line-height: 12px;
text-decoration: none;
&::after {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png");
background-repeat: no-repeat;
background-size: 45px 16px;
content: "";
width: 45px;
height: 16px;
display: inline-block;
}
}
}
li:last-child {
margin-left: 16px;
a {
align-items: center;
color: $color-gray2;
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 0;
line-height: 12px;
text-decoration: none;
&::after {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png");
background-repeat: no-repeat;
background-size: 29px 16px;
content: "";
width: 29px;
height: 16px;
display: inline-block;
}
}
}
a {
align-items: center;
color: $color-gray2;
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
text-decoration: none;
span {
display: flex;
justify-content: center;
align-items: center;
}
img {
display: block;
height: 16px;
margin-left: 8px;
margin-right: 8px;
font-size: 10px;
}
}
}