forked from M3-Academy/m3-academy-template-checkout
feature/prateleira-alimentada-com-api #3
@ -6,36 +6,9 @@ export default class Footer {
|
||||
}
|
||||
|
||||
async init() {
|
||||
this.list = [
|
||||
{
|
||||
image: "https://picsum.photos/242/242",
|
||||
description: "Sandália Azul Spike Amarração",
|
||||
items: [34, 35, 36, 37, 38, "Rosa"],
|
||||
},
|
||||
{
|
||||
image: "https://picsum.photos/242/242",
|
||||
description: "Sandália Roxo Spike Amarração",
|
||||
items: [34, 35, 36, 37, 38],
|
||||
},
|
||||
{
|
||||
image: "https://picsum.photos/242/242",
|
||||
description: "Sandália Verde Spike Amarração",
|
||||
items: [34, 35, 36, 37, 38],
|
||||
},
|
||||
{
|
||||
image: "https://picsum.photos/242/242",
|
||||
description: "Jaqueta Masculina Thermoball Eco",
|
||||
items: ["VERDE", "AZUL", "JAQUETA AZUL"],
|
||||
},
|
||||
{
|
||||
image: "https://picsum.photos/242/242",
|
||||
description: "Sandália Amarela Spike Amarração",
|
||||
items: [34],
|
||||
},
|
||||
];
|
||||
|
||||
await this.selectors();
|
||||
// this.onUpdate();
|
||||
this.list = await this.fetchApiData();
|
||||
this.renderPrateleira();
|
||||
this.items = document.querySelector(".footerCheckout__prateleira-container");
|
||||
this.renderItems();
|
||||
@ -64,6 +37,22 @@ export default class Footer {
|
||||
observer.observe(target, config);
|
||||
}
|
||||
|
||||
async fetchApiData() {
|
||||
return fetch(
|
||||
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
|
||||
)
|
||||
.then((resp) => resp.json())
|
||||
.then((data) => {
|
||||
const products = data.map((prod) => ({
|
||||
name: prod.productName,
|
||||
skus: prod.items.map((item) => item.name),
|
||||
image: prod.items[0].images[0].imageUrl,
|
||||
}));
|
||||
|
||||
return products;
|
||||
});
|
||||
}
|
||||
|
||||
renderPrateleira() {
|
||||
let itemsStructure = `
|
||||
<div class="footerCheckout__prateleira__title">
|
||||
@ -80,9 +69,9 @@ export default class Footer {
|
||||
|
||||
renderItems() {
|
||||
let itemsCards = ``;
|
||||
|
||||
console.log(this.list);
|
||||
this.list.forEach((item) => {
|
||||
const sku = item.items.map((resp) => `<li>${resp}</li>`);
|
||||
const sku = item.skus.map((resp) => `<li>${resp}</li>`);
|
||||
itemsCards += `
|
||||
<li class="items">
|
||||
<figure>
|
||||
@ -92,7 +81,7 @@ export default class Footer {
|
||||
/>
|
||||
</figure>
|
||||
<div class="items__detail">
|
||||
<p>${item.description}</p>
|
||||
<p>${item.name}</p>
|
||||
</div>
|
||||
<div class="items__sku">
|
||||
<ul>
|
||||
|
@ -114,14 +114,12 @@
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
// background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
|
||||
// no-repeat center center;
|
||||
z-index: 4;
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
right: 0;
|
||||
top: 40%;
|
||||
bottom: 60%;
|
||||
top: 44%;
|
||||
bottom: 56%;
|
||||
width: 14px;
|
||||
height: 30px;
|
||||
color: $color-gray6;
|
||||
@ -131,8 +129,8 @@
|
||||
position: absolute;
|
||||
left: 97.5%;
|
||||
right: 0;
|
||||
top: 40%;
|
||||
bottom: 60%;
|
||||
top: 44%;
|
||||
bottom: 56%;
|
||||
width: 14px;
|
||||
height: 30px;
|
||||
color: $color-gray6;
|
||||
|
@ -98,6 +98,7 @@
|
||||
padding: 5px;
|
||||
background: $color-blue;
|
||||
border-radius: 8px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (min-width: 1025px) and (max-width: 1107px) {
|
||||
font-size: 11.5px;
|
||||
|
Loading…
Reference in New Issue
Block a user