productos.
json (Nuevo Archivo)
Crea un archivo llamado [Link] y pega el contenido del array productos que tenías en
[Link] (ahora en formato JSON). Este archivo reemplazará a [Link].
JSON
{ "id": 1, "imagen": "[Link] "nombre":
"Duraznos", "precio": 310 },
{ "id": 2, "imagen": "[Link] "nombre":
"Arandanos", "precio": 650 },
{ "id": 3, "imagen": "[Link] "nombre":
"Mango", "precio": 290 },
{ "id": 4, "imagen": "[Link] "nombre": "Uvas",
"precio": 700 },
{ "id": 5, "imagen": "[Link] "nombre": "Peras",
"precio": 320 },
{ "id": 6, "imagen": "[Link] "nombre":
"Cerezas", "precio": 1100 },
{ "id": 7, "imagen": "[Link] "nombre":
"Melón", "precio": 350 }
Para resolver la Actividad 4 y convertir tu proyecto en una "Demo" más cercana a un proyecto real, se
deben realizar varias modificaciones en tus archivos JavaScript y HTML. El objetivo es utilizar fetch() para
cargar los productos desde un archivo JSON, visualizar el carrito en [Link], y añadir una
funcionalidad al botón de "Comprar".
Aquí te proporciono el código necesario para cada archivo, siguiendo las consignas:
1. [Link] (Nuevo Archivo)
Crea un archivo llamado [Link] y pega el contenido del array productos que tenías en
[Link] (ahora en formato JSON). Este archivo reemplazará a [Link].
JSON
{ "id": 1, "imagen": "[Link] "nombre":
"Duraznos", "precio": 310 },
{ "id": 2, "imagen": "[Link] "nombre":
"Arandanos", "precio": 650 },
{ "id": 3, "imagen": "[Link] "nombre":
"Mango", "precio": 290 },
{ "id": 4, "imagen": "[Link] "nombre": "Uvas",
"precio": 700 },
{ "id": 5, "imagen": "[Link] "nombre": "Peras",
"precio": 320 },
{ "id": 6, "imagen": "[Link] "nombre":
"Cerezas", "precio": 1100 },
{ "id": 7, "imagen": "[Link] "nombre":
"Melón", "precio": 350 }
2. [Link] (Modificado)
Modifica tu [Link] para:
Eliminar la referencia a [Link].
Asegurarte de que [Link] y [Link] estén correctamente enlazados al final del <body>.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frutería Online</title>
<link rel="stylesheet" href="[Link]"> </head>
<body>
<header>
<h1>Asociación Sudamericana de Productores de Frutas</h1>
<nav>
<a href="[Link]">Productos</a>
<a href="[Link]">Mi Carrito</a>
</nav>
</header>
<main>
<h2>Nuestros Productos</h2>
<div class="container">
</div>
</main>
[Link] (Modificado)
Este archivo ahora se encargará de cargar los productos de forma asíncrona desde [Link]
usando fetch().
JavaScript
// [Link]
// 1.b) Agregar la constante productos como un array vacío.
// 1.b) También agregar una constante URL, que tenga referenciada la ruta al archivo [Link].
let productos = []; // Usamos `let` porque su contenido se modificará.
const URL = './[Link]';
/**
* Función que recibe un objeto producto y retorna un bloque de código HTML (una Card).
* @param {object} producto - Objeto literal con la estructura de un producto.
* @returns {string} Bloque de código HTML de la Card.
*/
function retornarCardHTML(producto) {
return `
<div class="product-card">
<img src="${[Link]}" alt="${[Link]}">
<h3>${[Link]}</h3>
<p>Precio: $${[Link](2)}</p>
<button class="button button-outline button-add" id="${[Link]}">Agregar al
carrito</button>
</div>
`;
/**
* Arrow Function para activar el evento click en todos los botones de las Cards HTML.
*/
const activarClickEnBotones = () => {
const botonesAgregar = [Link]('.[Link]-add');
if (botonesAgregar) {
for (const boton of botonesAgregar) {
[Link]('click', (e) => {
const productoId = parseInt([Link]);
agregarAlCarrito(productoId); // Llama a la función del [Link]
});
} else {
[Link]("No se encontraron botones para agregar al carrito.");
};
/**
* Función que recibe un array de objetos (productos) y los carga en el DOM.
* @param {Array<object>} array - Array de objetos productos.
*/
function cargarProductos(array) {
const container = [Link]('.container');
[Link] = '';
[Link](producto => {
const cardHTML = retornarCardHTML(producto);
[Link] += cardHTML;
});
activarClickEnBotones();
// 1.c) Crear una función llamada obtenerProductos(), la cual utilizará la función fetch().
const obtenerProductos = () => {
fetch(URL) // Dentro de fetch() referenciar la constante URL
.then((response) => [Link]()) // Definir los pasos para convertir los datos obtenidos a JSON.
.then((data) => {
// Luego agregar todo su contenido al array productos.
// Utilizar el método [Link]() junto a spread operator.
[Link](...data);
// 1.d) Llamar a la función cargarProductos (productos) dentro de un método .then() dedicado.
cargarProductos(productos);
})
.catch((error) => [Link]("Error al obtener los productos:", error));
};
// La función obtenerProductos() debe ser la función principal a llamar.
// El llamado a la función original (cargarProductos(productos)) debe ser quitado.
[Link]('DOMContentLoaded', obtenerProductos);
4. [Link] (Modificado de Actividad 3, sin más cambios significativos para Actividad 4)
Este archivo ya fue modificado en la Actividad 3 para la persistencia del carrito. No necesita cambios
adicionales para la Actividad 4, pero lo incluyo completo para claridad.
JavaScript
// [Link]
/**
* Función para almacenar el array carritoFrutas en LocalStorage.
*/
const almacenarCarrito = () => {
if ([Link] > 0) {
[Link]('carritoFrutas', [Link](carritoFrutas));
} else {
[Link]('carritoFrutas'); // Eliminar si el carrito está vacío.
};
/**
* Función para recuperar la información almacenada en LocalStorage bajo la clave 'carritoFrutas'.
* @returns {Array<Object>} El array de productos del carrito recuperado o un array vacío si no existe.
*/
const recuperarCarrito = () => {
const carritoGuardado = [Link]([Link]('carritoFrutas')) || [];
return carritoGuardado;
};
// Inicialización de carritoFrutas con datos de LocalStorage
let carritoFrutas = recuperarCarrito(); // Usamos `let` si planeamos reasignarlo (ej. vaciarlo).
/**
* Arrow Function para agregar un producto al carrito.
* @param {number} frutaId - El ID del producto a agregar.
*/
const agregarAlCarrito = (frutaId) => {
if (frutaId > 0) {
// 'productos' es una variable global que se poblará desde [Link]
const productoEncontrado = [Link]((producto) => [Link] === frutaId);
if (productoEncontrado !== undefined) {
[Link](productoEncontrado);
almacenarCarrito();
[Link](`Producto "${[Link]}" agregado al carrito.`);
} else {
[Link](`No se encontró ningún producto con el ID: ${frutaId}`);
}
} else {
[Link]("El ID del producto debe ser mayor a 0.");
};
5. [Link] (Modificado)
Modifica tu [Link] para:
Asegurarte de que la referencia a js/[Link] esté presente con el atributo defer.
Asegurarte de que la tabla tenga un <tbody> (con un id o clase para referenciarlo) y un botón de
"Comprar" (también con un id o clase).
Incluir un <tr> de ejemplo dentro del <tbody> (este será la plantilla a copiar para retornarTablaHTML).
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout - Frutería Online</title>
<link rel="stylesheet" href="[Link]"> </head>
<body>
<header>
<h1>Asociación Sudamericana de Productores de Frutas</h1>
<nav>
<a href="[Link]">Productos</a>
<a href="[Link]">Mi Carrito</a>
</nav>
</header>
<main>
<h2>Verifica tus productos antes de confirmar la compra</h2>
<section class="cart-summary">
<table>
<thead>
<tr>
<th>Producto</th>
<th>Descripción</th>
<th>Importe</th>
<th>Quitar</th>
</tr>
</thead>
<tbody id="tabla-carrito">
</tbody>
</table>
<div class="cart-total">
<p>Total: $<span id="total-carrito">0.00</span></p>
</div>
<button id="btn-comprar" class="button button-solid">COMPRAR</button>
</section>
</main>
<footer>
<p>© 2025 Frutería Online. Todos los derechos reservados.</p>
</footer>
<script src="[Link]"></script> <script src="[Link]"></script>
<script src="[Link]" defer></script> </body>
</html>