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

feat: prateleira alimentada com dados da api

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2022-12-11 16:58:32 -03:00
parent ebc2a9094c
commit 30b2e8a13e
3 changed files with 25 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

10
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -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;

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

@ -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;