Aplicar los principios de manipulación del DOM, carga asíncrona de información y creación de elementos dinámicos para mejorar la experiencia de usuario en una tienda en línea básica.
90 minutos ( o menos)
Editor de código (VS Code recomendado)
Navegador actualizado (Chrome, Firefox, Edge)
Carpeta de proyecto base con archivos:
index.html
style.css
productos.json (simulará una base de datos de productos)
main.js
Crea el archivo index.html con lo básico:
Encabezado con el título de la tienda
Contenedor para los productos (<div id="productos">)
Carrito lateral (<div id="carrito">)
Agrega estilo básico con style.css
Grid para los productos
Estilo para botones “Agregar al carrito”
Crea un archivo productos.json con datos como:
[ { "id": 1, "nombre": "Brownie Vegano", "precio": 35, "imagen": "brownie.jpg" }, { "id": 2, "nombre": "Cupcake Vainilla", "precio": 30, "imagen": "cupcake.jpg" }]
En main.js, usa fetch() para cargar productos.json:
fetch("productos.json")
.then(res => res.json())
.then(data => {
mostrarProductos(data);
});
Crea la función mostrarProductos(data) que recorra los productos y los agregue al DOM con innerHTML dinámico.
function mostrarProductos(productos) {
const contenedor = document.getElementById("productos");
productos.forEach(producto => {
const div = document.createElement("div");
div.classList.add("producto");
div.innerHTML = `
<img src="${producto.imagen}" alt="${producto.nombre}">
<h3>${producto.nombre}</h3>
<p>$${producto.precio}</p>
<button class="agregar" data-id="${producto.id}">Agregar</button>
`;
contenedor.appendChild(div);
});
}
Agrega un eventListener general para detectar clics en los botones “Agregar”
document.addEventListener("click", function(e) {
if (e.target.classList.contains("agregar")) {
const id = e.target.getAttribute("data-id");
agregarAlCarrito(id);
}
});
Crea una función agregarAlCarrito(id) que busque el producto, lo agregue a un arreglo y actualice el DOM del carrito en tiempo real.
Agrega un mensaje tipo "toast" que diga “Producto agregado” por 3 segundos usando setTimeout() y creación dinámica de un div
function mostrarAlerta(mensaje) {
const alerta = document.createElement("div");
alerta.className = "toast";
alerta.innerText = mensaje;
document.body.appendChild(alerta);
setTimeout(() => {
alerta.remove();
}, 3000);
}
Llama a esta función cada vez que se agrega un producto.
Evita que se agregue dos veces el mismo producto al carrito mostrando un mensaje diferente.
Una tienda web que carga productos de forma asíncrona.
Permite agregar productos al carrito sin recargar la página.
Muestra mensajes dinámicos al usuario.
Manipula el DOM en tiempo real.
Más información:
https://www.frexus.dev/post/sitios-web-dinamicos-dom-javascript/

Frexus
No comments yet