Merge pull request 'feature/prateleira-alimentada-com-api' (#3) from feature/prateleira-alimentada-com-api into development

Reviewed-on: #3
This commit is contained in:
Rafael Sampaio de Oliveira 2022-12-11 20:03:11 +00:00
commit 1e83dc174d
3 changed files with 24 additions and 37 deletions

View File

@ -6,36 +6,9 @@ export default class Footer {
} }
async init() { 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(); await this.selectors();
// this.onUpdate(); // this.onUpdate();
this.list = await this.fetchApiData();
this.renderPrateleira(); this.renderPrateleira();
this.items = document.querySelector(".footerCheckout__prateleira-container"); this.items = document.querySelector(".footerCheckout__prateleira-container");
this.renderItems(); this.renderItems();
@ -64,6 +37,22 @@ export default class Footer {
observer.observe(target, config); 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() { renderPrateleira() {
let itemsStructure = ` let itemsStructure = `
<div class="footerCheckout__prateleira__title"> <div class="footerCheckout__prateleira__title">
@ -80,9 +69,8 @@ export default class Footer {
renderItems() { renderItems() {
let itemsCards = ``; let itemsCards = ``;
this.list.forEach((item) => { this.list.forEach((item) => {
const sku = item.items.map((resp) => `<li>${resp}</li>`); const sku = item.skus.map((resp) => `<li>${resp}</li>`);
itemsCards += ` itemsCards += `
<li class="items"> <li class="items">
<figure> <figure>
@ -92,7 +80,7 @@ export default class Footer {
/> />
</figure> </figure>
<div class="items__detail"> <div class="items__detail">
<p>${item.description}</p> <p>${item.name}</p>
</div> </div>
<div class="items__sku"> <div class="items__sku">
<ul> <ul>

View File

@ -114,14 +114,12 @@
} }
.slick-prev { .slick-prev {
// background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
// no-repeat center center;
z-index: 4; z-index: 4;
position: absolute; position: absolute;
left: 1%; left: 1%;
right: 0; right: 0;
top: 40%; top: 44%;
bottom: 60%; bottom: 56%;
width: 14px; width: 14px;
height: 30px; height: 30px;
color: $color-gray6; color: $color-gray6;
@ -131,8 +129,8 @@
position: absolute; position: absolute;
left: 97.5%; left: 97.5%;
right: 0; right: 0;
top: 40%; top: 44%;
bottom: 60%; bottom: 56%;
width: 14px; width: 14px;
height: 30px; height: 30px;
color: $color-gray6; color: $color-gray6;

View File

@ -98,6 +98,7 @@
padding: 5px; padding: 5px;
background: $color-blue; background: $color-blue;
border-radius: 8px; border-radius: 8px;
text-transform: uppercase;
@media (min-width: 1025px) and (max-width: 1107px) { @media (min-width: 1025px) and (max-width: 1107px) {
font-size: 11.5px; font-size: 11.5px;