ZX

ProductList.js

export default function productList(products) {

  const element = document.getElementById('product-list');

  // map of products
  let productItem = products.map(product => `
  <div class="product-item">
  <h1 class="product-title">${product.productVariants[0].title}</h1>
  <img class="product-image" src="${product.productVariants[0].imageUrl}" alt="${product.productVariants[0].title}">
  <p class="product-price">${product.productVariants[0].price}</p>
  <button class="less">-</button>
  <input type="text" class="item-amount" value="1"></input>
  <button class="more">+</button>
  </div>`).join('');

  // append list to html
  element.innerHTML = productItem;
}

ProductListComponent.js

export class ProductListComponent {

  constructor(productService) {
    this.productService = new ProductService();
    this.init();
  }

  function init() {
    this.productService.getProduct('storeId')
        .then({ function (data) {
        let storeId = data.data.pocSearch[0].id;
        // call productService function
        buildTemplate(storeId);
    })
    .catch(error => console.error('TODO: tratar erro ', error));
  }
  
  function buildTemplate(products) {
        const element = document.getElementById('product-list');

    // map of products
    let productItem = products.map(product => `
    <div class="product-item">
    <h1 class="product-title">${product.productVariants[0].title}</h1>
    <img class="product-image" src="${product.productVariants[0].imageUrl}" alt="${product.productVariants[0].title}">
    <p class="product-price">${product.productVariants[0].price}</p>
    <button class="less">-</button>
    <input type="text" class="item-amount" value="1"></input>
    <button class="more">+</button>
    </div>`).join('');

    // append list to html
    element.innerHTML = productItem;
  }

  
}