Una revista que también vende
Lograr el tono de una revista de moda sin perder lo que una tienda necesita: encontrar productos, guardarlos y pagar.
Volver a proyectos
N.º 002 · E-commerce
ALCOBA
Construyo flujos de compra completos: filtros, carrito persistente y checkout validado en JavaScript vanilla, con una estética de revista.
- Año
- 2026
- Tipo
- E-commerce editorial · 7 páginas
- Rol
- Diseño y desarrollo front-end
- Stack
- HTML5 · SCSS · Bootstrap 5 · JavaScript · AOS
Reto, solución y resultado
Diseño editorial, lógica propia
Estilos en SCSS por capas sobre la grilla de Bootstrap; filtros, carrito, checkout y pago escritos en JavaScript vanilla.
Un flujo de compra completo
De la colección a la confirmación del pedido, con el carrito guardado entre páginas y un pago de demostración que valida como uno real.
Lo destacado
Una tienda de principio a fin
Filtros y búsqueda en la tienda
Filtra por categoría, color y talla, ordena por precio y busca sin importar acentos ni mayúsculas. Si nada coincide, un mensaje lo dice y ofrece limpiar los filtros.
Un carrito que no se pierde
Se guarda en localStorage, valida cada producto al leerlo y sigue funcionando aunque el almacenamiento no esté disponible.
Checkout completo
Resumen con envío gratis desde $300 USD, validación del formulario, foco en el primer error y número de pedido al confirmar.
Una decisión técnica
Una tarjeta que se valida como las reales
El pago es una demostración: los datos de la tarjeta nunca se guardan ni se envían.
Aun así, el formulario detecta la marca (Visa, Mastercard o AMEX), da formato al número mientras se escribe y lo valida con el algoritmo de Luhn, el mismo que usan las tarjetas reales.
const BRANDS = [
{ label: "AMEX", pattern: /^3[47]/, length: 15 },
{ label: "VISA", pattern: /^4/, length: 16 },
{ label: "Mastercard", pattern: /^(5[1-5]|2[2-7])/, length: 16 },
];
// Suma de verificación de Luhn: la usan todas las tarjetas reales.
const passesLuhn = (digits) => {
let sum = 0;
digits.split("").reverse().forEach((char, index) => {
let digit = Number(char);
if (index % 2 === 1) {
digit *= 2;
if (digit > 9) digit -= 9;
}
sum += digit;
});
return sum % 10 === 0;
};
Las colecciones
Seis capítulos inspirados en el invierno
