JavaScript: Proyecto carrito compra agoodshop

En esta actividad, desarrollarás un componente esencial para cualquier tienda online: el carrito de compra. Este ejercicio simula un caso de uso real en el desarrollo web comercial, donde implementarás la funcionalidad completa de un carrito de compras que permite a los usuarios añadir productos, modificar cantidades y ver el total de su pedido.

1. Arquitectura del carrito (40%)

El núcleo del proyecto es una clase Carrito que debe:

• Estar completamente separada de la interfaz de usuario (no debe manipular directamente el DOM)
• Encargarse de almacenar información de productos seleccionados
• Realizar todos los cálculos necesarios (unidades, precios, totales)
• Implementar como mínimo los siguientes métodos:

class Carrito {
    constructor(productos) {
        // Inicializar el carrito con la lista de productos disponibles
        // productos es un array con todos los productos de la tienda
    }

    actualizarUnidades(sku, unidades) {
        // Actualiza la cantidad de un producto específico en el carrito
        // Si unidades = 0, el producto debe eliminarse del carrito
        // Devuelve true si la operación fue exitosa, false en caso contrario
    }

    obtenerInformacionProducto(sku) {
        // Devuelve la información completa de un producto y sus unidades seleccionadas
        // Ejemplo de retorno:
        // {
        //   "sku": "0K3QOSOV4V",
        //   "title": "iFhone 13 Pro",
        //   "price": "938.99",
        //   "quantity": 3
        // }
    }

    obtenerCarrito() {
        // Devuelve un objeto con la información completa del carrito
        // Debe incluir el total calculado y la lista de productos
        // Ejemplo de retorno:
        // {
        //   "total": "5820",
        //   "currency": "€",
        //   "products": [
        //     {
        //       "sku": "0K3QOSOV4V",
        //       "title": "iFhone 13 Pro",
        //       "price": "938.99",
        //       "quantity": 3
        //     },
        //     ...
        //   ]
        // }
    }
}

2. Interfaz y funcionalidad (40%)

La interfaz de usuario debe incluir:

• Listado de productos disponibles obtenidos de la API
• Controles para añadir productos y modificar cantidades (botones +/-, input numérico, etc.)
• Visualización del carrito con los productos seleccionados
• Sección que muestre el total actual del carrito
• Actualización automática del total cuando se modifica cualquier cantidad

Requisitos específicos:

• El DOM debe actualizarse dinámicamente sin recargar la página
• Los productos deben mostrarse con su nombre, precio y controles de cantidad
• El total debe recalcularse y mostrarse en tiempo real con cada cambio

3. Integración con API (10%)

• Crear un endpoint utilizando jsonblob.com con el JSON proporcionado
• Implementar una función para recuperar los productos mediante fetch o axios
• Mostrar los productos obtenidos de la API en la interfaz
• Manejar posibles errores en la comunicación con la API

JSON para la API:

{
  "currency": "€",
  "products": [
    {
      "SKU": "0K3QOSOV4V",
      "title": "iFhone 13 Pro",
      "price": "938.99"
    },
    {
      "SKU": "TGD5XORY1L",
      "title": "Cargador",
      "price": "49.99"
    },
    {
      "SKU": "IOKW9BQ9F3",
      "title": "Funda de piel",
      "price": "79.99"
    }
  ]
}

4. Presentación y experiencia de usuario (10%)

• Diseño limpio y funcional que permita visualizar claramente productos y carrito
• Indicadores visuales cuando se añade/modifica un producto (opcional)
• Mensajes informativos cuando el carrito está vacío o cuando ocurre un error
• Responsive design básico que funcione en diferentes tamaños de pantalla

Instrucciones de implementación paso a paso

1. Configuración inicial:
   • Crear los archivos básicos: index.html (aportado), styles.css (aportado), app.js, carrito.js
2. Desarrollo de la clase Carrito:
   • Implementar la clase Carrito con todos sus métodos
   • Probar la funcionalidad de cálculo independientemente de la interfaz
3. Configuración de la API:
   • Crear un jsonblob con los datos proporcionados
   • Obtener la URL de la API para consumirla
4. Implementación de la interfaz:
   • Crear la función para obtener y mostrar productos de la API
   • Implementar los manejadores de eventos para los botones de cantidad
   • Desarrollar la función de actualización del DOM cuando cambia el carrito
5. Integración y pruebas:
   • Conectar la clase Carrito con la interfaz de usuario
   • Verificar que todos los cálculos son correctos
   • Comprobar que el DOM se actualiza correctamente

Formato de entrega

• Estructura de archivos recomendada:

/index.html
/js/
  - app.js
  - carrito.js
/css/
  - styles.css

• El archivo principal debe ser index.html en la raíz del proyecto.
• El proyecto debe funcionar al abrir el index.html en cualquier navegador moderno.