CursosEmpresasBlogLiveConfPrecios

Landing de productos con Fake API en JavaScript

Clase 36 de 39 • Curso de Fundamentos de JavaScript

Clase anteriorSiguiente clase
Resumen

Crear una landing de productos con JavaScript es más simple de lo que parece cuando se conecta a una Fake API. Aquí se integran manipulación del DOM, funciones utilitarias, y async/await para cargar y renderizar tarjetas de producto con imagen, título y precio de forma clara y optimizada.

¿Cómo estructurar el proyecto y preparar el DOM?

Antes de programar, se propone una estructura mínima: carpeta Async, archivo index.html con CSS y zonas identificadas por IDs. Luego, en app.js se referencian los nodos clave para controlar el flujo de datos y la interfaz.

  • Crear carpeta Async e index.html con estilos y secciones base.
  • Añadir app.js y enlazarlo desde el HTML.
  • Definir variables globales al inicio: API_URL, grid y status_text.
  • Usar querySelector con IDs definidos en el HTML.
// Configuración base
const API_URL = 'URL_DE_LA_FAKE_API_DE_PRODUCTOS';

// Referencias al DOM
const grid = document.querySelector('#grid-productos');
const status_text = document.querySelector('#status');

// Estado de carga y mensajes
function setStatus(message) {
  status_text.textContent = message;
}

¿Cómo actualizar el estado en la interfaz?

Con una función simple se comunica el flujo al usuario: cargando, error o listo. Esto brinda claridad y permite sumar un indicador visual después.

¿Qué funciones utilitarias mejoran el formateo y las imágenes?

Para mantener el código claro, se crean utilerías: formateo de precios y obtención de la imagen principal. La API entrega un arreglo de imágenes y solo se usa la primera.

  • format_price: añade el símbolo de dinero con template strings.
  • getProductImage: retorna product.images[0] para mostrar la primera imagen.
  • Recomendación comentada: convertir de dólares a pesos colombianos con una función adicional si se requiere.
function format_price(price) {
  return `$${price}`; // utilería simple; se puede extender a COP si aplica
}

function getProductImage(product) {
  return product.images[0];
}

¿Cómo construir una card de producto accesible y optimizada?

La tarjeta combina semántica, rendimiento y seguridad: etiqueta article, imagen con lazy loading, referrerPolicy y crossOrigin, título h3 y precio en p. Se evita cargar imágenes fuera de pantalla y se minimizan conflictos al trabajar localmente.

function createProductCard(product) {
  const card = document.createElement('article');
  card.className = 'card';

  const img = document.createElement('img');
  img.className = 'product-image';
  img.src = getProductImage(product);
  img.alt = product.title;
  img.loading = 'lazy';
  img.referrerPolicy = 'no-referrer';
  img.crossOrigin = 'anonymous';

  const title = document.createElement('h3');
  title.textContent = product.title;

  const price = document.createElement('p');
  price.className = 'price';
  price.textContent = format_price(product.price);

  card.append(img, title, price);
  return card;
}

¿Cómo cargar y renderizar productos con fetch y async/await?

Se implementa un flujo robusto con try/catch: se actualiza el estado, se hace fetch a la API_URL, se parsea a JSON y se limita el listado con slice(0, 9) para mostrar solo los primeros nueve productos. Luego se renderiza el grid y se limpia el estado.

  • fetch + async/await: llamado asíncrono claro y legible.
  • response.json(): transforma la respuesta para iterarla.
  • slice(0, 9): controla cuántos ítems se muestran.
  • for...of: itera productos y montas nodos con append.
  • Manejo de errores: mensaje de estado cuando falla la carga.
function renderProducts(products) {
  grid.innerHTML = '';
  for (const product of products) {
    const card = createProductCard(product);
    grid.append(card);
  }
}

async function loadProducts() {
  try {
    setStatus('Cargando productos.');

    const response = await fetch(API_URL);
    const products = await response.json();

    const firstNine = products.slice(0, 9);
    renderProducts(firstNine);
    setStatus('');
  } catch (error) {
    console.error(error);
    setStatus('No se logró cargar los productos.');
  }
}

// Inicializar
loadProducts();

¿Cómo ver el resultado en el navegador con live server?

Se sugiere abrir index.html con Live Server desde el editor para observar el grid renderizado y la solicitud en tiempo real a la Fake API. Así validas que el DOM se actualiza con las cards, imágenes, títulos y precios.

¿Tienes dudas o quieres proponer mejoras al flujo de carga o al formateo de precios? Comparte tus ideas en los comentarios.

      Landing de productos con Fake API en JavaScript