forked from M3-Academy/m3-academy-template-checkout
feat(prateleira): adiciona prateleira ao footer e slick na parteleira
This commit is contained in:
parent
ce56b0ba48
commit
808df85d99
@ -8,6 +8,8 @@ export default class Footer {
|
||||
async init() {
|
||||
await this.selectors();
|
||||
await this.addImagesFooter();
|
||||
await this.shelfCreation();
|
||||
await this.addCarrossel();
|
||||
// this.onUpdate();
|
||||
}
|
||||
|
||||
@ -31,13 +33,7 @@ export default class Footer {
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
async addImagesFooter() {
|
||||
const imagesListStamps = document.querySelectorAll(".footerCheckout .footerCheckout__wrapper .container .footerCheckout__stamps");
|
||||
@ -73,4 +69,82 @@ export default class Footer {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async shelfCreation() {
|
||||
const url = 'https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319';
|
||||
|
||||
|
||||
fetch(url)
|
||||
.then((resp) => {
|
||||
return resp.json();
|
||||
})
|
||||
.then((data) => {
|
||||
let products = data;
|
||||
console.log(products);
|
||||
const prateleira = document.querySelector('.footerCheckout__prateleira')
|
||||
const img = document.createElement('img');
|
||||
|
||||
console.log(prateleira)
|
||||
|
||||
prateleira.innerHTML = `
|
||||
<ul class="footerCheckout__products">
|
||||
<li>
|
||||
<figure><img src=${products[0].items[0].images[0].imageUrl}><figcaption>${products[0].productName}</figcaption></figure>
|
||||
<ul>
|
||||
<li><button>${products[0].items[0].name}</button></li>
|
||||
<li><button>${products[0].items[1].name}</button></li>
|
||||
<li><button>${products[0].items[2].name}</button></li>
|
||||
</ul>
|
||||
<a href=${products[0].link}><button>VER PRODUTO</button></a>
|
||||
</li>
|
||||
<li>
|
||||
<figure><img src=${products[1].items[0].images[0].imageUrl}><figcaption>${products[1].productName}</figcaption></figure>
|
||||
<ul>
|
||||
<li><button>${products[1].items[0].name}</button></li>
|
||||
<li><button>${products[1].items[1].name}</button></li>
|
||||
<li><button>${products[1].items[2].name}</button></li>
|
||||
<li><button>${products[1].items[3].name}</button></li>
|
||||
<li><button>${products[1].items[4].name}</button></li>
|
||||
</ul>
|
||||
<a href=${products[1].link}><button>VER PRODUTO</button></a>
|
||||
</li>
|
||||
<li>
|
||||
<figure><img src=${products[2].items[0].images[0].imageUrl}><figcaption>${products[2].productName}</figcaption></figure>
|
||||
<ul>
|
||||
<li><button>${products[2].items[0].name}</button></li>
|
||||
<li><button>${products[2].items[1].name}</button></li>
|
||||
<li><button>${products[2].items[2].name}</button></li>
|
||||
<li><button>${products[2].items[3].name}</button></li>
|
||||
<li><button>${products[2].items[4].name}</button></li>
|
||||
</ul>
|
||||
<a href=${products[2].link}><button>VER PRODUTO</button></a>
|
||||
</li>
|
||||
<li>
|
||||
<figure><img src=${products[3].items[0].images[0].imageUrl}><figcaption>${products[3].productName}</figcaption></figure>
|
||||
<ul>
|
||||
<li><button>${products[3].items[0].name}</button></li>
|
||||
<li><button>${products[3].items[1].name}</button></li>
|
||||
<li><button>${products[3].items[2].name}</button></li>
|
||||
</ul>
|
||||
<a href=${products[3].link}><button>VER PRODUTO</button></a>
|
||||
</li>
|
||||
<li>
|
||||
<figure><img src=${products[4].items[0].images[0].imageUrl}><figcaption>${products[4].productName}</figcaption></figure>
|
||||
<ul>
|
||||
<li><button>${products[4].items[0].name}</button></li>
|
||||
</ul>
|
||||
<a href=${products[4].link}><button>VER PRODUTO</button></a>
|
||||
</li>
|
||||
</ul>
|
||||
`
|
||||
})
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
const products = await waitElement(".footerCheckout__products");
|
||||
$(products).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user