forked from M3-Academy/m3-academy-template-checkout
feat(Footer): Aplica prateleira e aplica o slick
This commit is contained in:
parent
2983fcbe2e
commit
6d2af82fc7
@ -7,10 +7,12 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
// this.requestApi();
|
||||
this.requestApi();
|
||||
this.addCarrossel();
|
||||
this.creatPaymentsIcons();
|
||||
this.creatVtexIconPci();
|
||||
this.creatDevIconsM3();
|
||||
this.onUpdate();
|
||||
|
||||
}
|
||||
|
||||
@ -33,22 +35,13 @@ export default class Footer {
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
});
|
||||
}
|
||||
|
||||
requestApi () {
|
||||
this.divPrateleira.innerHTML =
|
||||
`<h3>Você também pode gostar:</h3>
|
||||
<ul class="ulProduct"></ul>
|
||||
`<h3 class="footerCheckout__prateleira-title" >Você também pode gostar:</h3>
|
||||
<ul class="footerCheckout__prateleira-ul" id="footerCheckout__prateleira-ul-id"></ul>
|
||||
`
|
||||
const api = 'https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319';
|
||||
let itemStrutucture = '';
|
||||
const ulProdut = document.querySelectorAll('.ulProdut');
|
||||
const ulProdut = document.querySelector('.footerCheckout__prateleira-ul');
|
||||
|
||||
fetch(api)
|
||||
.then((response) => {
|
||||
@ -56,60 +49,86 @@ export default class Footer {
|
||||
})
|
||||
.then((data) => {
|
||||
data.forEach((prod) => {
|
||||
itemStrutucture += `
|
||||
`
|
||||
const imgProd = prod.items[0].images[0].imageUrl;
|
||||
const nameProd = prod.productName;
|
||||
const linkProd = prod.link;
|
||||
ulProdut.innerHTML += `
|
||||
<li class="footerCheckout__prateleira-li-prod">
|
||||
<figure class="footerCheckout__prateleira-figure-prod">
|
||||
<img src="${imgProd}" alt="Imagem Produto">
|
||||
</figure>
|
||||
<div class="footerCheckout__prateleira-div-text">
|
||||
<h2>${nameProd}</h2>
|
||||
<ul>
|
||||
${prod.items.map((name) => `<li>
|
||||
${name.name}</li>`).join('')}
|
||||
</ul>
|
||||
<a href="${linkProd}">
|
||||
Ver Produto
|
||||
</a>
|
||||
</div>
|
||||
</li>`
|
||||
})
|
||||
});
|
||||
|
||||
ulProdut = itemStrutucture;
|
||||
};
|
||||
async addCarrossel() {
|
||||
const prateleiraProd = await waitElement("#footerCheckout__prateleira-ul-id");
|
||||
if(window.screen.width > 1024) {
|
||||
$(prateleiraProd).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
infinite: false,
|
||||
arrows: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
creatPaymentsIcons () {
|
||||
this.payments.innerHTML = `
|
||||
<ul class="footerCheckout__container-ul">
|
||||
<li class="footerCheckout__wrapper-li">
|
||||
<figure class="footerCheckout__figure-img-tickets">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="MasterCard"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="AmericaExpress"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="VisaCard"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"/>
|
||||
</figure>
|
||||
</li>
|
||||
<li class="footerCheckout__wrapper-li">
|
||||
<figure class="footerCheckout__figure-img-tickets">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="MasterCard"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="AmericaExpress"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="VisaCard"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"/>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"/>
|
||||
</figure>
|
||||
</li>
|
||||
</ul>`;
|
||||
}
|
||||
|
||||
creatVtexIconPci () {
|
||||
this.vtexIconPci.innerHTML = `
|
||||
<ul class="footerCheckout__container-ul">
|
||||
<li class="footerCheckout__wrapper-li">
|
||||
<figure class="footerCheckout__figure-img-vtex">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo Vtex"/>
|
||||
</figure>
|
||||
</li>
|
||||
</ul>`
|
||||
<ul class="footerCheckout__container-ul">
|
||||
<li class="footerCheckout__wrapper-li">
|
||||
<figure class="footerCheckout__figure-img-vtex">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo Vtex"/>
|
||||
</figure>
|
||||
</li>
|
||||
</ul>`
|
||||
}
|
||||
|
||||
creatDevIconsM3 () {
|
||||
this.devIcons.innerHTML = `
|
||||
<li class="footerCheckout__container-li-m3Icon">
|
||||
<a href="https://vtex.com/br-pt/">
|
||||
<a href="https://vtex.com/br-pt/">
|
||||
<span>Powered By</span>
|
||||
<figure class="footerCheckout__figure-img-vtexIcon">
|
||||
<img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="LogoVTEX">
|
||||
<img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="LogoVTEX">
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li class="footerCheckout__container-li-m3Icon">
|
||||
<a href="https://agenciam3.com/">
|
||||
<span>Developed By</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="footerCheckout__container-li-m3Icon">
|
||||
<a href="https://agenciam3.com/">
|
||||
<span>Developed By</span>
|
||||
<figure class="footerCheckout__figure-img-m3Icon">
|
||||
<img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="LogoM3">
|
||||
<img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="LogoM3">
|
||||
</figure>
|
||||
</a>
|
||||
</li>`
|
||||
}
|
||||
</a>
|
||||
</li>`
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,9 +43,10 @@
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
column-gap: 16px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
@ -101,14 +102,18 @@
|
||||
position: absolute;
|
||||
}
|
||||
.slick-prev {
|
||||
border: none;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
z-index: 4;
|
||||
left: 10px;
|
||||
}
|
||||
.slick-next {
|
||||
border: none;
|
||||
z-index: 4;
|
||||
right: 10px;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
@ -134,3 +139,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width: 1280px) {
|
||||
.slick-slide {
|
||||
width: 242px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,6 +92,8 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// CARDS FOOTER
|
||||
|
||||
&__container-ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
@ -106,12 +108,11 @@
|
||||
|
||||
&__figure-img-tickets {
|
||||
display: flex;
|
||||
column-gap: 13.22px;
|
||||
margin-right: 13.35px;
|
||||
column-gap: 13.35px;
|
||||
}
|
||||
|
||||
&__figure-img-tickets img {
|
||||
width: 35.65px;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@ -140,5 +141,123 @@
|
||||
|
||||
}
|
||||
|
||||
// PRATELEIRA DE PRODUTOS
|
||||
|
||||
&__prateleira {
|
||||
margin: 20px 132px 54px;
|
||||
}
|
||||
|
||||
&__prateleira-title {
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 38px;
|
||||
font-style: normal;
|
||||
color: $color-black-500;
|
||||
text-align: center;
|
||||
margin: 43px 0 20px;
|
||||
}
|
||||
&__prateleira-ul{
|
||||
list-style-type:none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__prateleira-li-prod {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__prateleira-figure-prod {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__prateleira-figure-prod img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&__prateleira-div-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__prateleira-div-text ul {
|
||||
margin: 0 0 20px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&__prateleira-div-text h2 {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: $color-black-500;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
&__prateleira-div-text ul {
|
||||
column-gap: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__prateleira-div-text li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $color-blue-200;
|
||||
color: $color-white;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-family: $font-family;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
line-height: 18px;
|
||||
padding: 5px;
|
||||
transition: ease-in-out 250ms;
|
||||
border: 1px solid $color-blue-200;
|
||||
}
|
||||
|
||||
&__prateleira-div-text a {
|
||||
text-decoration: none;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 242px;
|
||||
background: $color-blue-200;
|
||||
height: 42px;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
color: $color-white;
|
||||
font-family: $font-family;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
font-style: normal;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
transition: ease-in-out 250ms;
|
||||
border: 1px solid $color-blue-200;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-white;
|
||||
color: $color-blue-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width: 1280px){
|
||||
.footerCheckout {
|
||||
&__prateleira-li-prod {
|
||||
width: 242px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,3 +37,4 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user